javascript - Setting random color for each face in THREEjs results in black object - Stack Overflow

admin管理员组

文章数量:1304200

I am trying to render a geometry with each face colored by a random color.

I iterate through geometry.faces and set a random color for each face. Upon that I create a new material which is added to the mesh. It seems to me that I've set all the necessary flags, but still my object appears pitch black in the scene.

The scene contains two directional lights, as well as ambient light. In case I use THREE.MeshPhongMaterial the object also appears black, but has some reflections from directional light.

Here is the code:

var geometry = new THREE.Geometry().fromBufferGeometry( object );

for ( var i = 0; i < geometry.faces.length; i ++ ) {

    var face = geometry.faces[ i ];
    face.color.setHex( Math.random() * 0xffffff );
}

var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );

var mesh = new THREE.Mesh( geometry, material);
mesh.dynamic = true;
mesh.geometry.colorsNeedUpdate = true;

scene.add( mesh );

I am using the latest version of three.js: r84

Does anyone see what I am missing?

I am trying to render a geometry with each face colored by a random color.

I iterate through geometry.faces and set a random color for each face. Upon that I create a new material which is added to the mesh. It seems to me that I've set all the necessary flags, but still my object appears pitch black in the scene.

The scene contains two directional lights, as well as ambient light. In case I use THREE.MeshPhongMaterial the object also appears black, but has some reflections from directional light.

Here is the code:

var geometry = new THREE.Geometry().fromBufferGeometry( object );

for ( var i = 0; i < geometry.faces.length; i ++ ) {

    var face = geometry.faces[ i ];
    face.color.setHex( Math.random() * 0xffffff );
}

var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );

var mesh = new THREE.Mesh( geometry, material);
mesh.dynamic = true;
mesh.geometry.colorsNeedUpdate = true;

scene.add( mesh );

I am using the latest version of three.js: r84

Does anyone see what I am missing?

• javascript
• three.js

Share Improve this question Follow edited Mar 29, 2017 at 11:32 user128511 asked Mar 29, 2017 at 8:37 aywenaywen 8511 gold badge11 silver badge1010 bronze badges 7

• It should be fromBufferGeometry( object.geometry ). – WestLangley Commented Mar 29, 2017 at 14:28
• Are you sure? It does work this way now. I am asking since I am only new to Three.js. Is this working by accident? What is the difference? – aywen Commented Mar 29, 2017 at 15:11
• Did you try what I suggested? – WestLangley Commented Mar 29, 2017 at 15:12
• I did, it doesn't work. Uncaught TypeError: Cannot read property 'index' of undefined at Geometry.fromBufferGeometry (three.js:12636) at 3DViewer.js:57 at STLLoader.js:51 at XMLHttpRequest.<anonymous> (three.js:29269) – aywen Commented Mar 30, 2017 at 9:08
• You must pass in a THREE.BufferGeometry to Geometry.fromBufferGeometry(). – WestLangley Commented Mar 30, 2017 at 15:16

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

Huh! I got it! We can't just assign color to a face, but we need to assign it to each vertex. Yes, then we have interpolation, which is not really something I want, but at least we can see colors. In case someone knows how to assign color for the face directly without interpolation, I'd be grateful for advice!

This is the new version of the code, just adapt the for loop:

var faceIndices = [ 'a', 'b', 'c' ];
for ( var i = 0; i < geometry.faces.length; i ++ ) {
    var face  = geometry.faces[ i ];
    for( var j = 0; j < 3; j++ ) {
        color = new THREE.Color( 0xffffff );
        color.setHex( Math.random() * 0xffffff );
        face.vertexColors[ j ] = color;
    }
}

I used this:

function addStar() {
  const geometry = new THREE.SphereGeometry(0.25, 24, 24)
  const color = THREE.MathUtils.randInt(0, 0xffffff)
  const material = new THREE.MeshStandardMaterial({color: color})
  const star = new THREE.Mesh(geometry, material)
  const [x, y, z] = Array(3).fill().map(() =>THREE.MathUtils.randFloatSpread(100))
  star.position.set(x, y, z)
  scene.add(star) 
}

Array(200).fill().forEach(addStar)

}

本文标签： javascriptSetting random color for each face in THREEjs results in black objectStack Overflow