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實(shí)現(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)建相機(jī)
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);
// 增強(qiáng)光照系統(tǒng)（關(guān)鍵：確保材質(zhì)細(xì)節(jié)可見）
// 環(huán)境光 - 提供基礎(chǔ)照明，避免完全黑暗區(qū)域
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8); // 提高強(qiáng)度到0.8
scene.add(ambientLight);
// 主方向光 - 提供主要照明和陰影
const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.2); // 提高強(qiáng)度
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)鍵：增強(qiáng)材質(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; // 增加一點(diǎn)距離
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; // 強(qiáng)制材質(zhì)更新
child.castShadow = true; // 啟用陰影投射
child.receiveShadow = true; // 啟用陰影接收
}
});
// 更新控制器目標(biāo)
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>
使用說明：
準(zhǔn)備GLB文件：
- 將你的GLB模型文件（例如
model.glb）放在HTML文件的同一目錄下 - 確保模型文件是有效的GLB格式（glTF的二進(jìn)制格式）
- 將你的GLB模型文件（例如
修改模型路徑：
- 在代碼中找到
const modelPath = 'model.glb'; - 如果模型在子目錄中，修改為
models/model.glb等路徑
- 在代碼中找到
關(guān)鍵功能說明：
- 自動縮放模型使其適應(yīng)視圖
- 添加了環(huán)境光和方向光使模型可見
- 使用OrbitControls實(shí)現(xiàn)鼠標(biāo)交互（旋轉(zhuǎn)/縮放/平移）
- 顯示加載進(jìn)度和錯誤提示
- 響應(yīng)窗口大小變化
常見問題解決：
- 模型不顯示：
- 檢查文件路徑是否正確
- 確保文件擴(kuò)展名是
.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 驗(yàn)證模型是否有效
注意：確保在服務(wù)器環(huán)境下運(yùn)行（不能直接用
file://協(xié)議加載，因?yàn)闉g覽器安全限制）。推薦使用本地服務(wù)器：
- Python:
python -m http.server 8000- Node.js:
npx serve
這個實(shí)現(xiàn)包含完整的錯誤處理、自動縮放和交互功能，可直接使用。將你的GLB文件放入同一目錄后，打開HTML文件即可看到3D模型。
總結(jié)
到此這篇關(guān)于three.js加載三維GLB文件查看三維模型的文章就介紹到這了,更多相關(guān)three.js加載三維GLB文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Select標(biāo)簽下拉列表二級聯(lián)動級聯(lián)實(shí)例代碼
這篇文章主要介紹了Select標(biāo)簽下拉列表二級聯(lián)動級聯(lián)實(shí)例代碼,需要的朋友可以參考下2014-02-02
JavaScript數(shù)組去重由慢到快由繁到簡(優(yōu)化篇)
本文給大家介紹通過indexof去重，hash去重，排序后去重及set去重由慢到快有繁到簡的方法給大家介紹了js數(shù)組去重的方法，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-08-08
原生js實(shí)現(xiàn)鍵盤控制div移動且解決停頓問題
這篇文章主要給大家介紹了如何利用原生js實(shí)現(xiàn)鍵盤控制div移動，并且解決在移動過程中的停頓問題，文中給出了詳細(xì)的示例代碼，相信對大家的理解和學(xué)習(xí)很有幫助，下面跟著小編一起來看看吧。2016-12-12
這篇文章主要向大家分享如何在fckeditor編輯器插入代碼操作，這里腳本之家小編就為大家分享一下啊2007-05-05
這篇文章主要介紹了package.json中homepage屬性的作用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
本篇文章主要是對懸浮數(shù)字的實(shí)現(xiàn)案例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
基于JavaScript實(shí)現(xiàn)驚艷的打字機(jī)效果
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript打造驚艷打字機(jī)效果,讓你的文字生動躍動,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
一般服務(wù)器獲取到日期都是中國標(biāo)準(zhǔn)時間，需要對其進(jìn)行格式化,這篇文章主要介紹了微信小程序服務(wù)器日期格式化問題，需要的朋友可以參考下2020-01-01
JavaScript中的this例題實(shí)戰(zhàn)總結(jié)詳析
使用JavaScript開發(fā)的時候,很多人多多少少都會被this的指向問題搞蒙圈,下面這篇文章主要給大家介紹了關(guān)于JavaScript中this例題實(shí)戰(zhàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
JavaScript實(shí)現(xiàn)模態(tài)框拖拽效果
這篇文章主要介紹了通過JavaScript實(shí)現(xiàn)模態(tài)框拖拽的效果，以及鼠標(biāo)松開，可以停止拖動模態(tài)框移動等功能，感興趣的小伙伴可以了解一下2021-12-12