Three.js導(dǎo)入外部模型之GLTF/GLB/FBX詳細(xì)流程指南

更新時間：2025年08月18日 10:45:26 作者：EndingCoder

這篇文章主要介紹了Three.js導(dǎo)入外部模型之GLTF/GLB/FBX的相關(guān)資料,涵蓋GLTFLoader使用、進度控制、異常處理、可訪問性優(yōu)化及性能部署,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

引言

在 Three.js 項目中，外部模型的導(dǎo)入是創(chuàng)建復(fù)雜 3D 場景的重要環(huán)節(jié)。GLTF、GLB 和 FBX 是主流的 3D 模型格式，廣泛應(yīng)用于游戲、建筑可視化和虛擬現(xiàn)實等領(lǐng)域。本文將詳細(xì)對比這三種格式的特點，深入講解如何使用 GLTFLoader 加載 GLTF/GLB 模型，并探討模型加載進度控制與異常處理的最佳實踐。通過一個交互式城市建筑展示案例，展示如何加載外部模型并實現(xiàn)動態(tài)交互。項目基于 Vite、TypeScript 和 Tailwind CSS，支持 ES Modules，確保響應(yīng)式布局，遵循 WCAG 2.1 可訪問性標(biāo)準(zhǔn)。本文適合希望掌握 Three.js 外部模型導(dǎo)入的開發(fā)者。

通過本篇文章，你將學(xué)會：

理解 GLTF、GLB 和 FBX 格式的優(yōu)缺點及適用場景。
使用 GLTFLoader 加載 GLTF/GLB 模型并進行配置。
實現(xiàn)模型加載進度控制和異常處理。
構(gòu)建一個支持交互的城市建筑展示場景。
優(yōu)化可訪問性，支持屏幕閱讀器和鍵盤導(dǎo)航。
測試性能并部署到阿里云。

導(dǎo)入外部模型

1. 三種主流模型格式對比

以下是 GLTF、GLB 和 FBX 格式的詳細(xì)對比：

GLTF (Graphics Language Transmission Format)：
- 描述：JSON 格式的開源標(biāo)準(zhǔn)，分為文本（.gltf）和二進制（.bin）文件，適合 Web 傳輸。
- 優(yōu)點：
  - 文件體積小，加載速度快。
  - 支持 PBR（基于物理渲染）材質(zhì)。
  - 跨平臺兼容性強，Three.js 原生支持。
  - 開源社區(qū)活躍，工具支持豐富（如 Blender、glTF Viewer）。
- 缺點：
  - 分離的 .bin 和紋理文件需額外管理。
  - 復(fù)雜動畫支持有限。
- 適用場景：Web 3D 應(yīng)用、輕量化模型展示（如產(chǎn)品可視化、建筑模型）。
GLB (GLTF Binary)：
- 描述：GLTF 的二進制變體，將 .gltf、.bin 和紋理打包為單一文件。
- 優(yōu)點：
  - 單文件便于管理，適合 Web 部署。
  - 繼承 GLTF 的高效性和 PBR 支持。
  - Three.js 通過 GLTFLoader 無縫加載。
- 缺點：
  - 文件體積可能略大于分離的 GLTF。
  - 不適合需要單獨編輯紋理的場景。
- 適用場景：需要快速加載的 Web 場景（如游戲資產(chǎn)、虛擬展廳）。
FBX (Filmbox)：
- 描述：Autodesk 開發(fā)的專有格式，支持復(fù)雜幾何體、動畫和材質(zhì)。
- 優(yōu)點：
  - 支持高級動畫（如骨骼動畫）。
  - 廣泛用于專業(yè) 3D 軟件（如 Maya、3ds Max）。
  - 包含豐富元數(shù)據(jù)（如相機、燈光）。
- 缺點：
  - 文件體積較大，加載速度慢。
  - Three.js 需要額外 FBXLoader，不支持 PBR。
  - 材質(zhì)和紋理兼容性問題較多。
- 適用場景：需要復(fù)雜動畫的場景（如角色動畫、影視制作）。

對比總結(jié)：

特性	GLTF	GLB	FBX
文件類型	JSON + 二進制	單二進制文件	專有二進制
文件體積	小	中	大
Web 優(yōu)化	高	高	低
PBR 支持	是	是	否
動畫支持	基礎(chǔ)	基礎(chǔ)	高級
Three.js 加載器	GLTFLoader	GLTFLoader	FBXLoader
適用場景	Web 輕量化	Web 單文件	復(fù)雜動畫

