javascript - 使用 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中观看动画.

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

Answer 1

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

为了简单起见，我建议您查看 window.onhashchange事件在不加载新页面的情况下进行虚假“更改地址”。例如，从 site.com/ 到 site.com/#about 将触发该事件，然后您可以在同一 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
  }
}

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

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

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