以下是一个简单的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 在全景之中显示的场景。
专题推荐：