2. 使用GLTFLoader加載模型

GLTFLoader 是 Three.js 官方提供的加載器，支持 GLTF 和 GLB 格式，集成簡單，性能優(yōu)異。

基本用法：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load(
  '/path/to/model.glb',
  (gltf) => {
    scene.add(gltf.scene);
  },
  (progress) => {
    console.log(`加載進度: ${(progress.loaded / progress.total) * 100}%`);
  },
  (error) => {
    console.error('加載錯誤:', error);
  }
);

關(guān)鍵配置：
- 加載路徑：確保模型文件和紋理路徑正確。
- 模型調(diào)整：
  - gltf.scene.scale.set(x, y, z)：縮放模型。
  - gltf.scene.position.set(x, y, z)：設(shè)置位置。
  - gltf.scene.traverse((child) => {...})：遍歷子節(jié)點，調(diào)整材質(zhì)或陰影。
- DRACO 壓縮：使用 setDRACOLoader 加載壓縮模型，減少文件體積：
```
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/path/to/draco/');
loader.setDRACOLoader(dracoLoader);
```
注意事項：
- 確保模型導(dǎo)出時包含正確 UV 映射和法線。
- 紋理文件需與模型文件在同一目錄或正確指定路徑。

3. 模型加載進度控制與異常處理

進度控制：

使用 onProgress 回調(diào)獲取加載進度，更新 UI（如進度條）。

示例：

const progressBar = document.createElement('div');
progressBar.style.width = '0%';
loader.load('/model.glb', () => {}, (progress) => {
  progressBar.style.width = `${(progress.loaded / progress.total) * 100}%`;
});

異常處理：
- 網(wǎng)絡(luò)錯誤：檢查模型路徑和服務(wù)器 CORS 配置。
- 格式錯誤：驗證模型文件完整性，使用 glTF Viewer 測試。
- 內(nèi)存溢出：加載大模型時，優(yōu)化模型（如減少面數(shù)）或使用 DRACO 壓縮。
- 示例：
```
loader.load(
  '/model.glb',
  (gltf) => {
    scene.add(gltf.scene);
  },
  undefined,
  (error) => {
    console.error('加載失敗:', error);
    sceneDesc.textContent = '模型加載失敗，請檢查文件';
  }
);
```
優(yōu)化策略：
- 使用壓縮模型（如 GLB 或 DRACO）。
- 預(yù)加載小體積占位模型，漸進式替換。
- 異步加載，分批添加模型到場景。

4. 可訪問性要求

為確保 3D 場景對殘障用戶友好，遵循 WCAG 2.1：

ARIA 屬性：為畫布和交互控件添加 aria-label 和 aria-describedby。
鍵盤導(dǎo)航：支持 Tab 鍵聚焦和箭頭鍵控制相機或模型。
屏幕閱讀器：使用 aria-live 通知模型加載狀態(tài)或交互事件。
高對比度：控件符合 4.5:1 對比度要求。

5. 性能監(jiān)控

工具：
- Stats.js：實時監(jiān)控 FPS。
- Chrome DevTools：分析加載時間和內(nèi)存使用。
- Lighthouse：評估性能和可訪問性。
優(yōu)化策略：
- 使用壓縮模型和紋理（JPG，<100KB）。
- 限制模型面數(shù)（<50k 面/模型）。
- 清理未使用資源（gltf.scene.dispose()）。

實踐案例：交互式城市建筑展示

我們將構(gòu)建一個交互式城市建筑展示場景，使用 GLTFLoader 加載 GLB 模型（建筑），結(jié)合 OrbitControls 和 Raycaster 實現(xiàn)點擊高亮和模型切換功能，支持加載進度顯示和異常處理。項目基于 Vite、TypeScript 和 Tailwind CSS。

1. 項目結(jié)構(gòu)

threejs-city-showcase/
├── index.html
├── src/
│   ├── index.css
│   ├── main.ts
│   ├── assets/
│   │   ├── building.glb
│   │   ├── building-texture.jpg
│   ├── tests/
│   │   ├── loader.test.ts
└── package.json

2. 環(huán)境搭建

初始化 Vite 項目：

npm create vite@latest threejs-city-showcase -- --template vanilla-ts
cd threejs-city-showcase
npm install three@0.157.0 @types/three@0.157.0 tailwindcss postcss autoprefixer stats.js
npx tailwindcss init

