Converting THREE.js Geometry into BufferGeometry? - three.js

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.
let rainGeo = new THREE.Geometry()
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
}

Answer 1

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/three#0.115/build/three.js"></script>