使用Parcel打包Three.js项目时遇.exr文件无转换器错误求助

问题原因 #

Parcel默认配置未包含.exr格式文件的转换器，因此当项目中加载或导入EXR文件时，Parcel无法识别并处理该类型文件，抛出错误。

解决方案 #

方案1：添加EXR文件的转换器配置 #

1. 安装Parcel的raw转换器（用于处理二进制文件）：

npm install @parcel/transformer-raw --save-dev
# 或使用yarn
yarn add @parcel/transformer-raw --dev
# 或pnpm
pnpm add @parcel/transformer-raw -D

2. 在项目根目录创建.parcelrc文件，扩展默认配置并添加EXR规则：

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.exr": ["@parcel/transformer-raw"]
  }
}

配置完成后，Parcel会将EXR文件作为二进制资源处理，你可以正常导入或通过URL加载该文件。

方案2：将EXR作为静态资源直接加载 #

如果无需将EXR文件嵌入代码，仅需通过URL加载，可将EXR文件放置在项目的public目录下（如public/ani-tiles.exr），然后在代码中直接使用路径加载：

import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader';

const loader = new EXRLoader();
loader.load('/ani-tiles.exr', (texture) => {
  // 在这里处理加载完成的纹理
});

Parcel会自动将public目录下的文件复制到输出目录，确保加载路径正确。

额外检查 #

• 确认EXR文件路径无误，避免因路径错误导致的加载问题；
• 重启Parcel开发服务，确保新配置生效。

内容的提问来源于stack exchange，提问作者Anushka Chauhan