第170期：threejs实现全景效果-CFANZ编程社区

第170期：threejs实现全景效果_刷新页面

封面图

今天是5月12日，时间过的真快，不知不觉距离汶川地址发生已经15年了。

今天我们要实现的效果就是封面图所示的效果，也许我们在实际的工作过程当中不会用到这些内容，但是我们可以简单了解一下它的实现原理和过程。

首先我们需要一张全景图片，全景图片可以从网上找，如果你拍全景照片的设备的话，也可以自己拍摄一张，以什么方式获得全景图片并不重要，重要的是要有一张全景图片。

第170期：threejs实现全景效果_渲染器_02

有了全景图片之后我们就可以开始写代码了，按照基本的逻辑，创建场景、相机、渲染器、然后再向场景中添加道具, 再将渲染器的dom添加到页面中去，代码如下：

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


// 相机
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000)
camera.zoom = 1
// 更新投影矩阵
camera.updateProjectionMatrix();
camera.position.set(-0.87, 0.03, 0.4);
camera.lookAt(scene.position);

// 渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight)

onMounted(() => {
  house.value.appendChild(renderer.domElement)
})

根据以往的经验，此时刷新页面，页面上什么都没有因为我们只是创建了一个场景，还没有往场景中添加任何内容。

就好比我们要表演一个节目，我们只是把舞台先打扫干净，还没真正开始表演。

第170期：threejs实现全景效果_渲染器_03

接下来我们往场景中添加内容

const houseBox = new THREE.SphereGeometry(25, 50, 50)
const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  side: THREE.BackSide,
})
// 物体
const mesh = new THREE.Mesh(houseBox, material)
scene.add(mesh)

这里我们创建了一个半径为25的球形几何体，并且将它要使用的材质设置成了白色，此时我们刷新页面，会发现页面是一片空白

第170期：threejs实现全景效果_JavaScript_04

为什么会出现这种情况呢？原因很简单，因为还没有给这个球形几何体设置纹理贴图，加上下面的代码：

const texture = new THREE.TextureLoader().load('src/assets/00125.jpg', (obj) => {
  console.log('obj', obj)
  //render()
})
 mesh.material.map = texture

我们再刷新页面，发现已经能加载出房间的效果

第170期：threejs实现全景效果_JavaScript_05

但这个时候我们还不能用鼠标进行拖拽查看，这就需要我们再次用到轨道控制器OrbitControls进行控制，我们在代码中加入以下代码：

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// ...

var controls = new OrbitControls(camera, renderer.domElement);
controls.enablePan = false;

此时我们刷新页面，然后尝试用鼠标拖拽查看，发现已经可以进行拖拽查看了。

然后我们发现渲染出来的场景颜色跟我们的图片的颜色相比之下显得浅了不少，这个怎么处理呢？

我们加入下面的代码：

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'


// ...


let renderPass = new RenderPass(scene, camera) //渲染通道
let outLinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera)

var composer = new EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(outLinePass);

composer.render();

这里我们使用染器通道RenderPass指定了后期处理对应的相机camera和场景scene，然后给EffectComposer添加一个渲染器通道RenderPass和outLinePass。

此时我们刷新页面，效果和我们的全景图片就基本一致了

第170期：threejs实现全景效果_前端_06

至此，我们就基本上完成了封面图中的效果。

总结

实现这个效果的方法非常简单，找一张全景图片，创建场景、相机、渲染器、球形几何体，然后将全景图片设置为球形几何体的贴图，添加一下轨道控制器，添加一下渲染通道即可实现该效果。

其基本原理是：全景图片本质上是从不同角度拍摄的物体照片拼接而成的一张大照片，我们只需将相机摆在合适的角度进行观察即可。

后面稍微复杂一点的是如何实现室内的漫游效果，其实我们大致想一下，其实跟怕电影的原理差不多，给摄像机架设一条轨道即可。

那么如何架设这条轨道呢，架设这条轨道又需要哪些知识呢？后面我们接着学习吧