在Vue3项目中安装和配置Three.js的操作代码

pnpm create vite@latest vue-threejs-demo --template vue
cd vue-threejs-demo
npm install

npm install three

npm run dev

vue-threejs-demo/
├── src/
│   ├── assets/         # 放置静态资源
│   ├── components/     # 放置 Vue 组件
│   │   ├── ThreeScene.vue
│   ├── App.vue         # 应用根组件
│   ├── main.js         # 项目入口文件
│   └── styles/         # 可选：放置全局样式
├── public/             # 放置静态文件
├── package.json
├── vite.config.js
└── README.md

src/
├── components/
│   └── 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>

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

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

window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});