three.js项目实例vue

当然，我可以为您提供一个使用Vue.js和Three.js的基本项目示例。请注意，这只是一个简单的示例，用于演示如何在Vue.js中使用Three.js。您可以根据自己的需求进行扩展和修改。

首先，确保您已经安装了Vue CLI，如果没有，请先安装它：

npm install -g @vue/cli

接下来，创建一个新的Vue项目：

vue create threejs-project

选择默认配置或根据需要进行自定义配置。

进入项目目录：

cd threejs-project

安装Three.js：

npm install three

创建一个名为`ThreeScene.vue`的新组件：

<template>
  <div ref="canvasContainer"></div>
</template>

<script>
import * as THREE from "three";

export default {
  mounted() {
    this.initScene();
    this.animate();
  },
  methods: {
    initScene() {
      // 创建场景
      this.scene = new THREE.Scene();

      // 创建相机
      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      this.camera.position.z = 5;

      // 创建渲染器
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, window.innerHeight);

      // 将渲染器添加到DOM元素中
      this.$refs.canvasContainer.appendChild(this.renderer.domElement);

      // 创建立方体
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;
      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

<style>
canvas {
  display: block;
}
</style>

在您的主组件（如`App.vue`）中使用`ThreeScene`组件：

<template>
  <div id="app">
    <ThreeScene />
  </div>
</template>

<script>
import ThreeScene from "./components/ThreeScene.vue";

export default {
  components: {
    ThreeScene,
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

最后，运行项目：

npm run serve

您应该可以在浏览器中看到一个旋转的绿色立方体。

这只是一个基本示例，您可以根据需要进行更复杂的场景和模型构建。希望对您有所帮助！