1. Python技术站首页
  2. 其他
  3. JavaScript

Three.js 进阶之旅：全景漫游-初阶移动相机版

• JavaScript

Three.js 进阶之旅：全景漫游-初阶移动相机版

声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。

摘要

3D 全景技术可以实现日常生活中的很多功能需求，比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的，当然了目前已经有很多相关内容的文章，我之前就写过一篇《Three.js 实现3D全景侦探小游戏》。因此本文内容及此专栏下一篇文章讨论的重点不是如何实现 3D 全景图功能，而是如何一步步优雅实现在多个3D全景中穿梭漫游，达到如在真实世界中前进后退的视觉效果。

全景漫游系列文章将分为上下两篇，本篇内容我们先介绍如何通过移动相机的方法来达到场景切换的目的。通过本文的学习，你将学到的知识点包括：在 Three.js 中创建全景图的几种方式、在 3D 全景图中添加交互热点、利用 Tween.js 实现相机切换动画、多个全景图之间的切换等。

效果

本文最终将实现如下的效果，左右控制鼠标旋转屏幕可以预览室内三维全景图，同时全景图内有多个交互热点，它们标识着三维场景内的一些物体，比如沙发 ? 、电视机 ? 等，交互热点会随着场景的旋转而旋转，点击热点 ? 可以弹出交互反馈提示框。

Three.js 进阶之旅：全景漫游-初阶移动相机版

点击屏幕上有其他场景名称的按钮比如 客厅、卧室、书房 时，可以从当前场景切换到目标场景全景图，交互热点也会同时切换。

Three.js 进阶之旅：全景漫游-初阶移动相机版

打开以下链接，在线预览效果，大屏访问效果更佳。

本专栏系列代码托管在 Github 仓库【threejs-odessey】，后续所有目录也都将在此仓库中更新。

? 代码仓库地址：git@github.com:dragonir/threejs-odessey.git

原理

我们先来简单总结下在 Three.js 中实现三维全景功能的有哪些方式：

球体

在球体内添加 HDR 全景照片可以实现三维全景功能，全景照片是一张用球形相机拍摄的图片，如下图所示：

const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(- 1, 1, 1);
const texture = new THREE.TextureLoader().load( 'textures/hdr.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Three.js 进阶之旅：全景漫游-初阶移动相机版

? 球体全景图 Three.js 官方示例

立方体

在立方体内添加全景图贴图的方式也可以实现三维全景图功能，此时需要对 HDR 全景照片进行裁切，分割成 6 张来分别对应立方体的 6 个面。

const textures = cubeTextureLoader.load([
  '/textures/px.jpg',
  '/textures/nx.jpg',
  '/textures/py.jpg',
  '/textures/ny.jpg',
  '/textures/pz.jpg',
  '/textures/nz.jpg'
]);

const materials = [];
for ( let i = 0; i < 6; i ++ ) {
  materials.push( new THREE.MeshBasicMaterial( { map: textures[ i ] } ) );
}
const skyBox = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), materials );
skyBox.geometry.scale( 1, 1, - 1 );
scene.add( skyBox );

Three.js 进阶之旅：全景漫游-初阶移动相机版

? 立方体全景图 Three.js 官方示例

环境贴图

使用环境贴图也可以实现全景图功能，像下面这样加载全景图片，然后将它赋值给 scene.background 和 scene.environment 即可：

const environmentMap = cubeTextureLoader.load([
    '/textures/px.jpg',
    '/textures/nx.jpg',
    '/textures/py.jpg',
    '/textures/ny.jpg',
    '/textures/pz.jpg',
    '/textures/nz.jpg'
]);
environmentMap.encoding = THREE.sRGBEncoding;
scene.background = environmentMap;
scene.environment = environmentMap;

? 具体原理和实现方式就不详细介绍了，可查看我往期的文章《Three.js 进阶之旅：多媒体应用-3D Iphone》，环境贴图段落中有详细实现介绍。

其他

除了使用 Three.js 自己实现全景图功能之外，也有一些其他功能完备的全景图库可以很方便的实现三维全景场景，比如下面几个就比较不错，其中后两个是 GUI 客户端，可以在客户端内非常方便的在全景图上添加交互热点、实现多个场景的漫游路径等，大家感兴趣的话都可以试试。

Three.js 进阶之旅：全景漫游-初阶移动相机版

工具

全景图生成工具

  • 使用球形全景相机拍摄。
  • 使用 Blender 等建模软件相机 360 度旋转渲染。

