Three JS move animation
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom4/3.0.0/dom4.js"></script>
<div id="scene">
</div>
JavaScript
const animationsObjects = [];
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
const container = document.getElementById('scene');
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
const camera = new THREE.PerspectiveCamera(70, 1, 200, 2000);
camera.position.set(0, 400, 700);
scene.add(camera);
scene.add(new THREE.AmbientLight(0xf0f0f0));
let light = new THREE.SpotLight(0xffffff, 1.5);
light.position.set(0, 1500, 200);
light.castShadow = true;
scene.add(light);
let planeGeometry = new THREE.PlaneBufferGeometry(2000, 2000);
planeGeometry.rotateX(-Math.PI / 2);
const planeMaterial = new THREE.ShadowMaterial({ opacity: 0.2 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.y = 0;
plane.receiveShadow = true;
scene.add(plane);
const helper = new THREE.GridHelper(2000, 100);
helper.position.y = 0;
helper.material.opacity = 0.25;
helper.material.transparent = true;
scene.add(helper);
const geometry = new THREE.SphereGeometry(50, 30, 30);
const material = new THREE.MeshPhongMaterial({
color: 0xcad16a
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.copy(new THREE.Vector3(0, 20, 0));
scene.add(mesh);
animate();
createMoveAnimation({
mesh,
startPosition1: new THREE.Vector3(0, window.innerHeight, 0),
endPosition1: new THREE.Vector3(0, 0, 0) ,
startPosition2: new THREE.Vector3(0, 0, 0),
endPosition2: new THREE.Vector3(400, 0, 0)
})
function animate() {
requestAnimationFrame(animate);
threeRender();
}
function createMoveAnimation({
mesh,
startPosition1,
endPosition1,
startPosition2,
endPosition2
}) {
mesh.userData.mixer = [];
let uuid = mesh.uuid
let track1 = new THREE.VectorKeyframeTrack(
uuid+'.position', [0, 2], [
startPosition1.x,
...