есть сайт http://dgpacker.ru/, на котором происходит смена фотографий при движении курсора мыши, получается так, что чтобы такого добиться они брали по сто фотографий на каждый анимируемый объект и меняли src при нужном положении мыши, ждать пока загрузятся все 100-фото да еще и на каждый элемент слишком долго, да и при этом не до конца понятно как это все реализовать, есть ли какой-нибудь аналог? Может быть на 3-d графике? Возможно какие-то примеры с Three.js, помогите пожалуйста.
-
1Возможный дубликат вопроса: Подскажите как сделать, такую 3d анимацию для при движении мыши– Monkey Mutant13 мая 2020 в 8:10
-
ajax-zoom.com/examples/example32.php– Monkey Mutant13 мая 2020 в 8:12
-
Three.js имеет кучу загрузчиков для множества форматов (хотя рекомендуемый - glTF). Сдается мне, что загрузить 4 модели будет всяко быстрее, чем грузить 400 изображений.– prisoner84913 мая 2020 в 11:39
Добавить комментарий
|
1 ответ
В очень упрощенном варианте это будет как-то так на 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>