javascript - THREE.js 规范化

Question

我觉得我已经非常接近解决我手头的问题，但我不知道如何继续。 我的目标是通过烘焙顶点颜色来渲染球体。对于每个顶点，我需要通过平均面法线来计算其法线，这两条线应该是这样做的。

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

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

myGeometry.color.setHSL();

我的问题是我不确定如何对其进行标准化并从中获取可用于 HSL 的 x,y,z 值。非常感谢任何正确方向的帮助!这是我正在使用的相关代码。

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);

Answer 1

我不确定这是否是您真正需要的，但我尝试过:

// 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;

希望对你有帮助!