THREE.js гладкий цвет материала цикл в отдельных геометриях

Question

ребята!

Посмотрите на предоставленную кодировку. Множественная анимация кривых. Так что я пытаюсь достичь этого плавного изменения оттенка на каждой нарисованной кривой. Цвет каждой следующей кривой должен быть немного изменен. И мне нужно контролировать продолжительность этого переключения. Прямо сейчас смещение цветов кажется случайным, и я не могу контролировать его продолжительность.

Вам нужна ваша помощь. Благодарю.

'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 + "%" + ")");