Currently, I am tackling a project that involves using Three.js and CreateJS. However, I have encountered an issue with the animations when trying to move the same object multiple times. The initial animation fails to reach the target position, causing subsequent animations not to initiate.
Below is the JavaScript code from one of my attempts:
import * as THREE from './libs/three.module.js'
let box, canvas, renderer, scene, camera;
function init(){
setUpCamera();
setUpScene();
animate();
}
window.addEventListener('load', init);
function setUpCamera() {
canvas = document.querySelector('.webgl')
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.set(0, 10, 15)
camera.rotation.x = (-40)* Math.PI / 180
renderer = new THREE.WebGLRenderer({
canvas: canvas
})
}
function setUpScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xbfe3dd);
scene.add(camera);
loadBox();
}
function loadBox(){
let boxGeometry = new THREE.BoxGeometry(5, 5, 5);
let boxMaterial = new THREE.MeshStandardMaterial( { color: 0x96f2af} );
box = new THREE.Mesh( boxGeometry, boxMaterial);
scene.add(box);
}
//Here is the problematic animation
//--------------------------------------------------
function animateBox(){
console.log("box x position = " + box.position.x);
createjs.Tween.get(box.position)
.to({ x: 10 }, 300, createjs.Ease.linear)
.to({ x: -10 }, 300, createjs.Ease.linear);
}
//--------------------------------------------------
function animate(){
animateBox();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
The following screenshot illustrates the console output indicating that the target position is never reached: https://i.sstatic.net/PnbHg.jpg