Threejs: assign different colors to each vertex in a geometry
javascript, picking, three.js, webgl
Solution
It has to be geometry.vertexColors instead of geometry.colors (push a colour per vertex).
And the material:
material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
Problem
I want to do picking via IdMapping in Three.js Because of performance issues I only have one huge geometry, computed like this: ``` for (var i = 0; i < numberOfVertices; i += 9) { p1 = new THREE.Vector3(graphData.triangles.vertices[i+0], graphData.triangles.vertices[i+1], graphData.triangles.vertices[i+2]); p2 = new THREE.Vector3(graphData.triangles.vertices[i+3], graphData.triangles.vertices[i+4], graphData.triangles.vertices[i+5]); p3 = new THREE.Vector3(graphData.triangles.vertices[i+6], graphData.triangles.vertices[i+7], graphData.triangles.vertices[i+8]); geometry.vertices.push(new THREE.Vertex( p1.clone() )); geometry.vertices.push(new THREE.Vertex( p2.clone() )); geometry.vertices.push(new THREE.Vertex( p3.clone() )); geometry.faces.push( new THREE.Face3( i/3, i/3+1, i/3+2 ) ); // i want to do something like this: geometry.colors.push(new THREE.Color(0xFF0000)); geometry.colors.push(new THREE.Color(0xFF0000)); geometry.colors.push(new THREE.Color(0xFF0000)); } geometry.computeFaceNormals(); var material = new THREE.MeshBasicMaterial({}); var triangles = new THREE.Mesh( geometry, material ); scene.add(triangles); ``` How can I assign different colors to each vertex in my geometry?