如何使用vue引入three.js_vue引入threejs-CSDN博客

在 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>