返回

探索Three.js的奥妙：鼠标点击设备，让相机靠近预览

前端

在 Three.js 中使用相机飞行动画和鼠标点击事件

了解 Three.js

Three.js 是一个强大的 JavaScript 库，用于在网络浏览器中创建令人惊叹的 3D 图形。它利用 WebGL 的强大功能，让开发人员能够轻松构建具有逼真光照、阴影和物理效果的 3D 场景。

创建 Three.js 场景

要开始使用 Three.js，第一步是创建一个场景。场景是 3D 世界中的一个容器，它将容纳你想要渲染的所有物体。使用 new THREE.Scene() 创建一个场景。

添加相机

接下来，我们需要一个相机来查看场景。相机就像你的眼睛，它决定了你在 3D 世界中的视角。使用 new THREE.PerspectiveCamera() 创建一个透视相机，并指定其视野、宽高比、最近和最远剪裁平面。

添加物体

现在，我们可以开始向场景中添加物体了。物体可以是任何东西，比如几何体、材质、光源等等。使用 new THREE.BoxGeometry() 创建一个立方体几何体，并用 new THREE.MeshBasicMaterial() 指定一个材质。然后，使用 new THREE.Mesh() 将几何体和材质组合成一个网格对象，并将其添加到场景中。

渲染场景

一旦你创建了场景和添加了物体，你需要渲染它才能在屏幕上显示。使用 new THREE.WebGLRenderer() 创建一个渲染器，并指定其大小。将渲染器的 domElement 附加到 HTML 文档中，然后调用 renderer.render() 来渲染场景。

添加相机飞行动画

为了让相机在场景中移动，我们可以添加一个飞行动画。使用 new THREE.OrbitControls() 创建一个轨道控件对象，并将相机和渲染器的 domElement 传递给它。控件会自动更新相机的位置和方向，实现平滑的飞行动画。

添加鼠标点击事件

最后，我们可以添加一个鼠标点击事件，让相机在点击时靠近选定的对象。使用 document.addEventListener() 添加一个 click 事件侦听器，并使用 THREE.Raycaster() 来确定光线与场景中对象的交点。如果检测到交点，将相机的位置设置为交点的位置。

示例代码

以下是使用上面的技术创建相机飞行动画和鼠标点击事件的完整代码示例：

// 场景和相机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 立方体对象
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 相机控件
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// 鼠标点击事件
document.addEventListener('click', (event) => {
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    camera.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);
  }
});

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

常见问题解答

  1. 如何改变相机飞行动画的速度？

    • 你可以通过调整 THREE.OrbitControls 对象的 dampingFactor 属性来控制动画速度。

  2. 鼠标点击事件无法检测到对象，为什么？

    • 确保你已正确设置了 THREE.Raycaster 的 setFromCamera() 方法。此外，检查你的物体是否具有可点击的几何体和材质。

  3. 如何添加光源到场景中？

    • 使用 new THREE.AmbientLight() 或 new THREE.DirectionalLight() 创建一个光源，并将其添加到场景中。

  4. 如何导入自定义 3D 模型？

    • 使用 THREE.GLTFLoader 加载器来导入 .gltf 或 .glb 格式的 3D 模型。

  5. 如何使用 Three.js 创建纹理？

    • 使用 THREE.TextureLoader 加载器来加载图像，并使用 new THREE.MeshBasicMaterial({ map: texture }) 将其作为纹理应用到网格对象上。