three.js加載三維GLB文件查看三維模型圖文詳解
更新時間：2025年12月08日 09:20:08 作者：天一生水water
在三維可視化領(lǐng)域,Three.js是一個非常流行的JavaScript庫,它允許開發(fā)者在Web瀏覽器中創(chuàng)建和展示復(fù)雜的3D模型,這篇文章主要介紹了three.js加載三維GLB文件查看三維模型,需要的朋友可以參考下
在fast3d生成一個三維模型的GLB文件
使用HTML + Three.js實現(xiàn)，用于加載和顯示GLB格式的3D模型文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>加載GLB 3D模型</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
#info {
position: absolute;
top: 10px;
left: 10px;
color: white;
background: rgba(0,0,0,0.5);
padding: 10px;
font-family: Arial, sans-serif;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="info">正在加載模型... 請等待</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
<!-- 新增環(huán)境貼圖加載器 -->
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/TextureLoader.js"></script>
<script>
// 初始化場景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
// 創(chuàng)建相機
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 創(chuàng)建渲染器并啟用gamma校正（關(guān)鍵：確保材質(zhì)顏色正確顯示）
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.gammaOutput = true; // 啟用gamma輸出
renderer.gammaFactor = 2.2; // 設(shè)置gamma因子
document.body.appendChild(renderer.domElement);
// 增強光照系統(tǒng)（關(guān)鍵：確保材質(zhì)細節(jié)可見）
// 環(huán)境光 - 提供基礎(chǔ)照明，避免完全黑暗區(qū)域
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8); // 提高強度到0.8
scene.add(ambientLight);
// 主方向光 - 提供主要照明和陰影
const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.2); // 提高強度
directionalLight1.position.set(5, 5, 5); // 調(diào)整位置，增加角度
directionalLight1.castShadow = true; // 啟用陰影（如果模型需要）
scene.add(directionalLight1);
// 輔助方向光 - 減少陰影過暗
const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight2.position.set(-5, 3, -2); // 從另一側(cè)照明
scene.add(directionalLight2);
// 添加環(huán)境貼圖（關(guān)鍵：增強材質(zhì)反射效果）
const textureLoader = new THREE.TextureLoader();
// 使用簡單的環(huán)境貼圖（可替換為更復(fù)雜的HDR貼圖）
textureLoader.load('https://threejs.org/examples/textures/equirectangular/skybox.jpg', (texture) => {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.environment = texture; // 設(shè)置場景環(huán)境貼圖
scene.background = texture; // 可選：用環(huán)境貼圖作為背景
});
// 添加軌道控制
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05; // 增加阻尼感，操作更平滑
// 加載GLB模型
const loader = new THREE.GLTFLoader();
const modelPath = 'well.glb'; // 請確保模型路徑正確
loader.load(
modelPath,
function (gltf) {
document.getElementById('info').style.display = 'none';
const model = gltf.scene;
scene.add(model);
// 模型處理
const box = new THREE.Box3().setFromObject(model);
const size = box.getSize(new THREE.Vector3());
const center = box.getCenter(new THREE.Vector3());
// 自動縮放和居中模型
const maxDim = Math.max(size.x, size.y, size.z);
const fov = camera.fov * (Math.PI / 180);
let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
cameraZ *= 1.5; // 增加一點距離
camera.position.z = cameraZ;
// 居中模型
model.position.x = -center.x;
model.position.y = -center.y;
model.position.z = -center.z;
// 確保材質(zhì)正確應(yīng)用環(huán)境貼圖
model.traverse((child) => {
if (child.isMesh) {
child.material.envMap = scene.environment; // 應(yīng)用環(huán)境貼圖
child.material.needsUpdate = true; // 強制材質(zhì)更新
child.castShadow = true; // 啟用陰影投射
child.receiveShadow = true; // 啟用陰影接收
}
});
// 更新控制器目標
controls.target.set(center.x, center.y, center.z);
controls.update();
},
function (xhr) {
const percentage = (xhr.loaded / xhr.total * 100).toFixed(0);
document.getElementById('info').textContent = `加載中 ${percentage}%`;
},
function (error) {
console.error('加載模型出錯:', error);
document.getElementById('info').textContent = `加載失敗: ${error.message}`;
}
);
// 響應(yīng)窗口大小變化
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// 動畫循環(huán)
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
使用說明：
準備GLB文件：
- 將你的GLB模型文件（例如
model.glb）放在HTML文件的同一目錄下 - 確保模型文件是有效的GLB格式（glTF的二進制格式）
- 將你的GLB模型文件（例如
修改模型路徑：
- 在代碼中找到
const modelPath = 'model.glb'; - 如果模型在子目錄中，修改為
models/model.glb等路徑
- 在代碼中找到
關(guān)鍵功能說明：
- 自動縮放模型使其適應(yīng)視圖
- 添加了環(huán)境光和方向光使模型可見
- 使用OrbitControls實現(xiàn)鼠標交互（旋轉(zhuǎn)/縮放/平移）
- 顯示加載進度和錯誤提示
- 響應(yīng)窗口大小變化
常見問題解決：
- 模型不顯示：
- 檢查文件路徑是否正確
- 確保文件擴展名是
.glb（不是.gltf） - 檢查瀏覽器控制臺是否有加載錯誤
- 加載緩慢：
- 大模型可能需要較長時間加載
- 確保使用壓縮的GLB文件（GLB比GLTF小30%）
- 材質(zhì)問題：
- 如果模型材質(zhì)缺失，可能需要使用
GLTFLoader的draco支持（需要額外引入draco解碼器）
- 如果模型材質(zhì)缺失，可能需要使用
- 模型不顯示：
額外建議：
優(yōu)化模型：
- 使用 glTF-Sample-Models 中的模型測試
- 用 glTF-Pipeline 優(yōu)化模型
添加DRACO壓縮支持（如果模型很大）：
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/libs/draco/draco_decoder.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/libs/draco/draco_decoder_wasm_wrapper.js"></script>
然后在加載器中添加：
loader.setDRACOLoader(new THREE.DRACOLoader());
測試模型：
- 使用 glTF Viewer 驗證模型是否有效
注意：確保在服務(wù)器環(huán)境下運行（不能直接用
file://協(xié)議加載，因為瀏覽器安全限制）。推薦使用本地服務(wù)器：
- Python:
python -m http.server 8000- Node.js:
npx serve
這個實現(xiàn)包含完整的錯誤處理、自動縮放和交互功能，可直接使用。將你的GLB文件放入同一目錄后，打開HTML文件即可看到3D模型。
總結(jié)
到此這篇關(guān)于three.js加載三維GLB文件查看三維模型的文章就介紹到這了,更多相關(guān)three.js加載三維GLB文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS仿iGoogle自定義首頁模塊拖拽特效的方法,實例分析了頁面的布局及拖拽的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
用JS實現(xiàn)根據(jù)當前時間隨機生成流水號或者訂單號
本文通過實例代碼給大家介紹了基于JS實現(xiàn)根據(jù)當前時間隨機生成流水號或者訂單號的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
js 關(guān)于=+與+=日期函數(shù)使用說明(賦值運算符)
js 關(guān)于=+與+=日期函數(shù)使用說明(賦值運算符)，可以看下，就是一些運算符的使用，看哪個更適合你。2011-11-11
這篇文章主要介紹了ES7之Async/await的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
擴展IE中一些不兼容的方法如contains、startWith等等
擴展IE中一些不兼容的方法如contains方法、startWith方法等等，下面是具體的實現(xiàn)代碼，喜歡的朋友可以參考下2014-01-01
javascript 播放器 控制...2007-01-01
JavaScript實現(xiàn)電話號碼格式化的解法小結(jié)
在 JavaScript 編程中,經(jīng)常會遇到將給定數(shù)據(jù)轉(zhuǎn)換為特定格式的問題,本文為大家整理了一些常用方法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
Event Loop，簡單翻譯就是?事件循環(huán)，是 JS 語言下實現(xiàn)運行時的一個機制，這篇文章主要介紹了JS?中的?Event?Loop?的基本知識,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)小時鐘效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家介紹了JavaScript?弱引用強引用底層示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10