Adjusting the vertices of a threejs geometry over time

Question

Adjusting the vertices of a threejs geometry over time

I am currently working on updating the vertices of a SphereGeometry based on the current value of performance.now(), incorporating perlin noise into the equation.

The expected result is shown in this image: https://i.sstatic.net/zwAAm.gif

To see my code in action, check out this working example: http://jsfiddle.net/8L4bktyw/1/

However, I am encountering an issue where the vertices are not updating visually, even though the colors on the MeshNormalMaterial appear to change as if they have been updated.

An interesting observation is that upon refreshing or running the fiddle multiple times, the vertices eventually do update as intended.

I am wondering if I may be incorrectly updating the geometry. Any insights would be greatly appreciated!

javascript three.js

Answer 1

Answer №1

The vertices aren't updating for an unknown reason

Initially, you instructed the normal vectors to be updated:

sphere.geometry.normalsNeedUpdate = true;

However, you forgot to update the vertex coordinates as well:

sphere.geometry.verticesNeedUpdate = true;

Refer to THREE.Geometry.

Check out the example below, which demonstrates how the advice from the answer is implemented in the original code of your question:

var renderer = new THREE.WebGLRenderer({ canvas : document.getElementById('myCanvas'), antialias:true});
renderer.setClearColor(0x7b7b7b);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

var sphere_geometry = new THREE.SphereGeometry(1, 128, 128);
var material = new THREE.MeshNormalMaterial();

var sphere = new THREE.Mesh(sphere_geometry, material);
scene.add(sphere);
window.onresize = resize;

var update = function() {

  var time = performance.now() * 0.003;
  
  //go through vertices here and reposition them 
  var k = 3;
  for (var i = 0; i < sphere.geometry.vertices.length; i++) {
      var p = sphere.geometry.vertices[i];
      p.normalize().multiplyScalar(1 + 0.3 * noise.perlin3(p.x * k + time, p.y * k, p.z * k));
  }
  sphere.geometry.computeVertexNormals();
  sphere.geometry.normalsNeedUpdate = true;
  sphere.geometry.verticesNeedUpdate = true;
}

function resize() {
    
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
    //controls.handleResize();
  }

function animate() {
  //sphere.rotation.x += 0.01;
  //sphere.rotation.y += 0.01;

  update();
  /* render scene and camera */
  renderer.render(scene,camera);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

(function(global){
  var module = global.noise = {};

  function Grad(x, y, z) {
    this.x = x; this.y = y; this.z = z;
  }
  
  Grad.prototype.dot2 = function(x, y) {
    return this.x*x + this.y*y;
  };

  Grad.prototype.dot3 = function(x, y, z) {
    return this.x*x + this.y*y + this.z*z;
  };

... (remaining content omitted for brevity)

<script src="https://threejs.org/build/three.min.js"></script>
<canvas id="myCanvas"></canvas>

Answer 2

The vertices aren't updating for an unknown reason

Initially, you instructed the normal vectors to be updated:

sphere.geometry.normalsNeedUpdate = true;

However, you forgot to update the vertex coordinates as well:

sphere.geometry.verticesNeedUpdate = true;

Refer to THREE.Geometry.

Check out the example below, which demonstrates how the advice from the answer is implemented in the original code of your question:

var renderer = new THREE.WebGLRenderer({ canvas : document.getElementById('myCanvas'), antialias:true});
renderer.setClearColor(0x7b7b7b);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

var sphere_geometry = new THREE.SphereGeometry(1, 128, 128);
var material = new THREE.MeshNormalMaterial();

var sphere = new THREE.Mesh(sphere_geometry, material);
scene.add(sphere);
window.onresize = resize;

var update = function() {

  var time = performance.now() * 0.003;
  
  //go through vertices here and reposition them 
  var k = 3;
  for (var i = 0; i < sphere.geometry.vertices.length; i++) {
      var p = sphere.geometry.vertices[i];
      p.normalize().multiplyScalar(1 + 0.3 * noise.perlin3(p.x * k + time, p.y * k, p.z * k));
  }
  sphere.geometry.computeVertexNormals();
  sphere.geometry.normalsNeedUpdate = true;
  sphere.geometry.verticesNeedUpdate = true;
}

function resize() {
    
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
    //controls.handleResize();
  }

function animate() {
  //sphere.rotation.x += 0.01;
  //sphere.rotation.y += 0.01;

  update();
  /* render scene and camera */
  renderer.render(scene,camera);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

(function(global){
  var module = global.noise = {};

  function Grad(x, y, z) {
    this.x = x; this.y = y; this.z = z;
  }
  
  Grad.prototype.dot2 = function(x, y) {
    return this.x*x + this.y*y;
  };

  Grad.prototype.dot3 = function(x, y, z) {
    return this.x*x + this.y*y + this.z*z;
  };

... (remaining content omitted for brevity)

<script src="https://threejs.org/build/three.min.js"></script>
<canvas id="myCanvas"></canvas>

Adjusting the vertices of a threejs geometry over time

Answer №1

Similar questions

Basic use of AJAX for sending the value from jQuery's datepicker

Guide to verifying a value within a JSON object in Ionic 2

What steps are needed to integrate the FreshworksWidget in a next.js project?

What is the best way to remove a nested JSON key in a dynamic manner

Unable to access variables beyond the function scope results in an undefined value

What is the reasoning behind AngularJS 2 HTTP Post only allowing string data as input?

Using Javascript to dynamically add and remove elements on click

What is the reason behind the HTML button producing the 'ul' node just once even after being clicked multiple times?

Learn how to run javascript code using Nodejs child_process and Meteor

"Enhance your website with a backspace button using jquery - here's

Issues with pagination and navigation in Joomla when using the Swiper JS carousel with Bootstrap 5

The submission of the form is prevented upon updating the inner HTML

What is the best way to conceal a class that possesses a particular value?

What steps need to be taken to set up Node.js to accommodate requests from external sources beyond just localhost?

I have written code in JavaScript, but now I am interested in converting it to jQuery

Styling JSON data in a jQuery Mobile list display

Is there a method in AngularJS to have $http.post send request parameters rather than JSON?

Switching Out Bootstrap Dropdown with Dropup (Varying functionality on two almost identical implementations)

What sets server-side development apart from API creation?

The React-native application initialized using npx create-react-app encountered an error and could not launch