主页 / 问题 / 1124710
Accepted
Houck z
Asked:2020-05-13 15:40:34 +0000 UTC2020-05-13 15:40:34 +0000 UTC

本站类似动画

  • 772

有一个网站http://dgpacker.ru/，当鼠标光标移动时照片会发生变化，在此处输入图像描述事实证明，为了实现这一点，他们为每个动画对象拍摄了一百张照片，并在所需的鼠标位置更改了 src，等到所有 100 张都加载完毕 - 照片，甚至每个元素，都太长了，同时还不完全清楚如何实现这一切，有没有类似的？也许在 3-d 图表上？也许是 Three.js 的一些例子，请帮忙。

javascript

1 个回答

  1. Best Answer

    在一个非常简化的版本中，它在 Three.js 中是这样的：

    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;
  });
}
    body {
  font-family: monospace;
  overflow: hidden;
  margin: 0;
}

ul {
  position: absolute;
}

li {
  color: white;
  margin: 10px;
  font-weight: bold;
  font-size: 14pt;
}
    <script src="https://threejs.org/build/three.min.js"></script>
<ul id="objList">
  <li>Обьект 1</li>
  <li>Обьект 2</li>
  <li>Обьект 3</li>
  <li>Обьект 4</li>
</ul>

    • 2

相关问题