全景图编辑工具

下面两个网站提供丰富的三维全景背景照片及将 hdr 图片裁切成上述需要的 6 张贴图的能力，大家可以按自己需要下载和编辑。

? HDR全景背景照片下载网站：polyhaven

Three.js 进阶之旅：全景漫游-初阶移动相机版

? HDR立方体材质转换工具：HDRI-to-CubeMap

Three.js 进阶之旅：全景漫游-初阶移动相机版

实现

现在，我们使用第一种球体 ⚪ 全景图的方式，来实现示例中介绍的内容。

〇 场景初始化

创建全景图前先做一些常规三维场景准备工作，由于三维全景图功能并不会涉及到新的技术点，因此像下面这样简单实现就可以。

<canvas class="webgl"></canvas>

在文件顶部引入以下资源，其中 OrbitControls 用于旋转全景图时的镜头鼠标控制；TWEEN 用于创建流程的场景切换动画，Animations 是使用 TWEEN 来控制摄像机和控制器切换的方法的封装，可以快速实现镜头的丝滑切换；rooms 是自定义的一个数组，用来保存多个全景图的信息。

import * as THREE from 'three';
import { OrbitControls } from '@/utils/OrbitControls.js';
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js';
import Animations from '@/utils/animations';
import { rooms } from '@/views/home/data';

然后初始化渲染器、场景、相机、控制器、页面缩放适配、页面重绘动画等。

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

// 初始化渲染器
const canvas = document.querySelector('canvas.webgl');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// 初始化场景
const scene = new THREE.Scene();

// 初始化相机
const camera = new THREE.PerspectiveCamera(65, sizes.width / sizes.height, 0.1, 1000);
camera.position.z = data.cameraZAxis;
scene.add(camera);

// 镜头控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);

// 页面缩放监听
window.addEventListener('resize', () => {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;
  // 更新渲染
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  // 更新相机
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();
});

// 动画
const tick = () => {
  controls && controls.update();
  TWEEN && TWEEN.update();
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick);
};
tick();

① 创建一个球体

现在，像下面这样，我们往场景中添加一个三维球体 ⚪，作为第一个全景图的载体。其中 THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength) 接收 7 个参数，我们使用前 3 个参数半径、经度上的面数切片数、纬度上的切片数即可，数值可按自己的需求自行调整。

const geometry = new THREE.SphereGeometry(16, 256, 256);
const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
});
const room = new THREE.Mesh(geometry, material);
scene.add(room);

Three.js 进阶之旅：全景漫游-初阶移动相机版

② 创建全景图

现在我们对球体进行全景图片贴图，并将 side 属性设置为 THREE.DoubleSide 或者 THREE.BackSide 然后通过设置 geometry.scale(1, 1, -1) 将球体内外翻转，就能得到下面所示的效果。

const geometry = new THREE.SphereGeometry(16, 256, 256);
const material = new THREE.MeshBasicMaterial({
  map: textLoader.load(map),
  side: THREE.DoubleSide,
});
geometry.scale(1, 1, -1);
const room = new THREE.Mesh(geometry, material);

Three.js 进阶之旅：全景漫游-初阶移动相机版

此时，我们通过鼠标放大球体，进入到球体内部，上下左右旋转球体，就能观察到全景效果了。

Three.js 进阶之旅：全景漫游-初阶移动相机版

③ 创建其他场景的全景图

对于数量较少，简单的场景我们可以创建多个球体全景图来实现，这种方式虽然笨重，但是控制多个场景很方便，代码也非常容易理解，下篇文章将通过另一种更优雅的方式来实现多个全景图场景，以适应更加复杂的需求。

我们先对创建球体 ⚪ 全景图的方法加以封装，通过 createRoom 方法批量创建多个全景图场景，它接收的名称 name、位置 position 以及 贴图 map 三个参数是通过上述引入的 rooms 数值配置的。

const createRoom = (name, position, map) => {
  const geometry = new THREE.SphereGeometry(16, 256, 256);
  geometry.scale(1, 1, -1);
  const material = new THREE.MeshBasicMaterial({
    map: textLoader.load(map),
    side: THREE.DoubleSide,
  });
  const room = new THREE.Mesh(geometry, material);
  room.name = name;
  room.position.set(position.x, position.y, position.z);
  room.rotation.y = Math.PI / 2;
  scene.add(room);
  return room;
};

// 批量创建
rooms.map((item) => {
  const room = createRoom(item.key, item.position, item.map);
  return room;
});

