Hello, I’m trying to draw multiple points with different colors but I was only able to have one color else I will get white.
var worker;
var N_SAMPLES;
var SAMPLE_DATA;
var stats;
var camera, scene, renderer, orbitControls;
var points, clock, colors;
var drawCount;
function init () {
drawCount = 0;
clock = new THREE.Clock();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10);
camera.position.set( 0, 0, 3 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById("webgl-output").appendChild(renderer.domElement);
stats = new Stats();
renderer.render(scene, camera);
document.getElementById("webgl-output").appendChild(stats.dom);
orbitControls = new THREE.OrbitControls(camera);
draw(N_SAMPLES);
render();
function render() {
stats.update();
orbitControls.update(clock.getDelta());
requestAnimationFrame(render);
if ( drawCount === 1 ) {
points.geometry.attributes.position.needsUpdate = true; // required after the first render
}
renderer.render(scene, camera)
}
}
function draw(samples) {
var geometry = new THREE.BufferGeometry();
var positions = [];
colors = [];
for ( var i = 0; i < num; i ++ ) {
// positions
var x = 0;
var y = 0;
var z = 0;
positions.push(x,y,z);
colors.push(0 ,parseInt(Math.random()*255), parseInt(Math.random()*255)); //tried (parseInt(Math.random()*255) ,parseInt(Math.random()*255), parseInt(Math.random()*255)) but got white
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();
//
var material = new THREE.PointsMaterial( { size: 0.05, vertexColors: THREE.VertexColors } );
points = new THREE.Points( geometry, material );
scene.add( points );
drawCount = 1;
}