javascript - THREE.js规范化

我觉得我已经很接近解决我的问题了，但是我不确定该如何进行。
我的目标是通过烘焙顶点颜色来渲染球体。对于永远的顶点，我需要通过平均面法线来计算其法线，这两条线理应如此。

sphere.geometry.computeFaceNormals();
sphere.geometry.computeVertexNormals();

然后，我需要标准化并通过使用...来将标准化值作为Hue，Sat，Lightness传递，即x-> hue，y-> sat，z-> light。

myGeometry.color.setHSL();

我的问题是我不确定如何将其标准化并从中获取x，y，z值（可用于HSL）。朝正确方向提供的任何帮助都将受到高度赞赏！这是我正在使用的相关代码。

var sphereBaked =  new THREE.MeshPhongMaterial();
sphere = new THREE.Mesh(new THREE.SphereGeometry( 150, 32, 32),sphereBaked);

sphere.geometry.computeFaceNormals();
sphere.geometry.computeVertexNormals();

//sphereBaked.color.setHSL();

sphere.position.set(0,150,0);
scene.add(sphere);

最佳答案

我不确定这是否是您真正需要的，但是我尝试了一下：

// you could try something like this:
for ( var i = 0; i < myGeometry.faces.length; i ++ ) {

    // get current normal and normalize
    var currentNormal = myGeometry.faces[i].normal.clone();
    currentNormal.normalize();

    // iterate the vertexColors
    // like in http://stackoverflow.com/questions/17874682/dynamically-change-vertex-color-in-three-js
    for ( var j = 0; j < myGeometry.faces[i].vertexColors.length; j ++ ) {
        myGeometry.faces[i].vertexColors[j].setHSL(currentNormal.x, currentNormal.y, currentNormal.z);
    }
}

// force color update
myGeometry.colorsNeedUpdate = true;

希望能帮助到你！

关于javascript - THREE.js规范化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28643135/