0

есть сайт http://dgpacker.ru/, на котором происходит смена фотографий при движении курсора мыши,введите сюда описание изображения получается так, что чтобы такого добиться они брали по сто фотографий на каждый анимируемый объект и меняли src при нужном положении мыши, ждать пока загрузятся все 100-фото да еще и на каждый элемент слишком долго, да и при этом не до конца понятно как это все реализовать, есть ли какой-нибудь аналог? Может быть на 3-d графике? Возможно какие-то примеры с Three.js, помогите пожалуйста.

3

1 ответ 1

3

В очень упрощенном варианте это будет как-то так на Three.js:

body {
  font-family: monospace;
  overflow: hidden;
  margin: 0;
}

ul {
  position: absolute;
}

li {
  color: white;
  margin: 10px;
  font-weight: bold;
  font-size: 14pt;
}
<ul id="objList">
  <li>Обьект 1</li>
  <li>Обьект 2</li>
  <li>Обьект 3</li>
  <li>Обьект 4</li>
</ul>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/[email protected]";

var mouseX = 0;
var windowHalfX = innerWidth / 2;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 3, 5).setLength(4);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

var objs = [];
var mat = new THREE.MeshBasicMaterial({
  color: "white",
  wireframe: true
});

function createObject(idx) {
  let geom = idx === 0 ? new THREE.BoxBufferGeometry(2, 2, 2, 2, 2, 2) : idx === 1 ? new THREE.SphereBufferGeometry(1, 16, 8) : idx === 2 ? new THREE.PlaneBufferGeometry(2, 2, 2, 2) : new THREE.CylinderBufferGeometry(1, 1, 2, 16, 1);
  var mesh = new THREE.Mesh(geom, mat);
  mesh.visible = false;
  scene.add(mesh);
  objs.push(mesh);
}

for (let i = 0; i < 4; i++) {
  createObject(i);
}
objs[0].visible = true;

var lis = objList.getElementsByTagName("li");
for (let i = 0; i < lis.length; i++) {
  let li = lis[i];
  li.addEventListener("mouseover", event => {
    visibilityOff();
    objs[i].visible = true;
  });
}

document.addEventListener('mousemove', onDocumentMouseMove);

renderer.setAnimationLoop(() => {
  camera.position.x += (mouseX - camera.position.x) * 0.05;
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
});

function onDocumentMouseMove(event) {
  mouseX = -(event.clientX - windowHalfX) * 0.0025;
}

function visibilityOff() {
  objs.forEach(o => {
    o.visible = false;
  });
}
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.