資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 Three.js 和 WebGL 構建互動式 3D 圖形應用程式
WebGL，或 Web 圖形庫，是一個強大的 JavaScript API，允許開發人員在 Web 瀏覽器中建立互動式 3D 圖形。藉助 Three.js 等庫，開發人員可以利用 WebGL 的功能在 Web 上構建令人驚歎的視覺體驗。在本文中，我們將探討 WebGL 的基礎知識，並學習如何使用 Three.js 和 JavaScript 建立互動式 3D 圖形。
瞭解 WebGL
WebGL 是一個基於 OpenGL ES 的低階 JavaScript API，OpenGL ES 是一個廣泛用於在嵌入式系統上渲染 2D 和 3D 圖形的標準。WebGL 將硬體加速圖形的功能引入 Web，使開發人員能夠建立沉浸式體驗，而無需外掛或其他軟體。
WebGL 的關鍵功能之一是能夠利用使用者裝置的 GPU（圖形處理單元）來執行復雜的計算和渲染任務。這允許即時渲染高質量的 3D 圖形，使 WebGL 成為遊戲、資料視覺化和虛擬現實體驗等應用程式的理想選擇。
Three.js 簡介
Three.js 是一個流行的 JavaScript 庫，它簡化了使用 WebGL 的過程。它在原始 WebGL API 上提供了更高級別的抽象，從而更容易建立和操作 3D 物件、應用紋理和材質、處理使用者互動以及執行動畫。
要開始使用 Three.js，您需要使用 <script> 標籤將庫包含在 HTML 檔案中。您可以從官方 Three.js 網站下載庫，或從 CDN（內容分發網路）包含它。讓我們來看一個使用 Three.js 建立 3D 立方體的簡單示例
要開始使用 Three.js，我們需要設定場景、攝像機和渲染器。以下示例演示了基本設定併為 3D 物件設定動畫
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://threejs.org/build/three.min.js"></script>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Set up the scene
const scene = new THREE.Scene();
// Set up the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// Set up the renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create a geometry (e.g., a cube)
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Animation loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
// Start the animation loop
animate();
});
</script>
</body>
</html>
說明
在上面的程式碼中，我們首先使用適當的 Three.js 類設定場景、攝像機和渲染器。我們建立一個透視攝像機，並將其放置在 3D 空間中的 (0, 0, 5) 位置。渲染器設定為使用 WebGL 進行渲染，並附加到 HTML body。
接下來，我們透過定義其幾何形狀和材質來建立一個立方體。使用 add 方法將立方體新增到場景中。
然後，我們定義一個 animate 函式，該函式將被遞迴呼叫以建立動畫迴圈。在函式內部，我們更新立方體在 X 和 Y 軸上的旋轉。最後，我們使用渲染器的 render 方法使用攝像機渲染場景。
以上程式碼將在螢幕上渲染一個旋轉的 3D 立方體。您可以修改立方體的屬性和動畫邏輯以建立各種 3D 效果。
探索 Three.js 功能
Three.js 提供了廣泛的功能和實用程式來建立複雜的 3D 圖形。讓我們探索一些最常用的功能，並瞭解它們的實際應用。
燈光和陰影
燈光對於建立逼真且視覺上吸引人的 3D 場景至關重要。Three.js 支援各種型別的燈光，例如環境光、方向光、點光源和聚光燈。可以對這些燈光進行定位、著色和控制以獲得所需的照明效果。
請考慮以下所示的程式碼。
// Set up the light const light = new THREE.PointLight(0xffffff, 1); light.position.set(5, 5, 5); scene.add(light); // Enable shadows renderer.shadowMap.enabled = true; cube.castShadow = true;
說明
在此示例中，我們建立了一個點光源並將其放置在場景中。燈光的顏色設定為白色（十六進位制程式碼 0xffffff），強度為 1。然後我們將燈光新增到場景中。
要啟用陰影，我們需要將 renderer.shadowMap.enabled 設定為 true。此外，我們將 cube.castShadow 設定為 true 以指示立方體應該投射陰影。
紋理和材質
紋理和材質為 3D 物件新增視覺細節。Three.js 支援各種型別的材質，包括基本材質、Lambert 材質、Phong 材質等。這些材質可以與紋理結合使用以建立逼真的表面。
請考慮以下所示的程式碼。
// Load the texture
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture.jpg');
// Create the material
const material = new THREE.MeshPhongMaterial({ map: texture });
說明
在此示例中，我們使用 TextureLoader 類從影像檔案載入紋理。然後將紋理分配給 MeshPhongMaterial 的 map 屬性，該屬性建立一個對燈光做出反應的光澤材質。
結論
WebGL 結合 Three.js 等庫的強大功能和簡單性，為在 Web 上建立互動式 3D 圖形開闢了無限可能。在本文中，我們介紹了 WebGL 的基礎知識，介紹了 Three.js 庫，並探討了其一些功能，包括建立物件、應用材質和紋理以及處理使用者互動。
隨著您深入研究 WebGL 和 Three.js，您將發現各種可能性，從複雜的遊戲開發到沉浸式的虛擬現實體驗。
421 次瀏覽
