Comment changer la couleur du visage dans Three.js
Je cherche à modifier la couleur sur une seule face d'un maillage. C'est dans un contexte WebGL. Je peux changer l'ensemble du maillage de couleur, pas juste un seul Visage. Code ci-dessous:
//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;
}
}
J'ai aussi d'initialiser l'objet, dans ce cas, un Cube de la façon suivante:
//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);
Changer de matériel rend le cube blanc, indépendamment de la couleur de la lumière.
L'intersection de la logique fonctionne toujours, ce qui signifie que je sélectionner le bon visage, mais, hélas, la couleur ne change pas.
Je suis nouveau sur Stackoverflow [bien poser une question, alors j'espère que mes modifications ne sont pas source de confusion]
source d'informationauteur adamsch1
Vous devez vous connecter pour publier un commentaire.
vertexColors: THREE.FaceColors
dansmatériau de.
Et enfin l'utilisation des
face.color.setRGB( Math.random(),
.Math.random(), Math.random())
Maintenant, pas besoin de parcourir la boucle pour 4
côtés (a,b,c,d) pour
THREE.Face4
ou 3 côtés (a,b,c) pourTHREE.Face3
.Cela fonctionne dans les deux WebGL et Toile de rendu.
Exemple
three.js r53
En supposant que "myGeometry" est la géométrie contenant le visage que vous souhaitez changer la couleur de, et de "faceIndex" est l'index du visage particulier que vous souhaitez changer la couleur de.
Ensuite, le maillage doit utiliser le matériel suivant, de sorte que les couleurs des faces sont dérivées à partir des sommets:
Comme par Trois JS Géométrie Document, Pour signaler une mise à jour de ce visages,
Geometry.elementsNeedUpdate
doit être définie sur true.L'extrait de code suivant permet de modifier les couleurs de tous les visages.
mesh.material.vertexColors = THREE.FaceColors
Je pense que la méthode décrite ci-dessus ne fonctionne que dans la
WebGLRenderer
. Si vous allez pour quelque chose qui fonctionne dans leCanvasRenderer
etWebGLRenderer
c'est un peu plus compliqué, mais je soupçonne que le résultat final est plus efficace à la fois en termes d'utilisation de la mémoire et de la performance.Après être passé par la THREE.jS Projector.js la source, c'est la façon dont je l'ai fait:
Cet exemple est adapté du code du travail que j'ai, mais je dois admettre que je ne l'ai pas fait exécuter exacte de ce bloc de code et je n'ai pas une grande expérience de l'obtention de tout premier rendez-vous, mais j'espère que ça aidera quelqu'un qui a du mal
Je suis plutôt nouvelle pour three.js mais la plupart de ces exemples semblent trop long et compliqué. Le code suivant semble de couleur tous les 12 faces triangulaires pour un cube... (WebGLRenderer r73).
Une chose que j'ai noté lors de cette opération est que l'ordre des faces est un peu étrange (pour moi en tant que novice au moins).