Three.js Journey — Learn WebGL with Three.jsThe ultimate Three.js course whether you are a beginner or a more advanced developerhttps://threejs-journey.com/?c=p3

使用原生 JavaScript

首先是靜態頁面的放置位置，如果使用Vite模版配置，可以直接放在 /static/ 文件夾中，引用參考：

const imageSource = '/files/image.png'console.log(imageSource)

簡單帶過一下使用原生JavaScript的步驟:

1. 創建 Image 實例
2. 監聽 image 的 load 事件
3. 將texture變量提升為全局變量，并使用 Texture 類創建紋理
4. 設置 image.src 屬性加載圖片，再將texture變量提升為全局變量
5. 將texture應用到material中

const image = new Image()
const texture = new THREE.Texture(image)
texture.colorSpace = THREE.SRGBColorSpace  // 修正 `sRGB` 顏色空間造成的紋理色值偏差
image.addEventListener('load', () =>
{texture.needsUpdate = true  // 更新在函數外部創建的紋理
})
image.src = '/textures/door/color.jpg'// ...const material = new THREE.MeshBasicMaterial({ map: texture })

用于材質的 map 或 matcap 屬性的紋理應該以 sRGB 編碼，需要將 colorSpace 設置為 THREE.sRGBColorSpace，但僅限于這些紋理。

總結關鍵點：

1.  texture.colorSpace = THREE.SRGBColorSpace

2. texture.needsUpdate = true

【效果圖】

使用 TextureLoader

將上面原生JavaScript的引入改為 THREE.TextureLoader() 引入：

const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('/textures/door/color.jpg')
texture.colorSpace = THREE.SRGBColorSpace

可以使用一個 TextureLoader 實例加載任意多的紋理（一對多）。如果現在有多個圖片需要加載，并且希望共享事件（比如在所有圖片加載完成后接收通知），可以使用THREE.LoadingManager() 與THREE.TextureLoader() 配合：

const loadingManager = new THREE.LoadingManager()
const textureLoader = new THREE.TextureLoader(loadingManager)

如果想要顯示加載器并在所有資源加載完成后隱藏它，LoadingManager 對這點非常有用，可以通過將以下屬性替換為自己的函數來監聽各種事件。

// LoadingManager的使用
const loadingManager = new THREE.loadingManager()
// 可以通過將以下屬性替換為自己的函數來監聽各種事件
loadingManager.onStart = ()=> {console.log('loading started!');    
}
loadingManager.onLoad = ()=> {console.log('loading finished!');    
}
loadingManager.onProgress = ()=> {console.log('loading progressing!');    
}
loadingManager.onError = ()=> {console.log('loading error!');    
}
const TextureLoader = new THREE.TextureLoader(loadingManager)

【擴展】ExrLoader

這次下載的素材中有以 .exr 后綴結尾的文件，經查需要通過 ExrLoader 進行導入，直接用