Three.js 進階之旅：全景漫游-高階版在線看房 🏡

宣告：本文涉及圖文和模型素材僅用于個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為，

摘要

專欄上篇文章《Three.js 進階之旅：全景漫游-初階移動相機版》中通過創建多個球體全景場景并移動相機和控制器的方式實作了多個場景之間的穿梭漫游，這種方式的缺點也是顯而易見的，隨著全景場景的增加來創建對應數量的球體，使得空間關系計算難度提升，并且大幅降低瀏覽器渲染行性能，在上一篇文章的基礎上，本文通過以下幾點對全景功能加以優化，最后實作一個可以應用到實際專案中的在線看房案例，通過閱讀本文和實踐案例，你將學到的知識包括：使用 Three.js 用新的技術思路實作多個場景的加載和場景間的絲滑過渡切換、隨著空間一直和角度實時變化的房源小地圖、在全景場景中添加如地面指引、空間物體展示、房間標注等多種型別的互動熱點等，

效果

我們先來看看本文在線看房案例的最終實作效果，頁面主體由代表多個房間的全景圖 ?? 、全景空間中的用于標識物體的互動熱點 ?? 、顯示房間名稱的空間熱點 ??? 、用于地面前進指引的互動熱點 ?? 、固定在側邊的房間切換按鈕 ?? 以及右上側的房間小地圖 ?? 構成，左右拖動頁面可以進行當前房間的全景預覽，同時小地圖上的錨點旋轉角度和位置也根據當前房間的位置和旋轉角度的變化而變化，使用滑鼠滾輪或觸摸板放大縮小頁面可以查看房間全景圖的整體和區域細節，

點擊地面前進指引標記熱點或空間中的房間名標簽熱點、以及固定在右邊的房間名按鈕時可以絲滑切換到對應的房間，固定在右側的按鈕和空間中的房間名標簽之間相互聯動，當頁面視區無法看到空間中的房間名標簽時，它會自動固定到右側按鈕處，點擊房間中的物體標識熱點可以與之產生互動，

打開以下鏈接，在線預覽效果，gif 造成丟幀和畫質損失，在線大屏訪問效果更佳，

• ????? 在線預覽地址：https://dragonir.github.io/panorama-advanced/

本專欄系列代碼托管在 Github 倉庫【threejs-odessey】，后續所有目錄也都將在此倉庫中更新，

?? 代碼倉庫地址：[email protected]:dragonir/threejs-odessey.git

原理

對比上篇有哪些優化點

看完本文在線看房案例，我們先來總結下本文在上篇文章示例的基礎上，做了哪些優化？下圖幾個標注點對應本文實作的一些新的功能和優化，通過以下幾點的實作可以提升多個全景場景漫游專案的加載渲染性能和用戶體驗，

• ①：是指使用新的技術思路加載多個全景圖場景，并使用著色器實作多個場景之間的優雅過渡，
• ②：是用于標注室內物體的空間互動熱點，點擊可以實作互動，
• ③：是固定于頁面側邊的切換空間按鈕，只有懸浮在空間中的房間標簽④看不見的時候，對應的房間切換按鈕才會顯示，
• ④：是懸浮在空間中的房間標簽，當旋轉場景看不見它的時候，它會固定到③處，形成空間的標簽和固定在側邊的標簽之間是相互聯動的視覺效果，
• ⑤：是地面場景切換指引熱點，點擊地面的熱點可以切換到下個場景，視覺上形成在空間中前進的效果，
• ⑥：是表示整個房子的小地圖，在全景空間中旋轉或者全景漫游時，圖中的錨點的方向和位置會對應改變，

房間場景切換原理

上篇文章示例我們通過創建多個球體移動相機和控制器的方式實作多個全景場景之間的漫游，而這篇文章中，我們將通過創建多個場景的方式，來實作兩個全景場景之間的過渡漫游效果，

實作原理示意圖如下所示，頁面總共將創建 3 個場景，origin 表示當前場景，destination 表示目標場景，利用當前場景和目標場景合成用于展示過渡效果的 transition 過渡場景，當點擊切換房間按鈕時，三個場景的加載順便分別為 origin -> transition -> destiontion，由此在視覺上形成從上個房間切換到下個房間并且伴隨漸變過渡的場景漫游效果，

實作

對應上面幾個優化點及多個場景的切換原理，我們現在來一步步實作本文中的案例：

〇 場景初始化

<canvas ></canvas>

