三个 JS 和 Parcel - 加载 HDR 文件时出现问题

Question

目前我正在处理我的第一个 Three.js 项目，在我尝试加载 HDR 文件之前一切正常。我想这与使用包裹导入静态文件有关。但是我真的不确定。如果是这种情况，我不知道如何解决。

这是我遇到的错误：

@parcel/core: No transformers found for _src/assets/sunset_in_the_chalk_quarry_4k.hdr_.

Reflective-3D/node_modules/@parcel/config-default/index.json:3:3

2 |  "bundler": "@parcel/bundler-default",
3 |   "transformers": { 
4 |     "types:*.{ts,tsx}": ["@parcel/transformer-typescript-types"],
5 |     "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
6 |     "data-url:*": ["...", "@parcel/transformer-inline-string"],  
7 |     "worklet:*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
8 |       "@parcel/transformer-worklet",  
9 |       "..." 
10 |     ],
11 |     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [ 
12 |       "@parcel/transformer-babel",
13 |       "@parcel/transformer-js",

还有我的 JS 代码

    import * as THREE from "three";
    import {OrbitControls} from "../node_modules/three/examples/jsm/controls/OrbitControls.js";
    import {FlakesTexture} from "../node_modules/three/examples/jsm/textures/FlakesTexture.js";
    import {RGBELoader} from "../node_modules/three/examples/jsm/loaders/RGBELoader.js";
    
// HERE I IMPORT MY FILE
import HdrImage from "./assets/sunset_in_the_chalk_quarry_4k.hdr";

    let scene, camera, renderer, controls, pointlight;

    function init() {
      scene = new THREE.Scene();

      renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      renderer.outputEncoding = THREE.sRGBEncoding;
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      renderer.toneMappingExposure = 1.25;

      camera = new THREE.PerspectiveCamera(
        50,
        window.innerWidth / window.innerHeight,
        1,
        1000
      );
      camera.position.set(0, 0, 500);
      controls = new OrbitControls(camera, renderer.domElement);

      controls.autoRotate = true;
      controls.autoRotateSpeed = 0.5;
      controls.enableDamping = true;

      pointlight = new THREE.PointLight(0xffffff, 1);
      pointlight.position.set(200, 200, 200);
      scene.add(pointlight);

      let envmaploader = new THREE.PMREMGenerator(renderer);

      new RGBELoader().load(HdrImage, function (hdrmap) {
        let envmap = envmaploader.fromCubemap(hdrmap);
        let texture = new THREE.CanvasTexture(new FlakesTexture());
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.x = 10;
        texture.repeat.y = 6;

        const ballMaterial = {
          clearcoat: 1.0,
          cleacoatRoughness: 0.1,
          metalness: 0.9,
          roughness: 0.5,
          color: 0x8418ca,
          normalMap: texture,
          normalScale: new THREE.Vector2(0.15, 0.15),
          envMap: envmap.texture,
        };

        let ballGeo = new THREE.SphereGeometry(100, 64, 64);
        let ballMat = new THREE.MeshPhysicalMaterial(ballMaterial);
        let ballMesh = new THREE.Mesh(ballGeo, ballMat);
        scene.add(ballMesh);

        animate();
      });
    }
    function animate() {
      controls.update();
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    }
    init();

和我的文件夹结构

[文件夹结构][1] [1]: https://i.stack.imgur.com/H3JnT.png

有人遇到过这个麻烦吗？

非常感谢您对此的想法（：

Answer 1

我，我有同样的问题，无法使包裹包含纹理，这是一场噩梦。我还没有解决方案。