Jak zmienić kolor twarzy w Three.js
Próbuję zmienić kolor na pojedynczej powierzchni siatki. To jest w kontekście WebGL. Mogę zmienić cały kolor siatki, a nie pojedynczą twarz. Odpowiedni kod poniżej:
// Updated Per Lee!
var camera = _this.camera;
var projector = new THREE.Projector();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( kage.scene.children );
if ( intersects.length > 0 ) {
face = intersects[0].face;
var faceIndices = ['a', 'b', 'c', 'd'];
var numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;
// assign color to each vertex of current face
for( var j = 0; j < numberOfSides; j++ ) {
var vertexIndex = face[ faceIndices[ j ] ];
// initialize color variable
var color = new THREE.Color( 0xffffff );
color.setRGB( Math.random(), 0, 0 );
face.vertexColors[ j ] = color;
}
}
Inicjalizuję obiekt, w tym przypadku Cube w następujący sposób:
// this material causes a mesh to use colors assigned to vertices
var material = new THREE.MeshBasicMaterial( {
color: 0xf0f0f0,
shading: THREE.FlatShading,
vertexColors: THREE.VertexColors
});
var directionalLight = new THREE.DirectionalLight(0xEEEEEE);
directionalLight.position.set(10, 1, 1).normalize();
kage.scene.add(directionalLight);
var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300,1,1,1), material);
cube.dynamic = true;
kage.scene.add(cube);
Zmiana materiału sprawia, że kostka jest biała niezależnie od koloru światła. Logika przecięcia nadal działa, co oznacza, że wybieram właściwą twarz, ale niestety kolor się nie zmienia.
Jestem nowym użytkownikiem Stackoverflow [dobrze zadaję pytanie, więc mam nadzieję, że moje zmiany nie są mylące]