球の色をthree.jsの座標の関数として設定する

Question

three.jsでこの基本球をレンダリングすると、球の色が球の座標の関数になるように、どのように変更できますか？たとえば、球の上半分を赤、下半分を黒にしますか？

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(50, 500/400, 0.1, 1000); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(500, 400); 
document.body.appendChild(renderer.domElement); 

var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2); 
var material = new THREE.MeshNormalMaterial(); 
var cube = new THREE.Mesh(geometry, material); 
scene.add(cube); 


camera.position.z = 10; 
var render = function() { 
    requestAnimationFrame(render); 

    cube.rotation.y += 0.001; 

    renderer.render(scene, camera); 
}; 

render(); 

Answer 1

追加、 0より大きい場合は、顔が上半分にあることを意味し、そうでない場合は下半分にあります。

var sphereGeom = new THREE.SphereGeometry(5, 32, 24); 
sphereGeom.faces.forEach(function(face){ // loop through faces 
    if (face.normal.y > 0) // check y-coordinate of a face's normal 
    face.color.setHex(0xFF0000); // set the color of the face (red) 
    else 
    face.color.setHex(0x000000); // set the color of the face (black) 
}) 

var sphere = new THREE.Mesh(sphereGeom, new THREE.MeshStandardMaterial({ 
    vertexColors: THREE.FaceColors // use face colors 
})); 
scene.add(sphere); 

jsfiddle例。

しかし、これは特定のケースです。より複雑な図形の場合は、面の頂点の座標を確認できます。このように：geometry.vertices[face.a] - ここでは、頂点の配列における面のa頂点の座標が見つかりました。

Answer 2

例えば、このような変更はどうですか？周囲の光追加「MeshNormalMaterial」に「MeshLambertMaterial」

から

変更

はあなたが球の顔の通常のy座標を確認することができ、スポットライトのオプションとして

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(50, 500/400, 0.1, 1000); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(500, 400); 
document.body.appendChild(renderer.domElement); 

var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2); 
var material = new THREE.MeshLambertMaterial({color: 0xffffff}); 
var cube = new THREE.Mesh(geometry, material); 
scene.add(cube); 

// Ambient light 
var ambientLight = new THREE.AmbientLight(0x707070); 
// Spot light 
var directionalLight = new THREE.DirectionalLight(0xff0000,0.8); 
directionalLight.position.set(-60,60,0); 
scene.add(ambientLight, directionalLight); 

camera.position.z = 10; 
var render = function() { 
    requestAnimationFrame(render); 

    cube.rotation.y += 0.001; 

    renderer.render(scene, camera); 
}; 

render();