Converting THREE.js Geometry into BufferGeometry?

Question

I'm relatively new to THREE.js and I got this code but I'd like to reconstruct this Geometry into BufferGeometry to get the efficiency benefits. I saw this (var bufferGeometry = new THREE.BufferGeometry().fromGeometry( geometry );) as a possible solution but I could not implement it I'm sure it's simple I just lack the experience with THREE.js to recognize this.

for (let i = 0; i < rainCount; i++) {
rainDrop = new THREE.Vector3(
    Math.random() * 120 - 60,
    Math.random() * 180 - 80,
    Math.random() * 130 - 60,
)

    rainDrop.velocity = {}
    rainDrop.velocity = 0
bufferGeometry.vertices.push(rainDrop)
}

rainMaterial = new THREE.PointsMaterial({
    color: '#ffffff',
    size: .3,
    transparent: true,
    map: THREE.ImageUtils.loadTexture(
        'images/snow_mask_2.png'),
    blending: THREE.AdditiveBlending,
})

rain = new THREE.Points(bufferGeometry, rainMaterial)
rain.rotation.x = -1.5707963267948963
rain.rotation.y = -3.22
scene.add(rain)

function rainVariation() {
    bufferGeometry.vertices.forEach(p => {
        p.velocity -= 0.1 + Math.random() * 0.1;
        p.y += p.velocity;

        if (p.y < -60) {
            p.y = 60;
            p.velocity = 0;
    }
});


    bufferGeometry.verticesNeedUpdate = true;
    rain.rotation.y += 0.008

}

Mugen87 · Accepted Answer · 2020-03-30 17:44:29Z

Try it with this ported code as a basis. I suggest that you manage the velocity per raindrop in a separate array (since these data are not necessary in the shader).

let camera, scene, renderer, rain;

const vertex = new THREE.Vector3();

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.z = 100;

    scene = new THREE.Scene();

    const geometry = new THREE.BufferGeometry();
    const vertices = [];

    for (let i = 0; i < 1000; i++) {
        vertices.push( 
		    Math.random() * 120 - 60,
		    Math.random() * 180 - 80,
		    Math.random() * 130 - 60
        );
    }
		
    geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

    const material = new THREE.PointsMaterial( { color: '#ffffff' } );

    rain = new THREE.Points( geometry, material );
    scene.add(rain);

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function rainVariation() {

    var positionAttribute = rain.geometry.getAttribute( 'position' );
	
    for ( var i = 0; i < positionAttribute.count; i ++ ) {
	
        vertex.fromBufferAttribute( positionAttribute, i );
		
        vertex.y -= 1;
		
        if (vertex.y < - 60) {
            vertex.y = 90;
        }
		
        positionAttribute.setXYZ( i, vertex.x, vertex.y, vertex.z );
	
    }

    positionAttribute.needsUpdate = true;

}

function animate() {

    requestAnimationFrame( animate );

    rainVariation();

    renderer.render( scene, camera );

}

body {
	  margin: 0;
}
canvas {
	display: block;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>

Collectives™ on Stack Overflow

Converting THREE.js Geometry into BufferGeometry?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related