Three.js中OutputPass模块无法从CDN作为ES6模块导入求助

你遇到的404错误核心原因是：Three.js 0.136.0版本中不存在OutputPass这个后处理模块，你参考的示例基于Three.js的master分支（最新开发版），而该模块是在0.136.0之后的版本才被添加到postprocessing目录下的。

解决方法 #

方法1：升级Three.js版本 #

将import map中的Three.js版本号替换为包含OutputPass的版本（比如0.148.0及以上），修改后的import map如下：

<script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
<script type="importmap">
    {
        "imports": {
            "three": "https://cdn.skypack.dev/three@0.148.0",
            "three/addons/": "https://cdn.skypack.dev/three@0.148.0/examples/jsm/"
        }
    }
</script>

升级后即可正常导入OutputPass。

方法2：在0.136.0版本中替代OutputPass功能 #

如果必须保留0.136.0版本，你可以直接省略OutputPass——早期版本的EffectComposer默认会将结果渲染到屏幕；或者用ShaderPass结合CopyShader实现类似的输出功能，示例代码如下：

import { ShaderPass } from 'three/addons/postprocessing/ShaderPass';
import { CopyShader } from 'three/addons/shaders/CopyShader';

// 用CopyShader实现类似OutputPass的输出功能
const outputPass = new ShaderPass(CopyShader);
composer.addPass(outputPass);

内容的提问来源于stack exchange，提问作者Mr. Developerdude