Recently, I came across a fascinating website called Garden-Eight that impressed me with its seamless transition between the "Home" and "About Us" sections. The transition was so smooth and continuous, without any loading screens or delays.
Upon closer inspection, it appears as though the transition occurs within one scene, yet there is a noticeable change in the URL indicating a shift in site location.
While I may not be aiming to replicate such intricate transitions, I am intrigued by the idea of creating a seemingly continuous camera movement along the x-axis as a starting point.
As an experiment, I created a brief animation using this JavaScript code:
var camera, scene, renderer, geometry, material, mesh, geometryNew, materialNew, meshNew;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0,0,0);
scene.add(mesh);
geometryNew = new THREE.CubeGeometry(200, 200, 200);
materialNew = new THREE.MeshNormalMaterial();
meshNew = new THREE.Mesh( geometryNew, materialNew);
meshNew.position.set(800,0,0);
scene.add(meshNew);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
meshNew.rotation.x -= 0.01;
meshNew.rotation.y -= 0.02;
if(camera.position.x < 800)
camera.position.x += 3
renderer.render(scene, camera);
}You can view the animation on this JSFiddle link.
My goal is to have the first cube displayed on the landing page and the second cube on another page. Is there a way to achieve this through asynchronous loading or perhaps a built-in method for switching from one canvas to another?