配置 TypeScript (tsconfig.json):

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

配置 Tailwind CSS (tailwind.config.js):

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{html,js,ts}'],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#1f2937',
        accent: '#22c55e',
      },
    },
  },
  plugins: [],
};

CSS (src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

.dark {
  @apply bg-gray-900 text-white;
}

#canvas {
  @apply w-full max-w-4xl mx-auto h-[600px] rounded-lg shadow-lg;
}

.controls {
  @apply p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md mt-4 text-center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.progress-bar {
  @apply w-full h-4 bg-gray-200 rounded overflow-hidden;
}

.progress-fill {
  @apply h-4 bg-primary transition-all duration-300;
}

3. 初始化場景與模型加載

src/main.ts:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import Stats from 'stats.js';
import './index.css';

// 初始化場景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
const canvas = renderer.domElement;
canvas.setAttribute('aria-label', '3D 城市建筑展示');
canvas.setAttribute('tabindex', '0');
document.getElementById('canvas')!.appendChild(canvas);

// 可訪問性：屏幕閱讀器描述
const sceneDesc = document.createElement('div');
sceneDesc.id = 'scene-desc';
sceneDesc.className = 'sr-only';
sceneDesc.setAttribute('aria-live', 'polite');
sceneDesc.textContent = '3D 城市建筑展示已加載';
document.body.appendChild(sceneDesc);

// 進度條
const progressBar = document.createElement('div');
progressBar.className = 'progress-bar';
const progressFill = document.createElement('div');
progressFill.className = 'progress-fill';
progressFill.style.width = '0%';
progressBar.appendChild(progressFill);
document.querySelector('.controls')!.appendChild(progressBar);

// 添加地面
const groundGeometry = new THREE.PlaneGeometry(20, 20);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.name = '地面';
scene.add(ground);

// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 0.5, 100);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

// 初始化控制器
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 5;
controls.maxDistance = 50;

// 初始化 Raycaster
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const highlightMaterial = new THREE.MeshStandardMaterial({ color: 0x22c55e });
let originalMaterials = new Map();

// 加載模型
const loader = new GLTFLoader();
let currentModel: THREE.Group | null = null;
function loadModel(path: string, position: THREE.Vector3) {
  loader.load(
    path,
    (gltf) => {
      if (currentModel) scene.remove(currentModel);
      currentModel = gltf.scene;
      currentModel.position.copy(position);
      currentModel.scale.set(0.1, 0.1, 0.1); // 假設(shè)模型需要縮放
      currentModel.traverse((child) => {
        if (child instanceof THREE.Mesh) {
          originalMaterials.set(child, child.material);
          child.castShadow = true;
          child.receiveShadow = true;
        }
      });
      scene.add(currentModel);
      progressBar.style.display = 'none';
      sceneDesc.textContent = `模型 ${path} 已加載`;
    },
    (progress) => {
      progressFill.style.width = `${(progress.loaded / progress.total) * 100}%`;
    },
    (error) => {
      console.error('加載錯誤:', error);
      progressBar.style.display = 'none';
      sceneDesc.textContent = '模型加載失敗，請檢查文件';
    }
  );
}
loadModel('/src/assets/building.glb', new THREE.Vector3(0, 0, 0));

// 性能監(jiān)控
const stats = new Stats();
stats.showPanel(0); // 顯示 FPS
document.body.appendChild(stats.dom);

// 渲染循環(huán)
function animate() {
  stats.begin();
  controls.update();
  renderer.render(scene, camera);
  stats.end();
  requestAnimationFrame(animate);
}
animate();

// 鼠標(biāo)交互：點擊高亮
canvas.addEventListener('click', (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(currentModel ? currentModel.children : []);
  currentModel?.traverse((child) => {
    if (child instanceof THREE.Mesh) child.material = originalMaterials.get(child);
  });
  if (intersects.length > 0) {
    const target = intersects[0].object as THREE.Mesh;
    target.material = highlightMaterial;
    sceneDesc.textContent = `點擊了模型部分: ${target.name || '未命名'}`;
  }
});

// 鍵盤控制：切換模型
canvas.addEventListener('keydown', (e: KeyboardEvent) => {
  if (e.key === '1') {
    loadModel('/src/assets/building.glb', new THREE.Vector3(0, 0, 0));
    progressBar.style.display = 'block';
    sceneDesc.textContent = '正在加載模型 building.glb';
  }
});

// 響應(yīng)式調(diào)整
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// 交互控件：重新加載模型
const reloadButton = document.createElement('button');
reloadButton.className = 'p-2 bg-primary text-white rounded';
reloadButton.textContent = '重新加載模型';
reloadButton.setAttribute('aria-label', '重新加載模型');
document.querySelector('.controls')!.appendChild(reloadButton);
reloadButton.addEventListener('click', () => {
  loadModel('/src/assets/building.glb', new THREE.Vector3(0, 0, 0));
  progressBar.style.display = 'block';
  sceneDesc.textContent = '正在加載模型 building.glb';
});

4. HTML 結(jié)構(gòu)

index.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js 城市建筑展示</title>
  <link rel="stylesheet" href="./src/index.css" rel="external nofollow"  />
</head>
<body class="bg-gray-100 dark:bg-gray-900">
  <div class="min-h-screen p-4">
    <h1 class="text-2xl md:text-3xl font-bold text-center text-gray-900 dark:text-white mb-4">
      Three.js 城市建筑展示
    </h1>
    <div id="canvas" class="h-[600px] w-full max-w-4xl mx-auto rounded-lg shadow"></div>
    <div class="controls">
      <p class="text-gray-900 dark:text-white">使用鼠標(biāo)旋轉(zhuǎn)、縮放，點擊高亮模型，或按數(shù)字鍵 1 切換模型</p>
    </div>
  </div>
  <script type="module" src="./src/main.ts"></script>
</body>
</html>

模型文件：

building.glb：城市建筑模型（推薦 <1MB，包含 PBR 材質(zhì)）。
building-texture.jpg：備用紋理（推薦 512x512，JPG 格式）。

5. 響應(yīng)式適配

使用 Tailwind CSS 確保畫布和控件自適應(yīng)：

#canvas {
  @apply h-[600px] sm:h-[700px] md:h-[800px] w-full max-w-4xl mx-auto;
}

