Stellen Sie die Farbe der Kugel als Funktion der Koordinaten in three.js ein

Question

Mit dieser grundlegenden Sphäre Rendering in three.js, wie kann ich es ändern, so dass die Farbe der Kugel eine Funktion der Koordinaten auf der Kugel ist? Zum Beispiel, machen Sie die obere Hälfte der Kugel rot und die untere Hälfte schwarz?

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

Als Option können Sie y-Koordinate einer Kugel Gesicht des normalen überprüfen, und wenn es größer als 0 ist, bedeutet dies, dass das Gesicht in der oberen Hälfte ist, ansonsten in der unteren Hälfte.

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 Beispiel.

Aber das ist ein besonderer Fall. Für komplexere Geometrien können Sie Koordinaten von Scheitelpunkten von Gesichtern überprüfen. So: geometry.vertices[face.a] - hier fanden wir Koordinaten des a-Eckpunktes eines Gesichts in der Anordnung der Eckpunkte.

Answer 2

Zum Beispiel, wie wäre es mit einer solchen Änderung?

Wechsel von "MeshNormalMaterial" auf "MeshLambertMaterial"

Umgebungslicht hinzufügen

spot light

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