我們先來看看頁面使用了哪些資源，OrbitControls 是鏡頭軌道控制器，可以在全景圖場景中使用滑鼠進行旋轉和放大縮小；TWEEN 和 Animations 用于實作一些鏡頭補間影片效果；rooms, markers, roomLabels 是自定義的資料，分別表示房間資訊、房間地面前進指引標記物和房間名稱熱點標記物；fragment 和 vertex 是用于實作原始場景和目標場景切換的影片過渡效果；TinyMap 是和當前房間位置和鏡頭旋轉方向同步的小地圖組件，

import * as THREE from 'three';
import { OrbitControls } from '@/utils/OrbitControls.js';
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js';
import { rooms, markers, roomLabels } from '@/views/home/data';
import fragment from '@/shaders/cross/fragment.js';
import vertex from '@/shaders/cross/vertex.js';
import Animations from '@/utils/animations';
import TinyMap from '@/components/TinyMap.vue';

初始化 Three.js 構建三維場景的渲染器、場景、相機、控制器等基本元素，需要注意的是這次把場景命名為原場景 sceneOrigin，因為后續還要場景多個場景，通過多個場景間的影片過渡效果，實作各個房間全景圖之間的穿梭漫游效果，

// 定義頁面尺寸
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 sceneOrigin = new THREE.Scene();

// 初始化相機
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.001, 1000);
camera.position.set(0, 16, 16);

// 鏡頭滑鼠控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 頁面縮放事件監聽
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(sceneOrigin, camera);
  requestAnimationFrame(tick);
};

① 加載多個全景場景和全景漫游過渡

多個全景場景加載

現在來看看具體代碼實作：創建原場景，并添加一個球體 ?? 作為當前房間的全景圖；創建目標場景，并添加一個球體 ?? 作為目標場景的全景圖；創建過渡場景，并添加一個平面幾何體 ? 到其中，該平面將用于展示原場景和目標場景之間的過渡效果，幾何體采用 ShaderMaterial 著色器材質，并具有 progress、sceneOrigin、sceneDestination 三個由 JavaScript 傳遞到著色器的統一變數 uniforms，同時并創建了一個用于顯示過渡場景的 OrthographicCamera 正交相機，

// 創建原場景
const sceneOrigin = new THREE.Scene();
const sphereGeometry = new THREE.SphereGeometry(16, 128, 128);
sphereGeometry.scale(1, 1, -1);
const originMesh = new THREE.Mesh(sphereGeometry, new THREE.MeshBasicMaterial({
  map: mapOrigin,
  side: THREE.DoubleSide,
}));
originMesh.rotation.y = Math.PI / 2;
sceneOrigin.add(originMesh);

// 創建目標場景
const sceneDestination = new THREE.Scene();
const destinationMesh = new THREE.Mesh(sphereGeometry, new THREE.MeshBasicMaterial({
  map: mapDestination,
  side: THREE.DoubleSide,
}));
destinationMesh.rotation.y = Math.PI / 2;
sceneDestination.add(destinationMesh);
data.sceneDestination = sceneDestination;

const textureDestination = new THREE.WebGLRenderTarget(sizes.width, sizes.height, {
  format: THREE.RGBAFormat,
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
});

// 創建過渡場景
const sceneTransition = new THREE.Scene();
const finalMesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), new THREE.ShaderMaterial({
  extensions: {
    derivatives: "#extension GL_OES_standard_derivatives : enable",
  },
  side: THREE.DoubleSide,
  uniforms: {
    progress: { value: 0 },
    sceneOrigin: { value: null },
    sceneDestination: { value: null },
  },
  vertexShader: vertex,
  fragmentShader: fragment,
}));
sceneTransition.add(finalMesh);

// 創建過渡正交相機
let frustumSize = 1;
const cameraTransition = new THREE.OrthographicCamera(frustumSize / -2, frustumSize / 2, frustumSize / 2, frustumSize / -2, -1000, 1000);

然后在頁面重繪方法中依次渲染它們，并更新過渡場景中平面幾何體的材質變數：

// 頁面重繪影片效果
const tick = () => {
  // ...
  renderer.setRenderTarget(textureDestination);
  renderer.render(sceneDestination, camera);
  renderer.setRenderTarget(textureOrigin);
  renderer.render(sceneOrigin, camera);
  finalMesh.material.uniforms.sceneDestination.value = https://www.cnblogs.com/dragonir/p/textureDestination.texture;
  finalMesh.material.uniforms.sceneOrigin.value = textureOrigin.texture;
  finalMesh.material.uniforms.progress.value = data.progress;
  renderer.render(sceneTransition, cameraTransition);
  // ...
};

