将站点更改为连续 animation 和 Three.js

Question

I was looking at this website called Garden-Eight and they have this very beautiful transition when you change from "Home" to "About Us". I am really interested in how they made it so smooth and continuous without loading screens or any loading time at all.

It looks like it has to be one scene, but watching the URL one can watch a change in the address so there must be some kind of change in the site location.

I am not necessarily looking at this kind of highly complex transitions. It would be great if I could create some kind of seemingly continuous camera movement along the x axis that changes as a starting point.

For example, I made this very short animation with this JavaScript:

 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 watch the animation in this JSFiddle .

What I want to achieve is that the first cube is on the landing page and the second cube is on another page. Can this be done by some kind of asynchronous loading or is there a built-in method, that helps to switch from one canvas to the other?

Answer 1

This is a single-page-app, (SPA), which means it's all one HTML page, regardless what the URL updates to. Some frameworks, like React, have a very complex methodology to implement this, and it would take an entire tutorial to teach.

For simplicity's sake, I recommend you look into the window.onhashchange event to do a fake "change address" without loading a new page. For instance, going from site.com/ to site.com/#about would trigger the event, and then you can start your animation on the same canvas:

window.onhashchange = function() {
  if (location.hash === '#about') {
    // animate camera to about section
  } else if (location.hash === '#work') {
    // animate camera to work section
  } else if (location.hash === '') {
    // animate camera to home section
  }
}

Then you can set the hash to change the URL and trigger the event above:

// Adds #about hash to URL, and triggers event listener
location.hash = "#about";

// Removes any hash, and triggers event listener
location.hash = "";