CODEWITHSUNDEEP
javascriptthree.js
Exception
Exception

Reputation: 307

THREE.js Normalization

I feel like I am very close to solving my problem at hand but I'm not sure how to proceed. My goal is to render a sphere by baking in the vertex colors. For ever vertex I need to calculate its normal by averaging the face normals, which these two lines supposedly do.

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

Then, I need to normalize and pass the normalized value as a Hue,Sat,Lightness i.e x->hue, y->sat, z->light using...

myGeometry.color.setHSL();

My problem is that I'm not sure how to normalize it and get an x,y,z value out of it that I can use for the HSL. Any help in the right direction is hugely appreciated! Here is relevant piece of code I'm using.

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

Upvotes: 0

Views: 2005

Answers (1)

schlenger
schlenger

Reputation: 1557

I'm not sure if this is what you excatly need, but I gave it a try:

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

Hope it helps!

Upvotes: 1

Related Questions