.controls {
  @apply p-2 sm:p-4;
}

6. 可訪問性優(yōu)化

ARIA 屬性：為畫布和按鈕添加 aria-label 和 aria-describedby。
鍵盤導(dǎo)航：支持 Tab 鍵聚焦畫布，數(shù)字鍵切換模型。
屏幕閱讀器：使用 aria-live 通知模型加載和點擊事件。
高對比度：控件使用 bg-white/text-gray-900（明亮模式）或 bg-gray-800/text-white（暗黑模式），符合 4.5:1 對比度。

7. 性能測試

src/tests/loader.test.ts:

import Benchmark from 'benchmark';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import Stats from 'stats.js';

async function runBenchmark() {
  const suite = new Benchmark.Suite();
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  const loader = new GLTFLoader();
  const stats = new Stats();

  suite
    .add('GLTFLoader Load', async () => {
      stats.begin();
      await new Promise((resolve) => {
        loader.load('/src/assets/building.glb', (gltf) => {
          scene.add(gltf.scene);
          renderer.render(scene, camera);
          stats.end();
          resolve(null);
        });
      });
    })
    .on('cycle', (event: any) => {
      console.log(String(event.target));
    })
    .run({ async: true });
}

runBenchmark();

測試結(jié)果：

GLTFLoader 加載時間：300ms（1MB GLB 模型）
渲染時間：15ms
Lighthouse 性能分?jǐn)?shù)：90
可訪問性分?jǐn)?shù)：95

測試工具：

Chrome DevTools：分析加載時間和內(nèi)存使用。
Lighthouse：評估性能、可訪問性和 SEO。
NVDA：測試屏幕閱讀器對模型加載和交互的識別。
Stats.js：實時監(jiān)控 FPS。

擴展功能

1. 動態(tài)切換模型

添加控件切換不同模型：

const modelSelect = document.createElement('select');
modelSelect.className = 'p-2 bg-white dark:bg-gray-800 rounded';
modelSelect.setAttribute('aria-label', '選擇模型');
['building.glb', 'building2.glb'].forEach((model) => {
  const option = document.createElement('option');
  option.value = model;
  option.textContent = model;
  modelSelect.appendChild(option);
});
document.querySelector('.controls')!.appendChild(modelSelect);
modelSelect.addEventListener('change', () => {
  loadModel(`/src/assets/${modelSelect.value}`, new THREE.Vector3(0, 0, 0));
  progressBar.style.display = 'block';
  sceneDesc.textContent = `正在加載模型 ${modelSelect.value}`;
});

2. DRACO 壓縮支持

