一個簡單的threejs三維模型立方體

雲端運算與程式碼 2023年05月25日 00:09 928 訪客

以下是一個簡單的threejs三維模型立方體示例，創建了一個立方體並將其渲染到屏幕上：

一個簡單的threejs三維模型立方體第1张

<!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函數將場景渲染到屏幕上。

效果圖截圖：