What may be causing the lag in the translation within ThreeJS?

Question

What may be causing the lag in the translation within ThreeJS?

Just started diving into ThreeJS and discovering its capabilities.

Playing around with a simple example of creating a white dot and applying a basic translation.

let dotGeometry = new THREE.Geometry();
let dotMaterial = new THREE.PointsMaterial({
  size: 10,
  color: 0xffffff,
});
dotGeometry.vertices.push(new THREE.Vector3(1, 0, -1));
let dot = new THREE.Points(dotGeometry, dotMaterial);
scene.add(dot);

function animate() {
  requestAnimationFrame(animate);
  dot.position.x += 0.01;
  renderer.render(scene, camera);
}

animate();

Noticed that the movement is a bit choppy even with just one point displayed on the screen.

Any suggestions on how to achieve smoother transformations or if I'm missing something?

Thanks in advance for your help. Andrea

javascript three.js

Answer 1

Answer №1

It is important to always consider the time delta of a single animation step when transforming objects. This approach gives more meaning to values like 0.1, representing 0.1 world units per second. Such implementation not only enhances the smoothness of animations but also makes them independent of the framerate. You can experiment with this modified code:

const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 5;

const scene = new THREE.Scene();

const clock = new THREE.Clock();

const dotGeometry = new THREE.Geometry();
const dotMaterial = new THREE.PointsMaterial({
  size: 10,
  color: 0xffffff,
});
dotGeometry.vertices.push(new THREE.Vector3(1, 0, -1));
const dot = new THREE.Points(dotGeometry, dotMaterial);
scene.add(dot);

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

function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  dot.position.x += 0.1 * delta;
  renderer.render(scene, camera);
}

animate();

body {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32465a40575772021c030001">[email protected]</a>/build/three.js"></script>

Answer 2

It is important to always consider the time delta of a single animation step when transforming objects. This approach gives more meaning to values like 0.1, representing 0.1 world units per second. Such implementation not only enhances the smoothness of animations but also makes them independent of the framerate. You can experiment with this modified code:

const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 5;

const scene = new THREE.Scene();

const clock = new THREE.Clock();

const dotGeometry = new THREE.Geometry();
const dotMaterial = new THREE.PointsMaterial({
  size: 10,
  color: 0xffffff,
});
dotGeometry.vertices.push(new THREE.Vector3(1, 0, -1));
const dot = new THREE.Points(dotGeometry, dotMaterial);
scene.add(dot);

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

function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  dot.position.x += 0.1 * delta;
  renderer.render(scene, camera);
}

animate();

body {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32465a40575772021c030001">[email protected]</a>/build/three.js"></script>

What may be causing the lag in the translation within ThreeJS?

Answer №1

Similar questions

Changing a variable's value from within a Highmaps chart in Vue.js

Error encountered with the OffsetWidth in the Jq.carousel program

How to implement a cyclic item generation feature in React.js

Vue.js - The error message "$slots have 'el' is null" indicates a problem with the element in

Surprising color values are produced by three.js when utilizing points with custom shading and blending techniques

Shutting down the jQuery pop-up

Resizing without altering the placement of a THREE.Line object

The TextArea element is experiencing issues with the Jquery function

Shadowing jQuery variables involves declaring a new variable with the

Using the transform property with the scale function causes elements positioned in the bottom right corner to vanish

Iframes are not compatible with JQuery UI dialogs

Share firebase reference as a prop in Vue

What is the best method for transferring a string from JavaScript to a JSON file?

Extremely sluggish change identification in combination Angular application

How can I prevent list items in jQuery Mobile from being truncated with ellipses?

TypeScript: creating an interface property that relies on the value of another

VueJS Error: Unable to access the 'className' property of an undefined variable

Issue with the reload animation jumping too quickly in Framer Motion on NextJS

Dynamic HTML element

Transform an array into an object with assigned key names