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)
這里只講了兩種模型加載方式，其他方式請自行查閱資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/522966.html
標籤：其他
上一篇：面試題 JS 不能不會的內容