我们按房间位置的和贴图的配置，创建如下所示的三个房间客厅、卧室和书房。

Three.js 进阶之旅：全景漫游-初阶移动相机版

④ 限制旋转角度

根据自己的需求，我们可以对镜头控制器 ? 做以下限制，比如开启转动惯性、禁止整个场景通过鼠标右键发生平移、设置缩放的最大级别防止暴露出球体、限制垂直方向旋转等，以增强用户体验。

// 转动惯性
controls.enableDamping = true;
// 禁止平移
controls.enablePan = false;
// 缩放限制
controls.maxDistance = 12;
// 垂直旋转限制
controls.minPolarAngle = Math.PI / 2;
controls.maxPolarAngle = Math.PI / 2;

Three.js 进阶之旅：全景漫游-初阶移动相机版

⑤ 实现多个场景穿梭漫游

本文中实现多个场景穿梭漫游的方法原理：主要是通过移动相机和控制器的中点位置来实现的，我们先用用于生成多个场景的 rooms 数值在页面上添加一些表示切换房间的按钮，点击按钮时拿到需要跳转的目标场景信息，然后通过 Animations.animateCamera 方法将像机和控制器从当前位置平滑移动到目标位置。

// 点击切换场景
const handleSwitchButtonClick = async (key) => {
  const room = rooms.filter((item) => item.key === key)[0];
  if (data.camera) {
    const x = room.position.x;
    const y = room.position.y;
    const z = room.position.z;
    Animations.animateCamera(data.camera, data.controls, { x, y, z: data.cameraZAxis }, { x, y, z }, 1600, () => {});
    data.controls.update();
  }
};

其中 Animations.animateCamera 方法是使用 TWEEN.js 封装的一个移动相机 ? 和控制器 ? 的方法，使用它可以实现丝滑的镜头补间动画，不仅可以像本文中这样来实现多个场景的切换，还可以实现像镜头从远处拉近、点击交互点后镜头聚焦放大到某个局部，镜头场景巡航等效果。完整代码可以查看本篇文章的示例代码：

animateCamera: (camera, controls, newP, newT, time = 2000, callBack) => {
  const tween = new TWEEN.Tween({
    x1: camera.position.x, // 相机x
    y1: camera.position.y, // 相机y
    z1: camera.position.z, // 相机z
    x2: controls.target.x, // 控制点的中心点x
    y2: controls.target.y, // 控制点的中心点y
    z2: controls.target.z, // 控制点的中心点z
  });
  tween.to(
    {
      x1: newP.x,
      y1: newP.y,
      z1: newP.z,
      x2: newT.x,
      y2: newT.y,
      z2: newT.z,
    },
    time,
  );
  // ...
}

Three.js 进阶之旅：全景漫游-初阶移动相机版

⑥ 添加交互点

场景漫游穿梭的功能已经实现了，现在我们来在全景场景中添加一些交互热点 ✨，用于实现场景物体标注和鼠标点击交互，比如我们在这个示例中，在客厅中添加了 电视机?、沙发?、冰箱❄️ 等交互点，我们可以现在创建场景的数组中添加这些交互点的信息 interactivePoints，以方便批量创建，根据自己的需求我们可以添加一些可选的配置参数，本文中的参数含义分别是：

  • key：唯一标识符。
  • value：显示名称。
  • description：描述文案。
  • cover：配图。
  • position：在三维空间中的位置。
const rooms = [
  {
    name: '客厅',
    key: 'living-room',
    map: new URL('@/assets/images/map/map_living_room.jpg', import.meta.url).href,
    position: new Vector3(0, 0, 0),
    interactivePoints: [
      {
        key: 'tv',
        value: '电视机',
        description: '智能电视',
        cover: new URL('@/assets/images/home/cover_living_room_tv.png', import.meta.url).href,
        position: new Vector3(-6, 2, -8),
      },
      // ...
    ],
  },

然后在页面上利用 rooms 数组的 interactivePoints 来批量创建交互点的 DOM 节点：

<div
  class="point"
  v-for="(point, index) in interactivePoints"
  :key="index"
  :class="[`point-${index}`, `point-${point.key}`]"
  @click="handleReactivePointClick(point)"
  v-show="point.room === data.currentRoom"
>
  <div class="label" :class="[`label-${index}`, `label-${point.key}`]">
    <label class="label-tips">
      <div class="cover">
        <i
          class="icon"
          :style="{
            background: `url(${point.cover}) no-repeat center`,
            'background-size': 'contain',
          }"
        ></i>
      </div>
      <div class="info">
        <p class="p1">{{ point.value }}</p>
        <p class="p2">{{ point.description }}</p>
      </div>
    </label>
  </div>
