es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Colorea cada punto en un color diferente en Threejs.

28 Jul, 2023 Programación

Tengo puntos y color (r, g, b). Necesito usar un color para cada punto.
Hice esto:

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array(data.points);
const colors = new Float32Array(data.colors)
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const material = new THREE.PointsMaterial({color: colors});
const pointCloud = new THREE.Points(geometry, material)
this.scene.clear();
this.scene.add(pointCloud);
this.renderer.render(this.scene, this.camera);

De esta manera, obtengo puntos blancos. Si uso:

const material = new THREE.PointsMaterial({ vertexColors: true });

Obtengo este error:

[.WebGL-0x2e2bb1a84c00] GL ERROR: GL_INVALID_OPERATION: glDrawArrays: intento de acceder a vértices fuera de rango en el atributo 1
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para usar un color para cada punto, puedes establecer la propiedad vertexColors en THREE.VertexColors en el material de PointsMaterial. Esto le indica a three.js que utilice los valores de color suministrados en el búfer geometry.getAttribute('color'). Luego, debes actualizar el material para que sepa esperar esos colores:

    const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array(data.points);
const colors = new Float32Array(data.colors)
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const material = new THREE.PointsMaterial({ vertexColors: THREE.VertexColors });
const pointCloud = new THREE.Points(geometry, material);
this.scene.clear();
this.scene.add(pointCloud);
this.renderer.render(this.scene, this.camera);

    Esto debería representar cada punto en su color correspondiente.

Comments are closed.