精通 Vue 2 中混入 Three.js 的入门指南（一）

2023-09-09 09:06:01

Vue 2 中 Three.js 入门指南

摘要

Three.js 是一个用于在 WebGL 中创建和渲染 3D 图形的高级 JavaScript 库。结合 Vue.js，一个灵活且可扩展的用户界面框架，您可以构建交互式且引人入胜的 3D 体验。本指南将带您逐步完成在 Vue 2 中设置和使用 Three.js 的过程。

设置

要开始使用 Three.js 和 Vue.js，您需要：

通过 npm install three 安装 Three.js
通过 npm install vue 安装 Vue.js
使用 vue create my-three-js-app 创建新的 Vue.js 项目

基本 Three.js 场景

在 App.vue 组件中，创建一个 Three.js 场景：

mounted() {
  const canvas = document.getElementById('three-canvas');
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ canvas });
  renderer.setClearColor(0x000000, 1);
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  camera.position.z = 5;
  renderer.render(scene, camera);
}

代码示例

设置场景：scene = new THREE.Scene();
添加透视相机：camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
创建渲染器：renderer = new THREE.WebGLRenderer({ canvas });
设置背景色：renderer.setClearColor(0x000000, 1);
创建立方体：const geometry = new THREE.BoxGeometry(1, 1, 1);
创建材质：const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
创建网格：const cube = new THREE.Mesh(geometry, material);
将网格添加到场景：scene.add(cube);
定位相机：camera.position.z = 5;
渲染场景：renderer.render(scene, camera);