全景漫游絲滑過渡

創建完場景后，我們使用著色器來實作過渡場景的影片效果，在頂點著色器中我們添加如下的變數和方法：

uniform float time;
varying vec2 vUv;
varying vec3 vPosition;
uniform vec2 pixels;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

在片段著色器中，我們使用從 JavaScript 中傳遞過來的變數 sceneOrigin 原場景、sceneDestination 目標場景以及過渡進度值 progress 作為引數，實作兩個場景之間漸隱漸顯效果的過渡影片 ? ：

uniform float time;
uniform float progress;
uniform sampler2D sceneDestination;
uniform sampler2D sceneOrigin;
uniform vec4 resolution;
varying vec2 vUv;
varying vec3 vPosition;

void main(){
  float progress1 = smoothstep(0.10, 1.0, progress);
  vec4 sPlanet = texture2D(sceneOrigin, vUv);
  vec4 s360 = texture2D(sceneDestination, vUv);
  float mixer = progress1;
  gl_FragColor = s360;
  vec4 finalTexture = mix(sPlanet, s360, mixer);
  gl_FragColor = finalTexture;
}

我們甚至可以再添加一個 distort 方法，實作華麗的穿梭效果：

vec2 distort(vec2 olduv, float pr, float expo) {
  vec2 p0 = 2.*olduv - 1.;
  vec2 p1 = p0/(1. - pr*length(p0)*expo);
  return (p1 + 1.) * 0.5;
}
void main(){
  float progress1 = smoothstep(0.10, 1.0, progress);
  vec2 uv1 = distort(vUv, -90.*progress, progress*4.);
  vec4 sPlanet = texture2D(sceneOrigin, uv1);
  vec4 s360 = texture2D(sceneDestination, vUv);
  float mixer = progress1;
  gl_FragColor = s360;
  vec4 finalTexture = mix(sPlanet, s360, mixer);
  gl_FragColor = finalTexture;
}

此時我們就可以使用一個陣列向下面這樣批量定義好所有房間的路徑，如從走廊可以通向臥室、客廳，用 currentRoom 和 destinationRoom 欄位標識當前房間和目標房間，當觸發切換房間動作時，我們用這兩個欄位拿到對應的全景貼圖，然后更新原始場景 ?? 和 目標場景 ?? 中球體的材質屬性 map 即可實作房間切換了，

const routes = [
  // 從走廊向臥室
  {
    currentRoom: 'hall',
    destinationRoom: 'bed-room',
  },
  // 從走廊向客廳
  {
    currentRoom: 'hall',
    destinationRoom: 'living-room',
  },
  // ...
];

?? 關于著色器入門，可以看看此專欄另一篇文章《Three.js 進階之旅：Shader著色器入門》

② 創建標注室內物體的互動熱點

室內的互動熱點，即在三維空間中添加的平面互動點，可以通過 Sprite、Canvas 等實作，但是它們的缺點是樣式不容易改，本文中所有的互動熱點都是使用頁面的 DOM 節點實作的，因此直接使用 CSS 就能自由修改樣式，

我們可以在房間資料中向下面這樣配置標注室內物體的互動點資訊和 Vector3 型別的位置資訊，然后使用陣列在頁面上批量創建 DOM 節點：

