javascript - 如何将 webpack 文件加载器与 three.js 一起使用？

Question

我在使用 webpack 文件加载器和 three.js 时遇到问题

我尝试了两种方法，
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

我能够通过以下方式解决此问题:

1st)使用 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 将 Assets (如纹理)加载到 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

3)如果你在你需要的 Assets 上做一个 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!

所以，“捆绑”这个:

你必须对你的 Assets 做一个 const ASSET = require('path/to/ASSET') (我猜导入也可以)，然后你必须使用你的 'ASSET' 变量访问对象内的 'default' 字段，像这样:'ASSET.default'

obs:你的 webpack 配置是正确的!

希望它有所帮助，对我来说确实如此。
保持冷静和快乐的编码!