当前位置：首页 > backend >正文

如何在 Vue.js 中集成 Three.js —— 创建一个旋转的 3D 立方体

backend 2025/7/19 15:18:43

在这篇文章中，我将向大家展示如何将 Three.js 与 Vue.js 结合，创建一个简单的 3D 场景，并展示一个旋转的立方体。通过这个简单的示例，你将学习到如何在 Vue 项目中集成 Three.js，以及如何创建动态的 3D 内容。

1. 安装 Three.js

首先，我们需要在项目中安装 Three.js。你可以使用 npm 或 yarn 来安装它。打开终端，进入你的 Vue 项目目录，运行以下命令：

npm i three

2. 创建 Vue 组件

接下来，我们创建一个 Vue 组件来渲染 3D 立方体。在这个组件中，我们将通过 Three.js 来创建场景、相机、渲染器，以及一个旋转的立方体。

<template><div ref="threeCanvas" style="width: 100%; height: 100%"></div>
</template><script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as THREE from 'three';export default {name: 'ThreeExample',setup() {const threeCanvas = ref(null);onMounted(() => {// 创建一个 Three.js 场景const scene = new THREE.Scene();// 创建透视相机const camera = new THREE.PerspectiveCamera(75, // 视野角度window.innerWidth / window.innerHeight, // 宽高比0.1, // 最近可视距离1000 // 最远可视距离);// 创建 WebGL 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小threeCanvas.value.appendChild(renderer.domElement); // 将渲染器添加到 DOM// 创建一个绿色的立方体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;// 动画渲染函数const animate = function () {requestAnimationFrame(animate); // 请求下一帧动画// 旋转立方体cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染场景renderer.render(scene, camera);};animate(); // 启动动画// 处理窗口尺寸变化const handleResize = () => {const width = window.innerWidth;const height = window.innerHeight;// 更新渲染器大小renderer.setSize(width, height);// 更新相机的纵横比camera.aspect = width / height;camera.updateProjectionMatrix();};// 监听窗口大小变化window.addEventListener('resize', handleResize);// 清理资源onBeforeUnmount(() => {window.removeEventListener('resize', handleResize);renderer.dispose();});});return {threeCanvas};}
};
</script><style scoped>
/* 可以根据需要添加一些样式 */
</style>