Updating Three.Geo to Three.BufferGeo

Questions
1

Hi Guys,

“If you used the THREE.Geometry in any of your custom code, and you want to use THREE r125 or later, then you will need to update to use THREE.BufferGeometry .”

two questions ,

so could i add an import like

import {Geometry} from “…depriciated/Geometry.js” to use with the existing code

and

how would i modify this code below to use with THREE.BUFFERGEOMETRY,

Geo = new THREE.Geometry();
for(let i=0;i<10;i++) {
let point = new THREE.Vector3(
Math.random() * 10 - 20,
Math.random() * 10 - 20,
Math.random() * 10 - 20
);
Geo.vertices.push(point);
}

let img = new THREE.TextureLoader().load( ‘image’ );
let pointMaterial = new THREE.PointsMaterial({
map: img,transparent:true
});
points = new THREE.Points(Geo, pointMaterial);

render(){

Geo.vertices.forEach(p => {

p.y -= .001;

});
Geo.verticesNeedUpdate = true;
}

Thanks

2

I wrote a small page on it with examples that you can refer to

Updating THREE.Geometry to THREE.BufferGeometry - Three.js Tutorials (sbcode.net)

3

Hi Sean,

thanks will have a look at this,

fixed the first part like this , now need to get to the updating bit

let pointsM = [];

let img = new THREE.TextureLoader().load( ‘image’ );
let pointMaterial = new THREE.PointsMaterial({
map: img,transparent:true
});
let bufferGeometry = new THREE.BufferGeometry()
for (let i = 0; i < 10; i++) {
pointsM.push( new THREE.Vector3(Math.random() * 10 - 20, Math.random() * 10 - 20, Math.random() * 10 - 20));
}
bufferGeometry.setFromPoints(pointsM);
bufferGeometry.computeVertexNormals();

pointsmesh = new THREE.Points(bufferGeometry, pointMaterial);
scene.add(pointsmesh)

Thanks

4

Hi Sean,

it was you post i got the info from ,
https://sbcode.net/threejs/geometry-to-buffergeometry/

cheers for that

5

Hey Sean,

so how do i update the point position in the buffer geometry, in the render section ?

render(){

Geo.vertices.forEach(p => {

p.y -= .001;

});
Geo.verticesNeedUpdate = true;
}

cheers

6

its not p.y anymore. Its p[index]
and its not Geo.vertices anymore, its Geo.attributes.position.array
there is no longer vertices of x,y,z but an array where the first vertices x,y,z are instead at indexes 0,1 and 2, and so on in multiples of 3

In my link, I show 3 examples of before and after so that you can see the equivalent.

7

great Thanks for the explanation Sean,
and how does the setting point velocity and acceleration and updating them work using bufferGeometry,

it was like for each point created you set initial vel and acceleration,
and updated them in the loop earlier …like so,
(
for(let i=0;i<10;i++) {
let point = new THREE.Vector3(Math.random() * 10 - 20,Math.random() * 10 - 20,Math.random() * 10 -20
);
point.velocity = 0;
point.acceleration = 0.001;
}
render()
{
for_geovertex loop{
p.velocity = update;
p.acceleration = update;
p.z = p.velocity;
}
}

any example,explanation available for this

cheers

8

see fiddle
Edit fiddle - JSFiddle - Code Playground
The slider changes only one of the values in the geometries attributes.position.array
This value is at position 3, see the code in the gui section at line 49.
This relates to the x coordinate of the second THREE.Vector3 that I added when I created the tetrahedron.
You need to figure which values in your geometries attributes.postion.array are the correct ones that relate to the x,y,z that you want to change.

9

Thanks Sean/Klaus/Michael,

and thanks Sean for the fiddle ,

i think the code i added was not readable, my question as below ,
this should not be so diffucult to update from Geometry to BufferGeometry, the code i posted initially works well with Gemoetry,

let pointsM = [];

  let img = new THREE.TextureLoader().load( 'image' );
  let pointMaterial = new THREE.PointsMaterial({
  map: img,transparent:true
  });
  let bufferGeometry = new THREE.BufferGeometry()
  for (let i = 0; i < 10; i++) {
    pointsM.push( new THREE.Vector3(Math.random() * 20 - 10, Math.random() * 20 - 10, Math.random() * 20 - 10));
  }
  bufferGeometry.setFromPoints(pointsM);
  bufferGeometry.computeVertexNormals();

  pointsmesh = new THREE.Points(bufferGeometry, pointMaterial);
  scene.add(pointsmesh)

The above section works fine ,
converted from Geometry to BufferGeometry

What id like to do is add velocity and acceleration to the points created in the above section, and update them in the render loop

i would like to change the code below to work with buffer geometry currently it works with Geometry

  render(){

  Geo.vertices.forEach(p => {
   p.vel += p.accel; 
   p.z -= p.vel;

  });
  Geo.verticesNeedUpdate = true;
}

Thanks for the support