关于three.js:Threejs-进阶之旅全景漫游高阶版在线看房-🏡

申明：本文波及图文和模型素材仅用于集体学习、钻研和观赏，请勿二次批改、非法流传、转载、出版、商用、及进行其余获利行为。

摘要

专栏上篇文章《Three.js 进阶之旅：全景漫游-初阶挪动相机版》中通过创立多个球体全景场景并挪动相机和控制器的形式实现了多个场景之间的穿梭漫游。这种形式的毛病也是不言而喻的，随着全景场景的减少来创立对应数量的球体，使得空间关系计算难度晋升，并且大幅升高浏览器渲染行性能。在上一篇文章的根底上，本文通过以下几点对全景性能加以优化，最初实现一个能够利用到理论我的项目中的在线看房案例。通过浏览本文和实际案例，你将学到的常识包含：应用 Three.js 用新的技术思路实现多个场景的加载和场景间的丝滑过渡切换、随着空间始终和角度实时变动的房源小地图、在全景场景中增加如高空指引、空间物体展现、房间标注等多种类型的交互热点等。

成果

咱们先来看看本文在线看房案例的最终实现成果，页面主体由代表多个房间的全景图 🏡 、全景空间中的用于标识物体的交互热点 🪴 、显示房间名称的空间热点 🈯️ 、用于高空后退指引的交互热点 🔛 、固定在侧边的房间切换按钮 ◻️ 以及右上侧的房间小地图 🧭 形成。左右拖动页面能够进行以后房间的全景预览，同时小地图上的锚点旋转角度和地位也依据以后房间的地位和旋转角度的变动而变动，应用鼠标滚轮或触摸板放大放大页面能够查看房间全景图的整体和部分细节。

点击高空后退指引标记热点或空间中的房间名标签热点、以及固定在左边的房间名按钮时能够丝滑切换到对应的房间，固定在右侧的按钮和空间中的房间名标签之间互相联动，当页面视区无奈看到空间中的房间名标签时，它会主动固定到右侧按钮处。点击房间中的物体标识热点能够与之产生交互。

关上以下链接，在线预览成果，gif 造成丢帧和画质损失，在线大屏拜访成果更佳。

👁‍🗨 在线预览地址：https://dragonir.github.io/panorama-advanced/

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

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

原理

比照上篇有哪些优化点

看完本文在线看房案例，咱们先来总结下本文在上篇文章示例的根底上，做了哪些优化？下图几个标注点对应本文实现的一些新的性能和优化，通过以下几点的实现能够晋升多个全景场景漫游我的项目的加载渲染性能和用户体验。

①：是指应用新的技术思路加载多个全景图场景，并应用着色器实现多个场景之间的优雅过渡。
②：是用于标注室内物体的空间交互热点，点击能够实现交互。
③：是固定于页面侧边的切换空间按钮，只有悬浮在空间中的房间标签④看不见的时候，对应的房间切换按钮才会显示。
④：是悬浮在空间中的房间标签，当旋转场景看不见它的时候，它会固定到③处，造成空间的标签和固定在侧边的标签之间是互相联动的视觉效果。
⑤：是高空场景切换指引热点，点击高空的热点能够切换到下个场景，视觉上造成在空间中后退的成果。
⑥：是示意整个房子的小地图，在全景空间中旋转或者全景漫游时，图中的锚点的方向和地位会对应扭转。

房间场景切换原理

上篇文章示例咱们通过创立多个球体挪动相机和控制器的形式实现多个全景场景之间的漫游，而这篇文章中，咱们将通过创立多个场景的形式，来实现两个全景场景之间的过渡漫游成果。

实现原理示意图如下所示，页面总共将创立 3 个场景，origin 示意以后场景，destination 示意指标场景，利用以后场景和指标场景合成用于展现过渡成果的 transition 过渡场景，当点击切换房间按钮时，三个场景的加载顺便别离为 origin -> transition -> destiontion，由此在视觉上造成从上个房间切换到下个房间并且随同突变过渡的场景漫游成果。

实现

对应下面几个优化点及多个场景的切换原理，咱们当初来一步步实现本文中的案例：

〇场景初始化

<canvas class="webgl"></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 = 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"
  :class="[`point-${index}`, `point-${point.key}`]"
  @click="handleReactivePointClick(point)"
  v-show="point.room === data.currentRoom"
>
  <p class="p1">{{ 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 class="switch">
  <span
    class="button"
    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 class="switch">
  <span
    class="button"
    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 class="tiny-map">
    <div class="map">
      <i class="rotate"
        :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

关于three.js:Threejs-进阶之旅全景漫游高阶版在线看房-🏡

摘要

成果

原理

比照上篇有哪些优化点

房间场景切换原理

实现

〇场景初始化

① 加载多个全景场景和全景漫游过渡

多个全景场景加载

全景漫游丝滑过渡

② 创立标注室内物体的交互热点

③ 创立侧边固定房间切换按钮

④ 创立三维空间房间标签并与侧边标签联动

空间房间标签

与侧边标签联动

⑤ 创立高空指引热点

⑥ 创立小地图

⑦ 页面优化

总结

附录

参考

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于three.js:Threejs-进阶之旅全景漫游高阶版在线看房-🏡

摘要

成果

原理

比照上篇有哪些优化点

房间场景切换原理

实现

〇 场景初始化

① 加载多个全景场景和全景漫游过渡

多个全景场景加载

全景漫游丝滑过渡

② 创立标注室内物体的交互热点

③ 创立侧边固定房间切换按钮

④ 创立三维空间房间标签并与侧边标签联动

空间房间标签

与侧边标签联动

⑤ 创立高空指引热点

⑥ 创立小地图

⑦ 页面优化

总结

附录

参考

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

〇场景初始化

发表回复取消回复