3 步轻松生成 360 度全景图：技术小白也能化身摄影大神！

2023-12-23 22:40:07

准备工作：

使用数码相机或智能手机拍摄一组重叠的照片（至少 5 张）。
确保照片分辨率足够高。
下载并安装 Three.js 库。

第 1 步：创建 HTML 文件

新建一个 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <script src="three.min.js"></script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

第 2 步：创建 JavaScript 文件

在与 HTML 文件相同的目录下新建一个 JavaScript 文件，并添加以下代码：

// 获取容器元素
const container = document.getElementById('container');

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

// 创建纹理加载器
const loader = new THREE.TextureLoader();

// 加载图片并创建纹理
const images = [];
for (let i = 0; i < 6; i++) {
  images.push(loader.load(`image_${i}.jpg`));
}

// 创建几何体
const geometry = new THREE.SphereGeometry(5, 64, 32);

// 创建材质
const material = new THREE.MeshBasicMaterial({
  map: new THREE.CubeTextureLoader().load(images),
  side: THREE.BackSide
});

// 创建网格对象
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 渲染场景
function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();