vue页面引入three.js

### 如何在 Vue 项目中引入并配置 Three.js #### 创建 Vue 项目 如果尚未创建 Vue 项目，可以使用 Vue CLI 或 Vite 来快速搭建环境。对于现代开发推荐使用 Vite 构建工具来初始化项目[^1]。 ```bash pnpm create vite@latest vue-threejs-demo --template vue cd vue-threejs-demo ``` #### 安装 Three.js 完成项目初始化后，在项目根目录下运行命令以安装 Three.js： ```bash npm install three ``` 这一步会将 Three.js 添加到项目的依赖项中[^2]。 #### 配置和加载 Three.js 为了在 Vue 组件中使用 Three.js，可以通过 `import` 将其引入。以下是完整的示例代码，展示如何设置基础场景、相机以及渲染器，并将其嵌入到 Vue 页面中。 ```javascript <template> <div ref="threeContainer"></div> </template> <script setup> import * as THREE from "three"; import { onMounted, ref } from "vue"; const threeContainer = ref(null); onMounted(() => { const container = threeContainer.value; // 设置场景 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); container.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); camera.position.z = 5; function animate() { requestAnimationFrame(animate); // 更新物体位置或其他属性 cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); }); </script> <style scoped> #app { width: 100%; height: 100%; } </style> ``` 此代码片段展示了如何在一个 Vue 组件中集成 Three.js 并实现简单的旋转立方体效果[^1]。 #### 加载外部模型 (GLTF 文件) 如果需要加载 `.gltf` 或 `.glb` 格式的三维模型，则需额外导入 `GLTFLoader` 工具类。以下是如何操作的一个例子[^3]： ```javascript import * as THREE from "three"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // 假设已经定义好场景和其他必要部分... function loadModel() { const loader = new GLTFLoader(); loader.load("/path/to/model.glb", (gltf) => { const model = gltf.scene; // 获取加载的模型节点 scene.add(model); // 将模型添加至场景中 }, undefined, (error) => { console.error("An error occurred while loading the model:", error); }); } loadModel(); // 调用函数执行模型加载逻辑 ``` 以上方法能够帮助开发者成功地在 Vue 中加载复杂的三维资产。 ---