前言

Threejs 中的 texture(貼圖) 可以設置 offset, repeat 及 wrap 屬性，但大部分文章都只有文字說明而沒有視覺化的範例，所以寫了一個視覺化範例讓自己能夠理解

Demo

圖片渲染在 (x,y) 平面上，右方橘色線為 x 軸，上方綠色線為 y 軸

此為 event loop 系列文章 - 第 4 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

這篇文章想藉由閱讀 Vue.nextTick() 的源碼來看 event loop 的使用

Vue.nextTick 的使用方式

官方文件寫明 Vue.nextTick() 是拿來等待下一次 DOM 更新的方法，因為 Vue 在每次響應式數據改變後是異步去更新 DOM，所以如果在數據改變後，馬上獲取 DOM 的資料會是舊的，這時就需要用到 Vue.nextTick() 獲取更新後的 DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++

  // DOM 还未更新
  console.log(document.getElementById('counter').textContent) // 0

  await nextTick()
  
  // DOM 此时已经更新
  console.log(document.getElementById('counter').textContent) // 1
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

此為 event loop 系列文章 - 第 3 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

在研究 event loop 的過程中，赫然發現原來瀏覽器已經有了原生的 queueMicrotask 讓開發者可以自行管理微任務的執行，下面我們來看看什麼情況下會需要用到這個功能吧

基本用法

基本上 queueMicrotask 就如同使用 new Promise() 一樣，會將 callback 加入到 微任務佇列 (microtask queue)

1
2
3
4
5
6
7
8

let callback = () => console.log("Regular timeout callback has run");

let urgentCallback = () =>  console.log("*** Oh noes! An urgent callback has run!");

console.log("Main program started");
setTimeout(callback, 0);
queueMicrotask(urgentCallback);
console.log("Main program exiting");

此為 event loop 系列文章 - 第 2 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

上一篇介紹了 event loop 的運行原理，這篇文章希望藉由各種範例進一步體會 event loop 的執行順序

各種不同的 event loop 範例

1. 基本的 event loop 執行順序

1
2
3
4
5
6
7
8
9

setTimeout(() => {
  console.log('timeout')
}, 0)

Promise.resolve().then(() => {
  console.log('promise');
});

console.log('main script');

此為 event loop 系列文章 - 第 1 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

event loop 是 js 中一個蠻重要的概念，雖然以前知道 宏任務 (macrotask) 及 微任務 (microtask) 優先級上的差別，但似乎一直不知道 event loop 與瀏覽器渲染間的關係，而大部分的文章都只單獨介紹 event loop 或是 瀏覽器渲染流程，所以寫了這篇文章統整 event loop 與 瀏覽器渲染 間的關聯性

event loop 的作用

以前端來說，在瀏覽器中使用者的畫面點擊、呼叫後端 api、window.addEventListener，這些全部都由 js 執行，但 js 是單線程的程式語言，同一時間就是只能做一件事，所以當事情同時發生時，需要讓 js 知道哪行程式碼是先被執行的、而接下來又該執行哪段程式碼，這個負責安排執行順序的東西，基本上就叫做 event loop

event loop 的宿主環境

嚴格來說 event loop 並不是定義在 js 上的東西，而是根據不同環境有不同的 event loop 規則，以瀏覽器來說就會有瀏覽器的 event loop 規則，而 nodejs 的話又會有另一套 nodejs 的 event loop 規則，今天這篇文章只探討瀏覽器的 event loop

THREE.Vector3 是 threejs 中最常用到的基礎類別，代表 3 維向量的運算

Vector3 的方法

- add(v: Vector3): this

1
2
3

const addVector3 = new THREE.Vector3(1, 1, 1);
addVector3.add(new THREE.Vector3(2, 2, 2));
console.log('.add', addVector3); // {x: 3, y: 3, z: 3}

- addScalar(s: Float): this

1
2
3

const addScalarVector3 = new THREE.Vector3(1, 1, 1);
addScalarVector3.addScalar(2);
console.log('.addScalar', addScalarVector3); // {x: 3, y: 3, z: 3}

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);