简介
Three.js 是一个轻量级的 WebGL 封装库，用于在浏览器中渲染复杂的 3D 图形。它提供了便捷的 API，可以快速构建 3D 场景、对象和动画。
Vue.js 是一个渐进式 JavaScript 框架，擅长构建用户界面。其响应式数据绑定和组件系统使得复杂的交互开发更加简单。
通过将 Three.js 和 Vue.js 结合，我们可以利用 Vue 的组件化和响应式特性，轻松管理和更新 3D 场景中的对象和状态，从而创建高效且交互性强的 3D 应用。
创建一个基于 Vite 的 Vue3 项目
初始化项目
pnpm create vite@latest vue-threejs-demo --template vue
cd vue-threejs-demo
npm install
安装 Three.js
npm install three
运行项目
npm run dev
至此，我们已经创建了一个基于 Vite 的 Vue3 项目，并安装了 Three.js 库。
在 Vue 组件中集成 Three.js
目录
以下是初始的目录结构
vue-threejs-demo/
├── src/
│ ├── assets/ # 放置静态资源
│ ├── components/ # 放置 Vue 组件
│ │ ├── ThreeScene.vue
│ ├── App.vue # 应用根组件
│ ├── main.js # 项目入口文件
│ └── styles/ # 可选：放置全局样式
├── public/ # 放置静态文件
├── package.json
├── vite.config.js
└── README.md
创建 ThreeScene.vue 组件
创建文件夹和文件： 在项目的 src/components 文件夹下，新建一个文件 ThreeScene.vue，用于管理 3D 场景逻辑。
src/
├── components/
│ └── ThreeScene.vue
在组件中初始化 Three.js 场景： 将以下代码复制到 ThreeScene.vue 文件中：
<template><div id="three-container"><canvas ref="threeCanvas"></canvas></div>
</template><script>
import * as THREE from "three";export default {name: "ThreeScene",mounted() {this.initThree();},methods: {initThree() {const canvas = this.$refs.threeCanvas;// 初始化场景、相机和渲染器const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);camera.position.z = 5;const renderer = new THREE.WebGLRenderer({ canvas });renderer.setSize(window.innerWidth, window.innerHeight);// 创建一个立方体const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);// 动画循环function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}animate();},},
};
</script><style scoped>
#three-container {width: 100%;height: 100vh;
}
canvas {display: block;width: 100%;height: 100%;
}
</style>
修改 App.vue 文件
将 ThreeScene.vue 组件引入并使用。
App.vue 文件结构：
<template><div id="app"><ThreeScene /></div>
</template><script>
import ThreeScene from "./components/ThreeScene.vue";export default {name: "App",components: {ThreeScene,},
};
</script><style>
#app {margin: 0;padding: 0;overflow: hidden;
}
</style>
修改 main.js 文件
import { createApp } from "vue";
import App from "./App.vue";const app = createApp(App);
app.mount("#app");
完整的文件结构
完成上述步骤后，项目的文件结构应该类似于以下：
vue-threejs-demo/
├── src/
│ ├── assets/ # 可选：存放图片、材质等静态资源
│ ├── components/
│ │ └── ThreeScene.vue # 3D 场景组件
│ ├── styles/ # 可选：全局样式文件夹
│ │ └── global.css # 可选：定义全局 CSS 样式
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
├── public/ # 存放静态文件
│ └── index.html # HTML 模板
├── package.json # 项目信息
├── vite.config.js # Vite 配置文件
└── README.md # 项目说明
运行项目
完成后，运行以下命令启动开发服务器：
npm run dev
打开浏览器访问 http://localhost:5173 你将看到一个旋转的绿色立方体在页面中显示。
补充说明
-
关于动态加载材质：将材质文件（如图片）放置在 src/assets 或 public 文件夹中，并通过 Three.js 的 TextureLoader 加载。
-
关于响应式调整：可以监听窗口大小的变化，在 initThree 方法中加入如下代码：
window.addEventListener("resize", () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);
});
