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/three@0.151.2";

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 that you have read and understand our privacy policy and code of conduct.

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