在Vue3項目中安裝和配置Three.js的操作代碼

更新時間：2024年12月25日 11:34:06 作者：程序員_三木

Three.js是一個輕量級的WebGL封裝庫,用于在瀏覽器中渲染復雜的3D圖形,它提供了便捷的API,可以快速構建3D場景、對象和動畫,Vue.js是一個漸進式JavaScript框架,擅長構建用戶界面,本文給大家介紹了在Vue3項目中安裝和配置Three.js的操作,需要的朋友可以參考下

簡介

Three.js 是一個輕量級的 WebGL 封裝庫，用于在瀏覽器中渲染復雜的 3D 圖形。它提供了便捷的 API，可以快速構建 3D 場景、對象和動畫。

Vue.js 是一個漸進式 JavaScript 框架，擅長構建用戶界面。其響應式數(shù)據(jù)綁定和組件系統(tǒng)使得復雜的交互開發(fā)更加簡單。

通過將 Three.js 和 Vue.js 結合，我們可以利用 Vue 的組件化和響應式特性，輕松管理和更新 3D 場景中的對象和狀態(tài)，從而創(chuàng)建高效且交互性強的 3D 應用。

創(chuàng)建一個基于 Vite 的 Vue3 項目

初始化項目

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

安裝 Three.js

npm install three

運行項目

npm run dev

至此，我們已經(jīng)創(chuàng)建了一個基于 Vite 的 Vue3 項目，并安裝了 Three.js 庫。

在 Vue 組件中集成 Three.js

vue-threejs-demo/
├── src/
│   ├── assets/         # 放置靜態(tài)資源
│   ├── components/     # 放置 Vue 組件
│   │   ├── ThreeScene.vue
│   ├── App.vue         # 應用根組件
│   ├── main.js         # 項目入口文件
│   └── styles/         # 可選：放置全局樣式
├── public/             # 放置靜態(tài)文件
├── package.json
├── vite.config.js
└── README.md

創(chuàng)建 ThreeScene.vue 組件

創(chuàng)建文件夾和文件：在項目的 src/components 文件夾下，新建一個文件 ThreeScene.vue，用于管理 3D 場景邏輯。

src/
├── components/
│   └── ThreeScene.vue

在組件中初始化 Three.js 場景：將以下代碼復制到 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);

      // 創(chuàng)建一個立方體
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // 動畫循環(huán)
      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>

修改 App.vue 文件

將 ThreeScene.vue 組件引入并使用。
App.vue 文件結構：

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

修改 main.js 文件

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");

完整的文件結構

完成上述步驟后，項目的文件結構應該類似于以下：

vue-threejs-demo/
├── src/
│   ├── assets/         # 可選：存放圖片、材質等靜態(tài)資源
│   ├── components/
│   │   └── ThreeScene.vue   # 3D 場景組件
│   ├── styles/         # 可選：全局樣式文件夾
│   │   └── global.css  # 可選：定義全局 CSS 樣式
│   ├── App.vue         # 根組件
│   ├── main.js         # 入口文件
├── public/             # 存放靜態(tài)文件
│   └── index.html      # HTML 模板
├── package.json        # 項目信息
├── vite.config.js      # Vite 配置文件
└── README.md           # 項目說明

運行項目

完成后，運行以下命令啟動開發(fā)服務器：

npm run dev

打開瀏覽器訪問 http://localhost:5173 你將看到一個旋轉的綠色立方體在頁面中顯示。

補充說明

關于動態(tài)加載材質：將材質文件（如圖片）放置在 src/assets 或 public 文件夾中，并通過 Three.js 的 TextureLoader 加載。
關于響應式調整：可以監(jiān)聽窗口大小的變化，在 initThree 方法中加入如下代碼：

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

以上就是在Vue3項目中安裝和配置Three.js的操作代碼的詳細內容，更多關于Vue3安裝和配置Three.js的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: