javascript - 为什么 ThreeJS 中的翻译滞后？

Question

我是 ThreeJS 的新手，仍在探索该库。
我有一个绘制白点的非常基本的示例，使用简单的平移力。

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();

我想知道为什么即使在屏幕上渲染了一个点，翻译也很滞后。
有没有更好的方法来实现更平滑的转换，我做错了什么吗？
提前谢谢了。
安德烈亚

Answer 1

实际上，在转换对象时，您应该始终遵守单个动画步骤的时间增量。这样，像 0.1 这样的值获得更好的语义。它是 0.1世界单位每秒。它还使动画更加流畅且独立于帧率。试试这个代码:

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/three@0.123/build/three.js"></script>