返回

快速掌握 Vue3 + Three.js，点亮你的 WebGL 之旅

前端

用 Vue3 掌握 Three.js：从入门到应用

在现代网页开发中，3D 图形扮演着越来越重要的角色，使我们能够创建引人入胜的交互式体验。Three.js 是一个流行的 JavaScript 库，专门用于创建和呈现 3D 图形。本文将深入探讨如何将 Three.js 与 Vue3 集成，让你能够在你的 Vue 项目中构建令人惊叹的 3D 场景。

入门：设置你的画布

要开始使用 Three.js，首先需要在项目中安装它：

npm install three

场景、相机和渲染器：3D 世界的三要素

Three.js 中有三个关键元素：场景、相机和渲染器。场景就像一个虚拟舞台，你可以在其中放置 3D 对象；相机决定了观众视角；渲染器将场景投射到屏幕上。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

用几何体和材质构建对象

有了场景、相机和渲染器，就可以开始创建 3D 对象了。几何体定义了对象的形状，而材质决定了它的外观。

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);
renderer.render(scene, camera);

集成了 Vue：让 Three.js 活起来

现在，让我们将 Three.js 集成到 Vue3 项目中。为此，需要在组件中创建 mounted() 钩子。

mounted() {
  // 创建场景、相机和渲染器
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(this.$el.clientWidth, this.$el.clientHeight);

  // 将渲染器挂载到 DOM
  this.$el.appendChild(renderer.domElement);

  // 创建立方体并添加到场景
  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);

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

常见问题解答

  1. 如何更新场景？

    • 使用 requestAnimationFrame 定期调用 renderer.render() 方法。

  2. 如何交互式控制相机？

    • 使用事件侦听器捕捉鼠标或键盘输入，并相应地更新相机位置和方向。

  3. 如何添加灯光到场景？

    • 使用 DirectionalLight 或 AmbientLight 实例为场景添加灯光效果。

  4. 如何加载 3D 模型？

    • 使用 GLTFLoader 或 OBJLoader 从文件中加载 3D 模型。

  5. Three.js 和 WebGL 之间有什么区别？

    • WebGL 是一种低级图形 API，而 Three.js 是一个包装了 WebGL 并提供了更高级 API 的库。