I have created a function called moveToPoint in order to set the global position of an object. This function takes in a world point x y z, converts it to the local coordinate system, and then updates the object.position to go to that new local coordinate.
However, when I use this function in the animation loop, I notice a strange jittering artifact occurring. I am puzzled by this issue as the code seems simple and straightforward.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const sphereGeometry = new THREE.SphereGeometry(0.1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(0, 0, 0);
scene.add(sphere)
camera.position.z = 5;
function moveToPosition(object, x, y, z) {
const pos = new THREE.Vector3(x, y, z);
object.worldToLocal(pos);
object.position.copy(pos);
}
function animate() {
requestAnimationFrame(animate);
moveToPosition(sphere, 0, 1, 0);
renderer.render(scene, camera);
};
animate();<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>Any help or guidance on this matter would be greatly appreciated.