THREE.Plane 在 threejs 中用來表示數學上的平面

數學中的平面方程式

a, b, c 代表平面的法向量，d 是一個常數值

1

ax + by + cz + d = 0;

創建平面

以下程式碼創建了一個 y - 1 = 0 的平面，法向量為 [0, 1, 0]，常數值為 -1

1
2
3

const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0).normalize(), -1);
console.log("normal", plane.normal); // {x: 0, y: 1, z: 0}
console.log("constant", plane.constant); // -1

說明

向量內積代表從其中一個向量投影到另一個向量

定義

餘弦定理是三角形中三邊長度與一個角的 餘弦值(cos) 的數學式，公式定義如下：

什麼是 debounce ?

debounce 是一種用於防止事件處理過於頻繁發生的技術，常用於處理使用者輸入，例如按鍵事件或搜尋框的輸入事件。

範例

以文字搜尋功能為例，使用者每次搜尋打的文字都會呼叫後端的 api 拿回資料，但通常使用者想搜尋的是最後打字的結果，而此時就適合使用 debounce 在一定時間過後才去真正的呼叫後端 api

以下面為例，搜尋框改變時，不會馬上觸發 onInput 方法，而是會等 500ms 後，如果搜尋框的文字沒有任何改變，才呼叫 onInput 方法

1

<input type="text" onInput="debounceInput" />

1
2
3
4
5

const onInput = (event) => {
  console.log(event.target.value);
  // call api...
};
const debounceInput = debounce(onInput, 500);