Symfony+Assetmapper环境下JS文件中导入纹理/图像资源的方法

我正在Symfony + AssetMapper项目中实现ThreeJS 3D动画，Twig模板内的资源展示正常，简单背景动画已成功运行。当前为3D对象使用自定义片段着色器时，需要在ThreeJS脚本中导入图像并作为uniform传入Shader Material。

我尝试过手动使用绝对路径、相对路径及带版本号的纹理路径，代码示例如下：

{# base.html.twig #}
<script type="module" src="{{ asset('scripts/three.js') }}"></script>

// three.js
const uniforms = {
    // ...其他uniform配置
    uTexture: { value: new THREE.TextureLoader().load('assets/images/texture.webp') }
};

但AssetMapper无法正确映射到带版本号的资源等效路径，目前甚至无法通过带版本号的文件名加载纹理。（日志显示手动指定路径后的ThreeJS uniform状态）

可行解决方案 #

方案1：Twig注入全局资源路径 #

通过Twig生成正确的带版本号资源路径，注入到全局变量供ThreeJS脚本使用：

1. 修改Twig模板，添加全局路径变量：

{# base.html.twig #}
<script>
    window.assetUrls = {
        shaderTexture: "{{ asset('assets/images/texture.webp') }}"
    };
</script>
<script type="module" src="{{ asset('scripts/three.js') }}"></script>

2. 在ThreeJS脚本中引用全局变量：

// three.js
const uniforms = {
    // ...其他uniform配置
    uTexture: { value: new THREE.TextureLoader().load(window.assetUrls.shaderTexture) }
};

方案2：ES模块导入（推荐） #

利用AssetMapper对ES模块的支持，直接在JS中导入图像资源，自动处理路径和版本号：

1. 在three.js中导入纹理：

// three.js
import textureUrl from '../assets/images/texture.webp';

const uniforms = {
    // ...其他uniform配置
    uTexture: { value: new THREE.TextureLoader().load(textureUrl) }
};

2. 确保AssetMapper配置包含图像扩展名，编辑config/packages/asset_mapper.yaml：

asset_mapper:
    paths:
        - assets/
    enabled_extensions: ['js', 'css', 'webp', 'png', 'jpeg'] # 按需添加图像格式

方案3：公共目录存放（不推荐） #

将纹理文件直接放入public/目录，使用绝对路径加载，但此方法无法利用AssetMapper的版本号管理功能：

// three.js
const uniforms = {
    uTexture: { value: new THREE.TextureLoader().load('/texture.webp') }
};

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