Implementing changes to velocity and acceleration within BufferGeometry using Three.js

Question

Implementing changes to velocity and acceleration within BufferGeometry using Three.js

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 section above is functioning correctly, it has been converted from Geometry to BufferGeometry

My goal is to introduce velocity and acceleration to the previously created points, then adjust them within the render loop

I would like to modify the following code to function with buffer geometry as it currently operates with Geometry

  render(){

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

  });
  Geo.verticesNeedUpdate = true;
}

Thank you for your assistance

javascript three.js

Answer 1

Answer №1

Below is a code snippet that demonstrates how to work with vertex velocity and acceleration stored in separate arrays.

// Create BufferGeometry

const bufferGeometry = new THREE.BufferGeometry();
const vertices = [];
const velocities = [];
const accelerations = [];

for (let i = 0; i < 10; i++) {
    // Generate random vertex coordinates
    vertices.push(Math.random() * 20 - 10); // x
    vertices.push(Math.random() * 20 - 10); // y
    vertices.push(Math.random() * 20 - 10); // z
    
    velocities.push(0); // Initialize velocity
    accelerations.push(Math.random()); // Random acceleration
}

bufferGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

// Update positions based on velocity and acceleration

const positionAttribute = geometry.getAttribute('position');

for (let i = 0; i < positionAttribute.count; i++) {
    const z = positionAttribute.getZ(i);
    
    const vel = velocities[i];
    const accel = accelerations[i];
    vel *= accel;
    velocities[i] = vel;
    z -= vel;
    
    positionAttribute.setZ(i, z);
}

positionAttribute.needsUpdate = true;

render();

Note: In this specific case, computeVertexNormals() is not required as points and lines do not need vertex normals.

Answer 2

Below is a code snippet that demonstrates how to work with vertex velocity and acceleration stored in separate arrays.

// Create BufferGeometry

const bufferGeometry = new THREE.BufferGeometry();
const vertices = [];
const velocities = [];
const accelerations = [];

for (let i = 0; i < 10; i++) {
    // Generate random vertex coordinates
    vertices.push(Math.random() * 20 - 10); // x
    vertices.push(Math.random() * 20 - 10); // y
    vertices.push(Math.random() * 20 - 10); // z
    
    velocities.push(0); // Initialize velocity
    accelerations.push(Math.random()); // Random acceleration
}

bufferGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

// Update positions based on velocity and acceleration

const positionAttribute = geometry.getAttribute('position');

for (let i = 0; i < positionAttribute.count; i++) {
    const z = positionAttribute.getZ(i);
    
    const vel = velocities[i];
    const accel = accelerations[i];
    vel *= accel;
    velocities[i] = vel;
    z -= vel;
    
    positionAttribute.setZ(i, z);
}

positionAttribute.needsUpdate = true;

render();

Note: In this specific case, computeVertexNormals() is not required as points and lines do not need vertex normals.

Implementing changes to velocity and acceleration within BufferGeometry using Three.js

Answer №1

Similar questions

Accessing variables from an external script in jsdom

Troubleshooting Problem with Parsing Float in Angular

Is there a way to trigger a jQuery function using the onRowSelect event in ajax?

Locating the right selector for adding a div to its parent element in jQuery

Separate every variable with a comma, excluding the final one, using jQuery

Vue Functional Calendar - Easily manipulate selectedDates with the power of v-model

Ways to fix a "define is not defined" issue when utilizing jasmine karma with compiled typescript for component testing

Guide to locating the recursive function in Node.js runtime

Choosing Text with JavaScript

Using Angular 7 to trigger a file download from the server with proper Authorization

What is the best way to navigate to the top of a form panel?

Slower CSS rendering as Javascript finishes its tasks

Mocking the fetch() function in Jest to retrieve the response's blob data

Loading items into multiple containers using PHP AJAX pagination

Searching for multiple array elements based on their values can be achieved by using various techniques

What are the distinctions between utilizing util.inherits() and prototypes for inheritance in node.js?

What are the benefits of using Lifery Ajax URLs?

I'm curious how my useContext component is able to retrieve the value from App.js

What is the best way to tile textures in Three.js without causing distortion?

Challenges Encountered with jQuery/AJAX Form Processing