快捷導(dǎo)航

在Vue3項(xiàng)目中安裝和配置Three.js的操作代碼

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

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

簡(jiǎn)介

Three.js 是一個(gè)輕量級(jí)的 WebGL 封裝庫(kù)，用于在瀏覽器中渲染復(fù)雜的 3D 圖形。它提供了便捷的 API，可以快速構(gòu)建 3D 場(chǎng)景、對(duì)象和動(dòng)畫。

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

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

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

初始化項(xiàng)目

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

安裝 Three.js

npm install three

運(yùn)行項(xiàng)目

npm run dev

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

在 Vue 組件中集成 Three.js

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

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

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

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

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

      // 初始化場(chǎng)景、相機(jī)和渲染器
      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)建一個(gè)立方體
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // 動(dòng)畫循環(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 文件結(jié)構(gòu)：

<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");

完整的文件結(jié)構(gòu)

完成上述步驟后，項(xiàng)目的文件結(jié)構(gòu)應(yīng)該類似于以下：

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

運(yùn)行項(xiàng)目

完成后，運(yùn)行以下命令啟動(dòng)開發(fā)服務(wù)器：

npm run dev

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

補(bǔ)充說明

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

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

以上就是在Vue3項(xiàng)目中安裝和配置Three.js的操作代碼的詳細(xì)內(nèi)容，更多關(guān)于Vue3安裝和配置Three.js的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: