使用Three.js将网站更改为连续动画

Question

我在看一个名为Garden Eight的网站，当你从"家"变成"关于我们"时，他们有一个非常漂亮的过渡。我真的很感兴趣的是，他们是如何在没有加载屏幕或任何加载时间的情况下使其变得如此平滑和连续的。

看起来它必须是一个场景，但观看URL可以看到地址的变化，所以网站位置一定会发生某种变化。

我不一定要看这种高度复杂的过渡。如果我能沿着x轴创造出某种看似连续的相机运动，作为一个起点，那就太好了。

例如，我用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);
}

你可以在这个JSFiddle中观看动画。

我想要实现的是，第一个多维数据集在登录页上，第二个多维数据集中在另一个页面上。这可以通过某种异步加载来完成吗？或者有没有一个内置的方法，可以帮助从一个画布切换到另一个画布？

Answer 1

这是一个单页应用程序(SPA(，这意味着无论URL更新到什么，它都是一个HTML页面。一些框架，如React，有一个非常复杂的方法来实现这一点，需要整个教程来教。

为了简单起见，我建议您查看window.onhashchange事件，以便在不加载新页面的情况下执行虚假的"更改地址"。例如，从site.com/到site.com/#about将触发事件，然后您可以在同一画布上开始动画：

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
}
}

然后你可以设置哈希来更改URL并触发上面的事件：

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