Three.js 進階之旅：全景漫遊-高階版線上看房 ?

dragonir發表於2023-04-10

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

摘要

專欄上篇文章《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]. threejs.org

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

Three.js 進階之旅：全景漫遊-初階移動相機版
2023-03-28
JS
Three.js 進階之旅：新春特典-Rabbit craft go ?
2023-01-22
JSRaftGo
Three.js 進階之旅：物理效果-碰撞和聲音 ?
2023-02-15
JS
CSS高階進階
2018-02-12
CSS
Three.js 進階之旅：頁面平滑滾動-王國之淚 ?
2023-05-06
JS
高階前端進階（五）
2022-05-09
前端
高階前端進階（七）
2022-12-17
前端
高階前端進階（三）
2021-11-22
前端
Three.js 進階之旅：物理效果-3D乒乓球小遊戲 ?
2023-03-20
JS3D遊戲
前端進階的破冰之旅
2018-11-17
前端
Typescript 高階語法進階
2020-08-09
TypeScript
React 進階(三) 高階元件
2019-03-18
React元件
高階前端進階系列 - webview
2019-05-10
前端WebView
Pytest高階進階之Fixture
2017-03-18
高階前端的進階——CSS之flex
2019-03-11
前端CSSFlex
【狂神說】Docker（三） - 高階進階
2020-12-06
Docker
SCO UNIX--高階進階(一)(轉)
2007-08-10
360度全景看房-基於ThinkPHP
2019-05-11
PHP
MySQL • 原始碼分析 • mysql認證階段漫遊
2017-12-13
MySql原始碼
iOS逆向之旅（進階篇） — 工具(LLDB)
2018-10-26
iOSLLDB
iOS逆向之旅（進階篇） — HOOK(FishHook)
2018-10-26
iOSHook
【Scala之旅】特質與高階型別
2019-02-16
型別
OpenGL ES 高階進階：紋理陣列
2019-05-19
陣列
Python 函式進階-高階函式
2022-04-25
Python函式
Java初級~中級~高階進階之路
2020-10-24
Java
react進階系列：高階元件詳解（三）
2017-06-27
React元件
圖解Activity啟動流程，進階高階
2017-07-17
圖解
Three.js進階篇之6 - 碰撞檢測
2018-03-15
JS
Three.js進階篇之5 - 粒子系統
2018-03-15
JS
38 Three.js高階材質THREE.ShaderMaterial
2017-12-06
JS
Flutter入門進階之旅（十三）Flutter 路由
2019-04-15
Flutter路由
iOS逆向之旅（進階篇） — 程式碼注入
2018-10-26
iOS
CSS使用的一些小技巧/高階進階
2019-03-04
CSS
高階 Android 工程師的進階之路
2018-07-13
Android工程師
SCO UNIX學習寶典高階進階(轉)
2007-08-11
GitHub加速指南進階版
2021-03-30
Github
JS高階技巧(簡潔版)
2018-06-01
JS
Python進階：切片的誤區與高階用法
2018-12-29
Python