Смена сайтов как непрерывной анимации с помощью Three. js - PullRequest
Новая
       5

Смена сайтов как непрерывной анимации с помощью Three. js

0 голосов
/ 15 апреля 2020

Я просматривал этот веб-сайт под названием 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 .

Чего я хочу добиться, так это того, что первый куб находится на площадке страница и второй куб находится на другой странице. Это можно сделать с помощью какой-то асинхронной загрузки или есть встроенный метод, который помогает переключаться с одного холста на другой?

1 Ответ

1 голос
/ 15 апреля 2020

Это одностраничное приложение (SPA), что означает, что это одна HTML страница, независимо от того, к чему обновляется URL. Некоторые фреймворки, такие как 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
  }
}

Затем вы можете установить га sh, чтобы изменить URL и вызвать событие выше: 

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

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