內容概述
隨著 3D 場景復雜度的增加，性能優化變得至關重要。Three.js 項目可能因幾何體數量、紋理大小或渲染設置而變慢。本專題將介紹減少 draw call、優化紋理和使用調試工具的最佳實踐。
學習目標
- 學會減少 draw call 和幾何體復雜度。
- 掌握紋理壓縮與內存管理。
- 使用
Stats.js和 Three.js Inspector 調試性能。
完整代碼實現
我們將創建一個包含多個立方體的場景，應用優化技巧，并添加 Stats.js 監控幀率。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Three.js - 性能優化與最佳實踐</title><style>body { margin: 0; overflow: hidden; }canvas { display: block; }</style>
</head>
<body><!-- 引入 Three.js 和 Stats.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/17/Stats.min.js"></script><script>// 1. 初始化場景、相機和渲染器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);
)
)
