点亮你的代码——Three.js学习之旅：相机适配与dat.gui库

前端

2023-06-05 04:55:31

Three.js：打造逼真的 3D 场景

在当今数字化时代，创建令人惊叹的 3D 体验已成为关键。Three.js 是一个强大的 JavaScript 库，为开发者提供了实现这一目标所需的工具。

Three.js 简介

Three.js 是一个开源的 3D 图形库，因其易用性和跨浏览器兼容性而备受推崇。它广泛应用于游戏、动画、可视化和虚拟现实等领域。借助 Three.js，您可以轻松构建逼真的 3D 场景，提升用户交互体验。

相机适配

在 Three.js 中，您可以使用不同的相机类型来观察场景。最常用的选项是透视相机和正交相机。

透视相机： 模拟人眼的视角，提供逼真的 3D 效果。
正交相机： 提供平行投影，适用于平面图或工程应用。

创建透视相机：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

75：视场角
window.innerWidth / window.innerHeight：宽高比
0.1：近平面
1000：远平面

dat.gui 库简介

dat.gui 是一个轻量级的图形用户界面库，可让您轻松创建交互式控制面板。通过 dat.gui，您可以动态调整场景参数，实时观察变化。

在 Three.js 中，您可以创建 dat.gui 控制面板：

const gui = new dat.GUI();

使用 dat.gui 改变模型位置

dat.gui 允许您轻松更改场景中的模型位置。使用以下代码创建滑动条，关联模型在 x 轴上的位置：

const positionController = gui.add(cube.position, 'x', -10, 10);

cube.position.x：模型在 x 轴上的位置
-10、10：滑动条的最小值和最大值

代码示例

下面是一个使用 Three.js 和 dat.gui 库构建交互式 3D 场景的简单示例：

<!DOCTYPE html>
<html>
<head>
  
  <script src="three.js"></script>
  <script src="dat.gui.js"></script>
</head>
<body>
  <script>
    // 场景设置
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 立方体对象
    const geometry = new THREE.BoxGeometry();
    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);

    // dat.gui 控制面板
    const gui = new dat.GUI();
    const positionController = gui.add(cube.position, 'x', -10, 10);

    // 渲染循环
    function animate() {
      requestAnimationFrame(animate);

      // 更新 dat.gui 控制面板
      positionController.updateDisplay();

      // 渲染场景
      renderer.render(scene, camera);
    }

    animate();
  </script>
</body>
</html>

结语

Three.js 和 dat.gui 库为创建交互式和逼真的 3D 场景提供了强大而易用的工具。利用这些库，您可以将您的网页和应用程序提升到新的交互水平。

常见问题解答

如何调整相机位置？
您可以通过修改相机对象的 position 属性来调整相机位置。
如何添加多个对象到场景中？
使用 scene.add() 方法将对象添加到场景中。
如何在 Three.js 中创建纹理？
您可以使用 THREE.TextureLoader() 类从图像文件创建纹理。
dat.gui 中的滑动条有哪几种类型？
dat.gui 提供各种滑动条类型，包括 NumberController、BooleanController 和 ColorController。
如何监听 dat.gui 控制面板中的更改？
您可以使用 dat.gui 提供的 onFinishChange() 或 onChange() 事件侦听器监听更改。