使用Three.js建立一個簡單的STL模型3D模型展示
更新於 發佈於 閱讀時間約 12 分鐘
這篇文章將教您如何使用Three.js來建立一個簡單的STL模型查看器，支援上傳STL檔案並即時顯示3D模型。本文將逐步分解完整範例程式碼，幫助您理解每個部分的功能。
成品預覽
使用者可以拖曳滑鼠來旋轉視角，並點擊頁面下方的上傳按鈕選擇STL檔案。選擇的模型會自動調整大小並置中，方便瀏覽。
HTML結構
首先，我們需要定義HTML頁面結構：
<!DOCTYPE html>
<html>
<head>
<title>STL Model Viewer</title>
<style>
body { margin: 0; overflow: hidden; }
#info {
position: absolute; top: 10px; width: 100%; text-align: center; color: white;
font-family: Arial; font-size: 18px; pointer-events: none;
}
#file-input {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
z-index: 100; padding: 10px; background: white; border-radius: 5px;
}
#loading {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
color: white; font-family: Arial; font-size: 20px; display: none;
}
#canvas-container { width: 100%; height: 100vh; background: #1a1a1a; }
</style>
</head>
<body>
<div id="info">STL模型查看器 - 使用滑鼠來控制視角</div>
<div id="loading">載入中...</div>
<input type="file" id="file-input" accept=".stl" />
<div id="canvas-container"></div>
</body>
</html>
這段程式碼定義了：
- 一個頁面標題與訊息欄位
#info。 - 檔案上傳按鈕
#file-input。 - 一個用於顯示模型的容器
#canvas-container。 - 一個載入中的提示訊息
#loading。
Three.js載入與初始化
接下來，我們使用Three.js建立3D渲染場景、相機與控制器：
// 初始化場景、相機和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.getElementById('canvas-container').appendChild(renderer.domElement);
這裡主要的步驟包括：
- 初始化
scene（場景），作為所有3D物件的容器。 - 建立
camera（相機），設定視野角度為75度，適合普通用途。 - 初始化
renderer（渲染器），並將畫布添加到#canvas-container中。
添加燈光與控制器
3D模型需要光照來呈現材質與細節，並透過控制器實現互動功能：
// 添加燈光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
// 軌道控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// 設定相機位置
camera.position.z = 5;
DirectionalLight 模擬來自單一方向的光源，AmbientLight 提供環境光以均勻照亮場景。OrbitControls 則允許使用者拖曳滑鼠控制視角。
載入STL檔案
實現STL檔案上傳與模型顯示是這個應用的核心部分：
const loader = new THREE.STLLoader();
let currentModel = null;
document.getElementById('file-input').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const loadingEl = document.getElementById('loading');
loadingEl.style.display = 'block';
const url = URL.createObjectURL(file);
if (currentModel) {
scene.remove(currentModel);
}
loader.load(url, function(geometry) {
const material = new THREE.MeshPhongMaterial({ color: 0xcccccc, specular: 0x111111, shininess: 200 });
const mesh = new THREE.Mesh(geometry, material);
geometry.computeBoundingBox();
const box = new THREE.Box3().setFromObject(mesh);
const center = box.getCenter(new THREE.Vector3());
const size = box.getSize(new THREE.Vector3());
const maxDim = Math.max(size.x, size.y, size.z);
const scale = 5 / maxDim;
mesh.scale.setScalar(scale);
mesh.position.sub(center.multiplyScalar(scale));
scene.add(mesh);
currentModel = mesh;
loadingEl.style.display = 'none';
URL.revokeObjectURL(url);
}, function(xhr) {
const percent = (xhr.loaded / xhr.total * 100).toFixed(0);
loadingEl.textContent = `載入中... ${percent}%`;
}, function(error) {
console.error(error);
loadingEl.textContent = '載入失敗';
setTimeout(() => loadingEl.style.display = 'none', 2000);
});
}
});
動畫與視窗大小調整
為了持續渲染與適應視窗大小，我們添加動畫函式與resize監聽器：
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
總結
完成以上所有步驟後，您將擁有一個簡單卻功能齊全的STL模型查看器。這個範例結構清晰且易於擴展，可以加入更多功能，例如材質選擇、模型保存等。希望這篇文章對您學習Three.js開發3D應用有所幫助！
67會員
124內容數
這裡將以輕鬆風格，深入探討程式設計的基礎和高級概念。從程式語言到演算法，我們將以易懂的方式解釋每個主題，讓你輕鬆掌握。無論你是初學者或有經驗者，都能在這裡找到適合你的內容。無論你的目標是成為專業開發者還是擴展知識，我們都會陪伴你一同成長！
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件，包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化，幫助開發者提高工作效率，適合希望深入瞭解前端開發和網站架構的讀者。
※ 視圖模板
視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。
編輯器 VS CODE
框架 VUE3
打包工具 VITE
編碼風格 Standard
環境 version
{
"nodejs":"v18.18.0",
"npm":"9.8.1"
}
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
這章帶大家Unity的導覽，還有一些基本操作吧
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件，包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化，幫助開發者提高工作效率，適合希望深入瞭解前端開發和網站架構的讀者。
※ 視圖模板
視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。
編輯器 VS CODE
框架 VUE3
打包工具 VITE
編碼風格 Standard
環境 version
{
"nodejs":"v18.18.0",
"npm":"9.8.1"
}
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
這章帶大家Unity的導覽，還有一些基本操作吧