THREE.js 平滑 material 单独几何体中的颜色循环

Question

伙计们！

查看提供的codepen。多曲线动画。所以我试图在每条绘制的曲线上达到这种平滑的色调变化。下一条曲线的颜色应该稍微改变一下色调。我需要控制这种转变的持续时间。现在颜色变化似乎是随机的，我无法控制它的持续时间。

需要你的帮助。谢谢

'use strict';
var camera, scene, renderer, controls;
var params = {P0x: 0, P0y: 0,P1x: 0.6, P1y: 1.7,P2x: -0.1, P2y: 1.1,P3x: 0, P3y: 3,steps: 30};
var controlPoints = [[params.P0x, params.P0y, 0],[params.P1x, params.P1y, 0],[params.P2x, params.P2y, 0],[params.P3x, params.P3y, 0]];
var material = new THREE.LineBasicMaterial( { color: 0xd9e2ec, linewidth: 1 } );
var mat = new THREE.MeshBasicMaterial({wireframe:true,color: 0x4a4a4a, side: THREE.DoubleSide, opacity:0, transparent:true});
var angle1 = 0;
var angle2 = 0;
var color = 0;
var initialCurvesCount = 5;
var initialGroupsCount = 6;
var curveQuality = 500;
var hColor = 1;

var mesh = {};
var axis1 = new THREE.Vector3(0,0.8,1.2);
var axis2 = new THREE.Vector3(0,-0.8,3.2);
var geom = {};

var curveGeometry;
var curves;

var group = {};

var triangle = [[ 0, 0.5, -0.5, 0 ], [ 0.6, -0.5, -0.5, 0.6 ], [ 0, 0, 0, 0 ]];


init();
createCurveGroups();
createHelpers();
animate();

function createHelpers() {

  // var gridHelper = new THREE.GridHelper( 4, 8, 0xadd6e8, 0xdddddd );
  // var gridHelper2 = new THREE.GridHelper( 4, 8, 0xadd6e8, 0xdddddd );
  // gridHelper2.rotation.x = 1.58;
  // gridHelper.position.y = 0;
  // gridHelper.position.x = 0;
  //
  // var axisHelper = new THREE.AxisHelper( 1 );
  // axisHelper.position.y = 0;
  // axisHelper.position.x = 0;
  //
  // scene.add( gridHelper );
  // scene.add( gridHelper2 );
  // scene.add( axisHelper );

}

function init() {

      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 10000);
      camera.position.set(-0,0,2);
      camera.rotation.y = -0;
      camera.frustumCulled = false;
      controls = new THREE.OrbitControls( camera );
      controls.addEventListener( 'change', render );
      renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setClearColor( 0xffffff, 1 );
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );

}

function createBezierCurveNEW(cpList, steps) {

  var N = Math.round(steps)+1 || 20;
  var geometry = new THREE.Geometry();
  var curve = new THREE.CubicBezierCurve3();
  var cp = cpList[0];
  curve.v0 = new THREE.Vector3(cp[0], cp[1], cp[2]);
  cp = cpList[1];
  curve.v1 = new THREE.Vector3(cp[0], cp[1], cp[2]);
  cp = cpList[2];
  curve.v2 = new THREE.Vector3(cp[0], cp[1], cp[2]);
  cp = cpList[3];
  curve.v3 = new THREE.Vector3(cp[0], cp[1], cp[2]);
  var j, stepSize = 1/(N-1);
  for (j = 0; j < N; j++) {
      geometry.vertices.push( curve.getPoint(j * stepSize) );
  }
  return geometry;
};

function createTriangle(number) {
  geom[number] = new THREE.Geometry();
  geom[number].vertices.push(new THREE.Vector3(0, 0.35, 0));
  geom[number].vertices.push(new THREE.Vector3(0.35, -0.35, 0));
  geom[number].vertices.push(new THREE.Vector3(-0.35,-0.35, 0));
  geom[number].faces.push(new THREE.Face3(0, 1, 2));
  geom[number].applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0, 0 ) );
  mesh[number] = new THREE.Mesh(geom[number], mat);
};