{
  name: '客廳',
  interactivePoints: [
    {
      key: 'tv',
      value: '電視',
      cover: new URL('@/assets/images/home/cover_living_room_tv.png', import.meta.url).href,
      position: new Vector3(-8, 2, -15),
    },
    {
      key: 'art',
      value: '藝術品',
      cover: new URL('@/assets/images/home/cover_living_room_art.png', import.meta.url).href,
      position: new Vector3(10.5, 0, -15),
    },
    // ...

在頁面中這樣渲染它們：

<div
  v-for="(point, index) in interactivePoints"
  :key="index"
  :
  @click="handleReactivePointClick(point)"
  v-show="point.room === data.currentRoom"
>
  <p >{{ point.value }}</p>
</div>

為了實作絲滑的擴散效果影片，室內物體標記熱點使用了一張雪碧圖作為影片幀，可以像下面這樣播放雪碧圖影片幀：

.point
  background-image url('@/assets/images/sprites/interactive.png')
  background-repeat: no-repeat
  background-position: 0 0
  background-size: 100%
  background-position-y: 0
  animation: interactivePointAnimation 2s steps(24) forwards infinite
  animation-fill-mode both;

@keyframes interactivePointAnimation
  0%
    background-position: 0 0
  to
    background-position: 0 -1536PX;

為了互動熱點能夠顯示在按配置好的位置屬性 position 正確顯示在頁面上，我們還需要在頁面重回方法 tick() 中實時更新它們的位置，并利用 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(sceneTransition.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");
  }
  // ...
};

?? 本文中其他互動點如房間標簽名標記點、地面前進指引標記點等與室內物體標注互動點的實作原理都是一樣的，后續將不再贅述，

③ 創建側邊固定房間切換按鈕

固定在側邊的按鈕用保存房間資訊的陣列 rooms 即可生成，我們可以使用 v-show 或 v-if 對房間標簽進行過濾，當我們的全景圖處于當前房間時，就可以不顯示當前房間的標簽名，如下圖中，當前位置是走廊的全景空間，切換按鈕處就僅顯示走廊以外的其他房間的切換按鈕，

<div >
  <span
    
    v-for="(room, index) in rooms"
    :key="index"
    @click="handleSwitchButtonClick(room.key)"
    v-show="room.key !== data.currentRoom"
  >
  </span>
</div>

④ 創建三維空間房間標簽并與側邊標簽聯動

空間房間標簽

為了在三維全景空間中漫游時清晰地知道各個房間在當前房間的哪個位置，我們可以向實作室內物體互動熱點一樣，在三維空間中添加房間標簽名標記點，比如當我們位于客廳時，從客廳可以看到廚房和走廊，此時我們就可以向下面這樣在客廳空間中配置廚房和走廊名稱的房間名稱標記點，然后像添加室內物體標記熱點地原理一樣，在空間中創建對應的 html 標簽并在 tick() 方法中更新每個標簽的顯示隱藏屬性即可，

// ...
{
  key: 'living-room',
  name: '客廳',
  visible: true,
  visibleRooms: [
    {
      key: 'hall',
      position: new Vector3(-12, 2, 15),
    },
    {
      key: 'kitchen',
      position: new Vector3(-12, 2, -15),
    }
  ],
},

與側邊標簽聯動

當我們完成上兩個步驟時，以當前房間位于客廳為例，此時頁面上就會顯示兩個一樣的房間標簽名：側邊固定按鈕處有走廊，隨空間轉動的浮動房間標簽熱點中也有走廊，同時出現兩個相同的名稱就會使頁面變得混亂，讓使用的地人產生疑惑，

我們可以像這樣優化以下這個功能：當位于空間中的房間名稱標簽在可見時，就從側邊固定按鈕標簽中將其移除；當位于空間中的房間名稱標簽轉動到后方不可見時，側邊固定按鈕處就顯示該房間名稱，代碼中我們可以在 tick() 方法中像下面這樣實作，初始化時我們對 rooms 陣列的每一項設定一個屬性 visible: true，當在頁面重繪影片中檢測到某房間名稱標記點轉出螢屏時，就將該標簽代表的房間的 visible 屬性設定為 false，當該標簽跟隨房間轉動再次出現在螢屏上時，就將 visible 修改為 true，

tick () {
  data.filtederRooms.forEach((item) => item.visible = true);
  for (const label of _roomLabels) {
    //  ...
    // 標記物旋轉出螢屏時顯示側邊貼靠導航，標記物出現在螢屏時隱藏側邊貼靠導航
    if (Math.abs(pos.x) < 1.2 && pos.z < 1) {
      data.filtederRooms.forEach((item) => {
        if (item.key === label.key) {
          item.visible = false;
        }
      });
    } else {
      data.filtederRooms.forEach((item) => {
        if (item.key === label.key) {
          item.visible = true;
        }
      });
    }
  }
}

然后，我們再把修改下生成固定在側邊的房間按鈕的方法，用過濾過的房間陣列陣列 filtederRooms 代替之前的 rooms，并判斷該標簽不是當前所處的的房間且該房間的可見性為 true 時才顯示該側邊固定按鈕，

<div >
  <span
    
    v-for="(room, index) in data.filtederRooms"
    :key="index"
    @click="handleSwitchButtonClick(room.key)"
    v-show="room.key !== data.currentRoom && room.visible === true"
  >
  </span>
</div>

此時，視覺上就會形成當我們轉動房間全景場景時，如果位于空間的房間名稱標簽轉出到螢屏之外時，就會自動固定到側邊的視覺效果 ?? ，

⑤ 創建地面指引熱點

在地面上添加前進指引熱點，可以引導用戶從當前空間漫游穿梭到其他空間，利用上面步驟①中定義好的陣列 routes，我們在其中添加一個地面熱點在三維空間中的 Vector3 型別位置點資訊，然后和前面創建室內物體標注互動點一樣，批量創建即可，

const routes = [
  // 從走廊向臥室
  {
    currentRoom: 'hall',
    destinationRoom: 'bed-room',
    position: new Vector3(0, 0, 0),
  },
  // 從走廊向客廳
  {
    currentRoom: 'hall',
    destinationRoom: 'living-room',
    position: new Vector3(1, 1, 1),

  },
  // ...
];

⑥ 創建小地圖

在線看房 ?? 頁面最重要的特征就是有戶型小地圖 ??，用戶可以清晰地知道該房源的詳細結構以及當前所處的房間位置，當隨著房間全景圖在三維空間中旋轉，位于小地圖上的錨點 ?? 也對應旋轉和移動，

我們來看看具體是如何實作的：我們先創建一個 TinyMap.vue 組件，其中 rotate 屬性用來設定小地圖上錨點的旋轉方向，position 屬性用來設定錨點所處的位置，然后使用父組件傳來的兩者的值，使用 CSS 即可實作小地圖錨點的位置和方向實時變化，

<template>
  <div >
    <div >
      <i 
        :style="{
          'transform': `rotate(${rotate}deg)`,
          'left': `${position.left}px`,
          'top': `${position.top}px`
        }"
      ></i>
    </div>
  </div>