</div>

用样式表把交互点设置成自己喜欢的样式 ? ，需要注意的一点是，交互点 ? 初始的样式中设置了 transform: scale(0, 0)， 即它的宽高都为 0，是隐藏看不见的，这样设置的目的是为了实现只有交互点出现在相机可视区域时才显示在场景中，其他转动到相机背面时应该隐藏掉。当交互点被添加 .visible 类时，交互点变为显示状态。本示例中还使用交互点内 .label::before、.label::after等伪元素和子元素添加了一些波纹扩散动画及其其他文案信息等。

.point
  position: fixed
  top: 50%
  left: 50%
  .label
    position: absolute
    &::before, &::after
      display inline-block
      content ''
    &::before
      animation: bounce-wave 1.5s infinite
    &::after
      animation: bounce-wave 1.5s -0.4s infinite
    .label-tips
      height 88px
      width 200px
      position absolute
  &.visible .label
    transform: scale(1, 1)

? 隐藏显示的交互也可以通过 display:none、visibility:hidden、及使用 js 变量控制元素隐藏显示等方式来实现。

创建完交互点 ? 元素之后，我们还需要在页面重绘方法 tick() 中像下面这样添加一个方法，来将交互点显示在三维场景中，并根据与相机的关系来控制每个交互点的显示与隐藏，原理是使用 THREE.Raycaster 来检测元素是否被遮挡：

const raycaster = new THREE.Raycaster();

const tick = () => {
  for (const point of _points) {
    // 获取2D屏幕位置
    const screenPosition = point.position.clone();
    const pos = screenPosition.project(camera);
    raycaster.setFromCamera(screenPosition, camera);
    const intersects = raycaster.intersectObjects(scene.children, true);
    if (intersects.length === 0) {
      // 未找到相交点，显示
      point.element.classList.add('visible');
    } else {
      // 获取相交点的距离和点的距离
      const intersectionDistance = intersects[0].distance;
      const pointDistance = point.position.distanceTo(camera.position);
      // 相交点距离比点距离近，隐藏；相交点距离比点距离远，显示
      intersectionDistance < pointDistance
        ? point.element.classList.remove('visible')
        : point.element.classList.add('visible');
    }
    pos.z > 1
      ? point.element.classList.remove('visible')
      : point.element.classList.add('visible');
    const translateX = screenPosition.x * sizes.width * 0.5;
    const translateY = -screenPosition.y * sizes.height * 0.5;
    point.element.style.transform = `translateX(${translateX}px) translateY(${translateY}px)`;
  }
  // ...
};

? 关于使用 Raycaster 来检测元素是否被遮挡的详细介绍，可以看看我的这篇文章《Three.js 打造缤纷夏日3D梦中情岛》。

Three.js 进阶之旅：全景漫游-初阶移动相机版

⑦ 页面优化和加载进度管理

最后，因为创建多个三维全景图场景需要加载很多张图片，而且全景图的图片一般比较大，我们可以预先加载完所有图片后再进行渲染，本文使用的是自己添加的一个预加载方法，也可以使用像 preload.js 等其他库来预加载图片。除了加载进度显示之外，现实开发场景中应该还有很多个性化的需求，比如可以在点击交互点的时候弹出一个详细弹窗、点击电视的时候开始播放一段视频、点击沙发的时候镜头聚焦放大到沙发、点击开关的时候变为夜间模式……这些交互的原理和本文中的交互点是差不多的 ?。

Three.js 进阶之旅：全景漫游-初阶移动相机版

? 源码地址： https://github.com/dragonir/threejs-odessey

总结

本文中主要包含的知识点包括：

  • 在 Three.js 中实现全景图的原理和多种实现方式。
  • 与全景图相关的生成工具、编辑工具的使用。
  • 创建多个全景图并实现多个场景间的漫游穿梭功能。
  • 在三维全景图中添加交互热点。

本文到这里就结束了，本文中通过移动相机镜头和控制的方法来实现几个全景图之间漫游穿梭效果还是不错的，但是它的缺点也是很明显的，就是当全景场景数量特别多时，就需要创建非常多的球体，此时计算出每个场景的位置非常困难，并且会造成页面性能耗损问题，因此需要进行优化。下篇文章将会介绍另一种更加优雅的方式来实现全景图之间的漫游功能，过渡动画也会更加流畅丝滑。

