Animation on window load - animation

Question

I'm using three.js gltf loader to load an object and perform some actions on it, everything is going smoothly, the orbit controls and my event listeners are working. I want to add another feature so that when the window loads it shows the object from a birds eye view (like the viewer is located above the object) and that the camera progresses towards a normal frontal view and then stops(like the viewer is face to face with the object).
I've tried searching through the existing examples online, but can't fully understand if I need to use two cameras or an animation clip that changes the camera y axis slowly. Making the animation in Blender or something similar is not an option at the moment. I would be grateful for any help, or pointing me to an answer at the moment.
This is my code:
//scene
const scene = new THREE.Scene();
//Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 25;
camera.position.y = 6;
const myCanvas = document.getElementById('myCanvas');
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
const light2 = new THREE.PointLight(0xffffff, 0.5);
scene.add(light2);
//renderer
const renderer = new THREE.WebGLRenderer({
canvas: myCanvas,
antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xcfd4d8);
renderer.setPixelRatio(window.deviceSPixelRatio);
document.body.appendChild(renderer.domElement);
//controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 1;
controls.maxDistance = 1000;
//hgroup
const hgroup = new THREE.Object3D();
const loader = new THREE.GLTFLoader();
loader.load(
'content/hajdukzagltf_bronca.glb',
function (gltf) {
gltf.scene.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
root = gltf.scene;
hajduk = scene.add(root);
hajduk.position.set(0, 0, 0);
const h1 = root.getObjectByName('01');
const h2 = root.getObjectByName('02');
const h3 = root.getObjectByName('03');
const a1 = root.getObjectByName('04');
const a2 = root.getObjectByName('05');
const a3 = root.getObjectByName('06');
const j1 = root.getObjectByName('07');
const j2 = root.getObjectByName('08');
const d1 = root.getObjectByName('09');
const d2 = root.getObjectByName('10');
const d3 = root.getObjectByName('11');
const u1 = root.getObjectByName('12');
const u2 = root.getObjectByName('13');
const u3 = root.getObjectByName('14');
const k1 = root.getObjectByName('15');
const k2 = root.getObjectByName('16');
const k3 = root.getObjectByName('17');
hgroup.add(h1);
hgroup.add(h2);
hgroup.add(h3);
hgroup.add(a1);
hgroup.add(a2);
hgroup.add(a3);
hgroup.add(j1);
hgroup.add(j2);
hgroup.add(d1);
hgroup.add(d2);
hgroup.add(d3);
hgroup.add(u1);
hgroup.add(u2);
hgroup.add(u3);
hgroup.add(k1);
hgroup.add(k2);
hgroup.add(k3);
scene.add(hgroup);
console.log(dumpObject(hajduk).join('\n'));
console.log(hgroup.children);
}
);
//Raycaster
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let INTERSECTED;
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
function onDocumentMouseMove(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
//console.log(mouse);
}
document.addEventListener('mousemove', onDocumentMouseMove, false);
function onMouseClick() {
if (INTERSECTED !== null) {
if (INTERSECTED.name == '01') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '02') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '03') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '04') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '05') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '06') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '07') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '08') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '09') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '10') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '11') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '12') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '13') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '14') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '15') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '16') {
alert(INTERSECTED.name);
}else if (INTERSECTED.name == '17') {
alert(INTERSECTED.name);
}
}
}
document.addEventListener('click', onMouseClick, false);
const animate = () => {
requestAnimationFrame(animate);
controls.update();
render();
};
function render() {
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(hgroup.children, true);
if (intersects.length > 0) {
if (INTERSECTED != intersects[0].object) {
if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
INTERSECTED = intersects[0].object;
INTERSECTED.currentHex = INTERSECTED.material.color.setHex();
INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
} else {
if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
INTERSECTED = null;
}
//console.log(INTERSECTED);
}
renderer.render(scene, camera);
}
render();
animate();
//object dump function
function dumpVec3(v3, precision = 3) {
return `${v3.x.toFixed(precision)}, ${v3.y.toFixed(precision)}, ${v3.z.toFixed(precision)}`;
}
function dumpObject(obj, lines = [], isLast = true, prefix = '') {
const localPrefix = isLast ? '└─' : '├─';
lines.push(`${prefix}${prefix ? localPrefix : ''}${obj.name || '*no-name*'} [${obj.type}]`);
const dataPrefix = obj.children.length
? (isLast ? ' │ ' : '│ │ ')
: (isLast ? ' ' : '│ ');
lines.push(`${prefix}${dataPrefix} pos: ${dumpVec3(obj.position)}`);
lines.push(`${prefix}${dataPrefix} rot: ${dumpVec3(obj.rotation)}`);
lines.push(`${prefix}${dataPrefix} scl: ${dumpVec3(obj.scale)}`);
const newPrefix = prefix + (isLast ? ' ' : '│ ');
const lastNdx = obj.children.length - 1;
obj.children.forEach((child, ndx) => {
const isLast = ndx === lastNdx;
dumpObject(child, lines, isLast, newPrefix);
});
return lines;
}

Answer 1

I've managed to do it easily using the tween.js library, I've changed the camera.position.y = 55
and added this bit of code as well :
var tween = new TWEEN.Tween(camera.position);
tween.to({ y: 6 }, 6000);
tween.start();
I have also added
TWEEN.update();
to my main animation function
Big thanks to the community anyway.