在Vue3项目中安装和配置Three.js的操作代码
作者：程序员_三木
Three.js是一个轻量级的WebGL封装库,用于在浏览器中渲染复杂的3D图形,它提供了便捷的API,可以快速构建3D场景、对象和动画,Vue.js是一个渐进式JavaScript框架,擅长构建用户界面,本文给大家介绍了在Vue3项目中安装和配置Three.js的操作,需要的朋友可以参考下
简介
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);
});
以上就是在Vue3项目中安装和配置Three.js的操作代码的详细内容，更多关于Vue3安装和配置Three.js的资料请关注脚本之家其它相关文章！