想了解其他前端知识或其他未在本文中详细描述的Web 3D开发技术相关知识，可阅读我往期的文章。如果有疑问可以在评论中留言，如果觉得文章对你有帮助，不要忘了一键三连哦 ?。

附录

参考

本文作者：dragonir 本文地址：https://www.cnblogs.com/dragonir/p/17263717.html

原文链接：https://www.cnblogs.com/dragonir/p/17263717.html

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Three.js 进阶之旅：全景漫游-初阶移动相机版 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年4月18日
下一篇 2023年4月18日

相关文章

  • JavaScript数组方法实例详解

    关于“JavaScript数组方法实例详解”的攻略，我来为你详细讲解一下。 目录 JavaScript数组方法介绍 JavaScript数组方法实例详解 1. push() 方法 2. pop() 方法 结语 JavaScript数组方法介绍 JavaScript 中的数组是一种特殊的对象，它可以存储多个值，并且可以方便地进行增删改查等操作。在 JavaSc…

    JavaScript 2023年5月27日
    00

  • 微信小程序发布新版本时自动提示用户更新的方法

    下面是关于微信小程序发布新版本时自动提示用户更新的方法的完整攻略： 1. 使用微信官方提供的更新方法 微信官方提供了一个检查更新的API，可以轻松地实现版本检查功能，并自动提示用户更新。具体步骤如下： 在app.js文件中使用wx.getUpdateManager()方法获取小程序更新管理器实例。 javascript const updateManager…

    JavaScript 2023年6月10日
    00

  • JS Map 和 List 的简单实现代码

    当我们在使用JavaScript的时候，有时候需要使用一些数据类型来进行操作和处理。在这些数据类型中，Map和List就是两个常用的数据类型之一。 什么是Map和List 在JavaScript中，Map是一种用于存储键值对的集合。Map中的键可以是任意类型的值，如字符串、数字甚至是对象，同样的值可以对应于不同的键。而List则是一种由一列元素组成的有序集合…

    JavaScript 2023年6月10日
    00

  • 在js代码拼接dom对象到页面上的模板总结

    以下是详细讲解“在js代码拼接dom对象到页面上的模板总结”完整攻略。 1. 概述 在JS中，我们可以通过代码创建DOM元素，并将其添加到HTML页面上。当我们需要动态地生成并添加HTML元素时，也可以使用JS动态操作DOM元素。通常，我们通过一个JS函数来实现此功能，具体有以下几种实现方式： 使用innerHTML属性 使用createElement方法 …

    JavaScript 2023年6月10日
    00

  • 详解JavaScript Promise和Async/Await

    详解JavaScript Promise和Async/Await Promise的基础知识 Promise的概念 Promise是ES6中新增的一种异步编程解决方案，它以更优雅、更易维护的方式解决了回调地狱的问题。Promise相当于一个容器，异步操作返回的结果会被Promise包装起来并保证异步操作的状态。 Promise的三种状态 在Promise中异步…

    JavaScript 2023年5月28日
    00

  • 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    针对“解决js页面滚动效果scrollTop在Firefox与Chrome浏览器间的兼容问题”的问题，以下是完整的攻略： 问题描述 在开发网站过程中，经常会遇到使用JavaScript实现页面滚动效果时，在不同浏览器下滚动条的scrollTop属性值不同的兼容性问题，尤其是在Chrome与Firefox浏览器上。 解决方法 使用jQuery的.scrollT…

    JavaScript 2023年6月11日
    00

  • JavaScript DOM节点添加示例

    当我们需要对网页中的元素进行动态的增删改时，JavaScript就是我们的好帮手之一。在JavaScript中，通过操作网页文档的对象模型（DOM）来实现对页面元素的增删改查。其中节点的添加，是常用的一种操作。 添加DOM节点的方法 在JavaScript中，有多种方式可以添加DOM节点，以下是其中的两种： 1. createElement()方法 crea…

    JavaScript 2023年6月10日
    00

  • JS使用ajax方法获取指定url的head信息中指定字段值的方法

    要使用JS获取指定URL的Head信息中指定字段值，需要使用Ajax方法，具体操作流程如下： 创建XMLHttpRequest对象 XMLHttpRequest对象是用于在后台与服务器交换数据的核心技术之一，能够在不刷新页面的情况下更新网页的局部信息。 const xhr = new XMLHttpRequest(); 用open方法指定请求信息 open方…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部