一個基本的three.js三維場景立方體
以下是一個基本的three.js三維場景，使用HTML和JavaScript編寫。下面的代碼創建了一個簡單的立方體並呈現在窗口中：
<!DOCTYPE html>
<html>
<head>
<title>Three.js Demo</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src="https://dm.qunapu.com/threejs/build/three.min.js"></script>
<script>
// 創建場景
var scene = new THREE.Scene();
// 創建相機
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 創建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 創建立方體
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 設置相機位置
camera.position.z = 5;
// 渲染場景
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
在這個例子中，我們創建了一個簡單的場景，其中包含一個綠色立方體並通過渲染器呈現在窗口中。下面是代碼中的每個組件的解釋：
- `THREE.Scene()`: 用於創建場景對象。
- `THREE.PerspectiveCamera(fov, aspect, near, far)`: 用於創建透視投影相機。fov參數是相機的視角，aspect參數是視口的寬高比，near參數是相機到近平面的距離，far參數是相機到遠平面的距離。
- `THREE.WebGlRenderer()`: 用於創建WebGL渲染器，它將呈現場景和相機中的三維對象。
- `THREE.BoxGeometry()`: 用於創建一個立方體幾何體對象，它由6個面組成。
- `THREE.MeshBasicMaterial({ color: 0x00ff00 })`: 用於創建mesh基礎材質對象，可以設置顏色或貼圖等特性。
- `THREE.Mesh(geometry, material)`: 用於將幾何體與材質組合成一個mesh對象。
- `scene.add(cube)`: 將mesh對象添加到場景中。
- `camera.position.z = 5`: 將相機的z軸位置設置為5，使其與立方體的距離為5個單位長度。
- `renderer.render(scene, camera)`: 這是我們常規地將場景和鏡頭傳遞給渲染器來呈現場景的方式。
- `animate()`: 創建一個遞歸調用函數，在渲染每一幀時可以執行額外的邏輯代碼。在這個例子中，我們旋轉立方體並再次渲染場景的方法。
上面這些代碼將顯示一個綠色的立方體，並且當您在窗口中轉動時，立方體也會相應地旋轉。註意，示例僅用於顯示基本用例，three.js具有更廣泛的工具箱，可以使用光源、紋理、動畫、特效等擴展示例。
效果圖截圖：
