threejs 360全景代碼並解釋代碼元素意義
以下是一個簡單的Three.js 360全景演示，代碼裏有詳細註釋。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js 360全景演示</title>
<style>
/* 設置頁面元素樣式 */
body {
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 創建容器來顯示Three.js場景 -->
<div id="container"></div>
<!-- 引入Three.js庫 -->
<script src="https://dm.qunapu.com/threejs/build/three.min.js"></script>
<script>
// 獲取容器並設置寬高
var container = document.getElementById('container');
var width = window.innerWidth;
var height = window.innerHeight;
// 創建渲染器，設置渲染器寬高
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
// 創建場景
var scene = new THREE.Scene();
// 創建全景相機，設置fov為75，aspect比例為寬高比，near=0.1，far=1000
var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.set(0, 0, 0); // 設置相機位置
// 創建全景盒子
var box_geometry = new THREE.BoxGeometry(100, 100, 100, 6, 6, 6);
var box_material = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('pano.jpg'), side: THREE.BackSide });
var box = new THREE.Mesh(box_geometry, box_material);
scene.add(box);
// 渲染場景
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>代碼解釋：
1. `THREE.WebGLRenderer` 創建 Three.js 渲染器，並將其插入到頁面中的 `container` 容器中。
2. `THREE.Scene` 創建 Three.js 場景。
3. `THREE.PerspectiveCamera` 創建 Three.js 相機，FOV（視角）設置為 75 ，aspect 的寬高比為 `width / height`, near 為相機與屏幕的最近距離，far 為相機與屏幕的最遠距離。然後將相機設置到 (0,0,0)。
4. `THREE.TextureLoader` 加載全景圖片，`THREE.BoxGeometry` 創建一個包含 6 個面的純色立方體。`THREE.MeshBasicMaterial` 在這個方塊上透過材質放置全景，並使用 `THREE.BackSide` 將 texture 放置到背面。
5. `animate()` 創建一個函數來渲染每一幀，並遞歸調用它，渲染相機 position 在全景之中顯示的場景。
