Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

'vertexColors' parameter is undefined?

Tags:

three.js

const material = new THREE.LineBasicMaterial({
          vertexColors: THREE.VertexColors, 
          transparent: true, 
          side: THREE.DoubleSide,
        })

why?

enter image description here

like image 556
我犟不过你 Avatar asked Mar 06 '26 04:03

我犟不过你


2 Answers

.vertexColors can either be true or false, nothing else. THREE.VertexColors does not exist, so it comes out as undefined.

https://threejs.org/docs/index.html#api/en/materials/Material.vertexColors

like image 98
Marquizzo Avatar answered Mar 08 '26 16:03

Marquizzo


Parameters in Material vertexColors are boolean, true or false. so if you have specified point color in float array then it can define boolean value (true or false), I will give a little example like this, and this is what I did it worked.

const myGeo = new THREE.BufferGeometry();

let vertices = new Float32Array([ 
    -1.0, -1.0, 1.0, // 0
    1.0, 1.0, 1.0, // 1
    -1.0, 1.0, 1.0, // 2
    1.0, -1.0, 1.0, // 3
    
    -1.0, -1.0, -1.0, // 4
    1.0, 1.0, -1.0, // 5
    -1.0, 1.0, -1.0, // 6
    1.0, -1.0, -1.0, // 7
]);

let colors = new Float32Array([
    1.0, 0.0, 0.0, // Vertex 0 (Red)
    1.0, 0.0, 0.0, // Vertex 1 (Red)
    1.0, 1.0, 0.0, // Vertex 2 (Yellow)
    1.0, 1.0, 0.0, // Vertex 3 (Yellow)
    0.0, 1.0, 0.0, // Vertex 4 (Green)
    0.0, 1.0, 0.0, // Vertex 5 (Green)
    0.0, 0.0, 1.0, // Vertex 6 (Blue)
    0.0, 0.0, 1.0, // Vertex 7 (Blue)
]);
myGeo.setAttribute('position', new THREE.BufferAttribute( vertices, 3 ));
myGeo.setAttribute('color', new THREE.BufferAttribute( colors, 3 ));
myGeo.setIndex([.....]);

const material= new THREE.MeshBasicMaterial({ vertexColors:true, side: THREE.DoubleSide, });

let mesh = new THREE.Mesh(myGeo, material)
scene.add(mesh);
like image 22
Arif Widagdo Avatar answered Mar 08 '26 17:03

Arif Widagdo



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!