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

如何使用vue引入three.js

news 2025/7/18 3:42:37

在 Vue.js 项目中引入和使用 Three.js 是一个常见的需求，Three.js 是一个用于在浏览器中创建和显示动画 3D 计算机图形的 JavaScript 库。以下是一个基本的示例，展示如何在 Vue 项目中引入和使用 Three.js。

1. 创建 Vue 项目

如果你还没有一个 Vue 项目，可以使用 Vue CLI 创建一个新的项目：

npm install -g @vue/cli
vue create my-threejs-app
cd my-threejs-app

2. 安装 Three.js

你可以通过 npm 安装 Three.js：

npm install three

3. 创建 Three.js 组件

在你的 Vue 项目中，创建一个新的组件来封装 Three.js 的逻辑。例如，创建一个名为 ThreeScene.vue 的组件。

<template><div ref="threeContainer" style="width: 100%; height: 100vh;"></div>
</template><script>
import * as THREE from 'three';export default {name: 'ThreeScene',mounted() {this.initThree();},methods: {initThree() {const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, this.$refs.threeContainer.clientWidth / this.$refs.threeContainer.clientHeight, 0.1, 1000);camera.position.z = 5;const renderer = new THREE.WebGLRenderer();renderer.setSize(this.$refs.threeContainer.clientWidth, this.$refs.threeContainer.clientHeight);this.$refs.threeContainer.appendChild(renderer.domElement);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>
/* 样式可以根据需要调整 */
</style>

4. 在主组件中使用 ThreeScene 组件

在你的主组件（例如 App.vue）中引入并使用 ThreeScene 组件：

<template><div id="app"><ThreeScene /></div>
</template><script>
import ThreeScene from './components/ThreeScene.vue';export default {name: 'App',components: {ThreeScene,},
};
</script><style>
/* 样式可以根据需要调整 */
#app {width: 100vw;height: 100vh;margin: 0;overflow: hidden;
}
</style>