Vue（V 3.2.37）使用Three.js（V 0.145.0）載入3D模型的詳細步驟

1、安裝three

命令：

pnpm install three

引入 three 和載入器

import * as THREE from 'three'

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

其他的場景，相機，燈光等一系列步驟這裡就省略了

2、模型文件放置路徑

文件有兩種放置方式，這兩個方式親測可行（使用其中一種即可）

1、在根目錄新建文件夾 models（文件名隨意），將模型放入其中

2、在 public 文件夾下新建文件夾 models（文件名隨意），將模型放入其中

3、載入模型

創建GLTF載入器

const loader = new GLTFLoader();

載入模型

loader.load('/models/shark.glb', glb => {  // 調用OBJ的loader函數,載入成功會有個回調函數，參數obj就是模型載入成功後的網格Mesh實例對象
// 設置模型縮放
glb.scene.scale.set(100, 100, 100);
// 設置模型位置
glb.scene.position.set(0, 0, 0);
// 將模型添加到場景中
scene.add(glb.scene);
});

註意：scene.add(glb.scene)

創建OBJ載入器

const loader = new OBJLoader();

載入模型

loader.load("model/treasury.obj", obj => {
  scene.add(obj);
})

註意：scene.add(obj)

這裡只講了兩種模型載入方式，其他方式請自行查閱資料