function createCurveGroups() {
  for ( var i = 1; i <= initialGroupsCount; ++i ) {
  group[i] = new THREE.Group();
  scene.add( group[i] );
  group[i].rotation.set( 0, 3.15, i/((initialGroupsCount/6 - initialGroupsCount/130)) );
};
};
function cloneCurvesToGroups() {
for ( var i = 1; i <= (Object.keys(group).length); ++i ) {
var curvesArray = {};
curvesArray[i] = curves.clone();
group[i].add(curvesArray[i]);
}
};

function colorChanger() {
}

function morphTriangle() {

      group[1].add( mesh[1] );
      mesh[1].rotateOnAxis(axis1,(angle2 + 1));
      mesh[1].updateMatrix();
      mesh[1].geometry.applyMatrix( mesh[1].matrix );
      mesh[1].matrix.identity();
      mesh[1].position.set( 0, 0, 0 );
      mesh[1].geometry.verticesNeedUpdate = true;

      group[1].add( mesh[2] );
      mesh[2].rotateOnAxis(axis2,-angle2);
      mesh[2].updateMatrix();
      mesh[2].geometry.applyMatrix( mesh[2].matrix );
      mesh[2].matrix.identity();
      mesh[2].position.set( 0, 0, 0 );
      mesh[2].geometry.verticesNeedUpdate = true;

};

  function changeCreatedCurves() {
    angle1 += 0.00450;
    angle2 += 0.0020;
    createTriangle(1);
    createTriangle(2);
    morphTriangle();

  for ( var i = 1; i <= initialCurvesCount; ++i ) {

      controlPoints[0][0] = -0.09 ;
      controlPoints[0][1] = 0;
      controlPoints[0][2] = -0.035 + i/10000; //optional + Math.sin(angle1)/6;
      controlPoints[2][0] = mesh[2].geometry.vertices[0]['x'] + 0.1 - i/55  + Math.cos(angle1)/6;
      controlPoints[2][1] = mesh[2].geometry.vertices[0]['y'];
      controlPoints[2][2] = mesh[2].geometry.vertices[0]['z'] + i/20 + Math.sin(angle1)/6;
      controlPoints[1][0] = mesh[1].geometry.vertices[0]['x'] - i/20 + Math.sin(angle1)/6;
      controlPoints[1][1] = mesh[1].geometry.vertices[0]['y'];
      controlPoints[1][2] = mesh[1].geometry.vertices[0]['z'] - i/20 + Math.sin(angle1)/6;
      controlPoints[3][0] = triangle[0][0] - 0.05 + i/10;
      controlPoints[3][1] = triangle[1][0] - 0.05 + i/10;
      controlPoints[3][2] = triangle[2][0];


// !!! HERE IS THE PROBLEM !!!
      hColor = hColor + i*0.3;
     var wow = String("hsl(" + hColor*i + "," + 100 + "%" + "," + 70 + "%" + ")");
      //  console.log(wow)
      //  console.log("this is i "+ i);
      material = new THREE.LineBasicMaterial( { color: wow, linewidth: 1 } );
// !!! HERE IS THE PROBLEM !!!
      curveGeometry = createBezierCurveNEW(controlPoints, (curveQuality/initialGroupsCount));
      curves = new THREE.Line(curveGeometry, material);
      group[1].add(curves);
      // debugger
      render();

      cloneCurvesToGroups();

    }
  };

  function disposeCurveGeometry() {
  for (var i = 0; i <= group[1].children.length; ++i) {
    group[1].children[0].geometry.dispose();
    group[1].children[0].material.dispose();
    for (var j = 1; j <= (Object.keys(group).length); ++j) {
    group[j].remove(group[j].children[0]);
    };
  };
  };

function render() {
    renderer.render(scene, camera);
};

function animate() {

  requestAnimationFrame(animate);
  changeCreatedCurves();
  disposeCurveGeometry();
  onWindowResize();
};

Working example code at codepen

Answer 1

您正在寻找这样的东西吗？

var vueDifference = 20;
var speed = 0.03;
hColor = hColor + speed;

var wow = String("hsl(" + (hColor + i * vueDifference) + "," + 100 + "%" + "," + 70 + "%" + ")");

THREE.js 平滑 material 单独几何体中的颜色循环

THREE.js smooth material color cycle in separate geometries

javascript

three.js

cycle