一個簡單的threejs三維模型立方體
以下是一個簡單的threejs三維模型立方體示例，創建了一個立方體並將其渲染到屏幕上：
<!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 renderer = new THREE.WebGLRenderer();
//設置渲染器的大小
renderer.setSize(window.innerWidth, window.innerHeight);
//將渲染器添加到頁面上
document.body.appendChild(renderer.domElement);
//創建一個新的場景
var scene = new THREE.Scene();
//創建一個新的立方體網格
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
//將立方體網格添加到場景
scene.add(cube);
//設置照相機的位置和方向
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 3;
//創建一個運動循環來不斷更新場景和渲染器
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>解釋代碼元素：
1. 渲染器：首先我們需要一個渲染器，也就是THREE.WebGLRenderer對象。它可以將3D場景渲染到HTML5的canvas元素中。
2. 場景：然後我們需要一個場景，也就是THREE.Scene對象。它是包含著所有3D模型、燈光和其他對象的容器。
3. 網格：我們要在場景中添加一個3D對象，這裏我們使用THREE.Mesh對象。一個網格是由幾何體和一個材質組成的。我們首先使用THREE.BoxGeometry創建一個立方體幾何體，然後使用THREE.MeshBasicMaterial創建一個材質，並在創建一個具有幾何體和材質的網格。最後將網格添加到場景中。
4. 照相機：我們還需要一個照相機，也就是THREE.PerspectiveCamera對象。它定義了我們將要看到的3D場景的視口。
5. 運動循環：最後，我們需要一個循環來不停地更新場景和渲染器。我們使用requestAnimationFrame函數來請求瀏覽器在下次重繪幀之前調用animate函數。在animate函數中，我們更新網格的旋轉角度並使用renderer.render函數將場景渲染到屏幕上。
效果圖截圖：