</template>

<script>
const props = defineProps({
  rotate: {
    type: Number,
    default: 0,
  },
  position: {
    type: Object,
    default: () => ({ left: 0, top: 0 }),
  },
});
</script>

至于 rotate 和 position 的獲取，我們需要在父組件中這樣來實作，rotate 即相機和軌道控制器之前形成的夾角度數，我們可以在影片方法 tick() 中，使用 camera 和controls 的 x軸 和 z軸 的引數，按下面公式計算出兩者之間的夾角，并轉換成子組件中需要的弧度型別，position 的獲取就非常簡單，我們先在 rooms 中配置好每個房間固定到 left 和 top 值，然后拿到當前房間的值，傳給 TinyMap 組件即可，

tick() {
  // ...
  if (camera && controls) {
    const dirx = camera.position.x - controls.target.x
    const dirz = camera.position.z - controls.target.z
    const theta = Math.atan2(dirx, dirz) * 180 / Math.PI;
  }
}

小地圖中錨點的位置隨著看房視角的變化而旋轉和移動，

⑦ 頁面優化

整個在線看房 ?? 專案的主要功能到這里已經全部介紹完了，實際專案中可能一個房源不止 5 個房間全景圖，加之 HDR 全景圖的體積也比較大，因此圖片預加載和專案加載進度管理是非常有必要的，我們可以對其進一步進行優化，提升用戶體驗 ?，

?? 原始碼地址： https://github.com/dragonir/threejs-odessey

總結

本文中主要包含的知識點包括：

• Three.js 三維全景場景初始化
• 加載多個全景場景，并實作絲滑的全景圖之間的漫游過渡效果
• 在三維全景空間中添加可互動的標記熱點，如房間標簽名熱點、室內物體介紹熱點、地面前進指引熱點等
• 學會三維空間中熱點的顯示隱藏可見性檢測，并利用可見性檢測實作視覺上空間熱點側邊自動停靠功能
• 通過實時計算攝像機與控制器的夾角，來實作在線看房小地圖，

想了解其他前端知識或其他未在本文中詳細描述的Web 3D開發技術相關知識，可閱讀我往期的文章，如果有疑問可以在評論中留言，如果覺得文章對你有幫助，不要忘了一鍵三連哦 ??，

附錄

• [1]. ?? Three.js 打造繽紛夏日3D夢中情島
• [2]. ?? Three.js 實作炫酷的賽博朋克風格3D數字地球大屏
• [3]. ?? Three.js 實作2022冬奧主題3D趣味頁面，含冰墩墩
• [4]. ?? Three.js 實作3D開放世界小游戲：阿貍的多元宇宙
• [5]. ?? Three.js 進階之旅：全景漫游-初階移動相機版
• ...
• 【Three.js 進階之旅】系列專欄訪問 ??
• 更多往期【3D】專欄訪問 ??
• 更多往期【前端】專欄訪問 ??

參考

• [1]. threejs.org

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

標籤：JavaScript

上一篇：CSS樣式中顏色與顏色值的應用

下一篇：一個前端大佬的十年回顧 | 漫畫前端的前世今生