如何在three.js中使用webpack文件加載器？

Question

我在使用帶有three.js的webpack文件加載器時遇到問題

我嘗試了兩種方法，1：

 import jpg from "./assets/water.jpg";
    const water = new Water(waterGeometry, {
          waterNormals: new THREE.TextureLoader().load(jpg, function(texture) {
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
          }),

產生404 jpgname not found

第二種方法：

import jpg from "./assets/water.jpg";
    const water = new Water(waterGeometry, {
          waterNormals: jpg

這會導致錯誤：

 TypeError: Invalid value used as weak map key
    at WeakMap.set

我的 webpack 配置：

rules: [
  {
      {
    test: /\.(png|svg|jpg|gif)$/,
    use: ["file-loader"]
  },

Answer 1

我能夠通過以下方式解決這個問題：

1) 使用 webPack 你必須做一個要求（或導入），例如：

let bg_px = require('../assets/milkyway/dark-s_px.jpg'),
bg_nx = require('../assets/milkyway/dark-s_nx.jpg'),
bg_py = require('../assets/milkyway/dark-s_py.jpg');

2）好的！ 當你這樣做時，webpack 會將你的文件移動到你的“dest”文件夾中，並使用另一個名稱（可能是 id，類似於這樣：'a36b443f1f659f216df3b8f1c82dd167.jpg'）

問題是，如果您需要使用 webpack 中的 require 或 import 將資產（如紋理）加載到 THREE.js，它將無法工作，因為 THREE 需要一個 URL（在 dist 文件夾中）而不是一個對象（在這種情況下） ，一個模塊對象）。 例子：

let urls = [ bg_px, bg_nx , bg_py ]; //wrong
let textureCube = new THREE.CubeTextureLoader().load( urls );//wont work because bg_px is an object

3rd) 如果你對你需要的資產做一個 console.log(bg_px) 你會看到真正的 URL 在“默認”字段上..所以像這樣使用它會起作用：

let urls = [ bg_px.default, bg_nx.default , bg_py.default ]; //right!!
let textureCube = new THREE.CubeTextureLoader().load( urls );//works!

所以，“捆綁”這個：

您必須對您的資產執行 const ASSET = require('path/to/ASSET') （我想導入也可以），然后您必須使用您的 'ASSET' 變量訪問對象內的 'default' 字段，像這樣：'ASSET.default'

obs：你的 webpack 配置是對的！

希望它有幫助，對我來說確實如此。 保持冷靜和快樂編碼！