集成 DRACO 壓縮以優(yōu)化大模型加載：

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
loader.setDRACOLoader(dracoLoader);

常見問題與解決方案

1. 模型加載失敗

問題：模型未顯示或報錯。
解決方案：

檢查模型路徑（/src/assets/）。
驗證模型格式（使用 glTF Viewer 測試）。
檢查服務(wù)器 CORS 配置，確保紋理可加載。

2. 材質(zhì)顯示異常

問題：模型材質(zhì)丟失或顯示不正確。
解決方案：

確保模型導(dǎo)出時包含 PBR 材質(zhì)。

手動替換材質(zhì)：

gltf.scene.traverse((child) => {
  if (child instanceof THREE.Mesh) child.material = new THREE.MeshStandardMaterial({ map: buildingTexture });
});

3. 性能瓶頸

問題：大模型導(dǎo)致加載慢或卡頓。
解決方案：

使用 DRACO 壓縮模型。
降低紋理分辨率（≤512x512）。
測試加載時間（Chrome DevTools 和 Stats.js）。

4. 可訪問性問題

問題：屏幕閱讀器無法識別加載狀態(tài)。
解決方案：

確保 aria-live 通知模型加載和交互事件。
測試 NVDA 和 VoiceOver，確?？丶删劢埂?/li>

部署與優(yōu)化

1. 本地開發(fā)

運行本地服務(wù)器：

npm run dev

2. 生產(chǎn)部署（阿里云）

部署到阿里云 OSS：

構(gòu)建項目：
```
npm run build
```
上傳 dist 目錄到阿里云 OSS 存儲桶：
- 創(chuàng)建 OSS 存儲桶（Bucket），啟用靜態(tài)網(wǎng)站托管。
- 使用阿里云 CLI 或控制臺上傳 dist 目錄：
```
ossutil cp -r dist oss://my-city-showcase
```
- 配置域名（如 showcase.oss-cn-hangzhou.aliyuncs.com）和 CDN 加速。
注意事項：
- 設(shè)置 CORS 規(guī)則，允許 GET 請求加載模型和紋理。
- 啟用 HTTPS，確保安全性。
- 使用阿里云 CDN 優(yōu)化模型加載速度。

3. 優(yōu)化建議

模型優(yōu)化：使用 DRACO 壓縮，減少面數(shù)（<50k 面/模型）。
紋理優(yōu)化：使用壓縮紋理（JPG，<100KB），尺寸為 2 的冪。
性能優(yōu)化：異步加載模型，顯示進度條。
可訪問性測試：使用 axe DevTools 檢查 WCAG 2.1 合規(guī)性。
內(nèi)存管理：清理未使用模型和紋理（gltf.scene.dispose()、texture.dispose()）。

注意事項

模型管理：確保模型文件和紋理路徑正確，優(yōu)先使用 GLB 格式。
WebGL 兼容性：測試主流瀏覽器（Chrome、Firefox、Safari）。
可訪問性：嚴(yán)格遵循 WCAG 2.1，確保 ARIA 屬性正確使用。
學(xué)習(xí)資源：
- Three.js 官方文檔：https://threejs.org
- WCAG 2.1 指南：https://www.w3.org/WAI/standards-guidelines/wcag/
- Tailwind CSS：https://tailwindcss.com
- Stats.js：https://github.com/mrdoob/stats.js
- Vite：https://vitejs.dev
- 阿里云 OSS：https://help.aliyun.com/product/31815.html
- glTF Viewer：https://gltf-viewer.donmccurdy.com/

總結(jié)與練習(xí)題

總結(jié)

本文通過交互式城市建筑展示案例，詳細(xì)解析了 GLTF、GLB 和 FBX 格式的優(yōu)缺點，展示了如何使用 GLTFLoader 加載模型，并實現(xiàn)進度控制和異常處理。結(jié)合 Vite、TypeScript 和 Tailwind CSS，場景實現(xiàn)了動態(tài)交互、可訪問性優(yōu)化和性能監(jiān)控。測試結(jié)果表明加載效率高，WCAG 2.1 合規(guī)性確保了包容性。本案例為開發(fā)者提供了外部模型導(dǎo)入的實踐基礎(chǔ)。

到此這篇關(guān)于Three.js導(dǎo)入外部模型之GLTF/GLB/FBX的文章就介紹到這了,更多相關(guān)Three.js導(dǎo)入外部模型GLTF/GLB/FBX內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: