Javascript 三.js“；3.EffectComposer依赖于3.ShaderPass“；问题

您好，我是three.js的新手，我正在尝试使用effect composer函数，以便使用UnrealBloomPass.js在我的对象上实现bloom效果。不幸的是，我遇到了一些与Effect Composer中的THREE.ShaderPass相关的错误，由于缺乏经验，我不知道如何解决这些错误。有人能帮我吗

这是我的密码：

//画布设置
const canvas=document.querySelector（“canv”）
常量宽度=window.innerWidth；
const height=window.innerHeight；
const renderer=new THREE.WebGLRenderer（{canvas}）；
设置大小（宽度、高度）；
setClearColor（0x111，1）；
常数fov=100；
const aspect=宽度/高度；
常数近=0.1；
常数far=5；
常量摄影机=新的三个透视摄影机（视野、方位、近距离、远距离）；
摄像机位置z=2；
const scene=new THREE.scene（）；
//几何设置
const loader=new THREE.GLTFLoader（）.setPath（“./”）；
loader.load（“assets/model.glb”，（gltf）=>{
root1=gltf.scene；
场景。添加（root1）；
});
loader.load（“assets/model2.glb”，（gltf）=>{
root2=gltf.scene；
场景。添加（root2）；
});
//照明
恒光1=新的三方向光（0x404040）；
常量灯光2=新的三个环境灯光（0x404040）；
light1.位置y=2；
light1.位置z=2；
光照强度=2；
光明1.阴影黑暗=.1
light2.position.y=-2；
light2.position.z=-2；
光照强度=2；
光2.阴影黑暗=.1
场景。添加（light1）；
场景。添加（light2）；
//控制
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.enableZoom=true；
controls.enablePan=false；
控件。最大距离=2；
controls.minDistance=1.3；
controls.maxPolarAngle=2.5；
controls.minPolarAngle=.5；
controls.enableDamping=true；
控件更新（）；
//特效作曲家
const composer=new THREE.EffectComposer（渲染器）；
addPass（新的3.RenderPass（场景、摄影机））；
const bloomPass=new THREE.UnrealBloomPass（new THREE.Vector2（window.innerWidth，window.innerHeight），1.5,0.4,0.85）；
bloomPass.threshold=0；
强度=3；
布卢姆帕斯半径=1；
作曲家阿德帕斯（布鲁姆帕斯）；
//渲染
函数animate（）{
var delta=clock.getDelta（）；
请求动画帧（动画）；
根1.旋转.y+=0.002；
root2.rotation.y+=0.0035；
控件。更新（）
//渲染器。渲染（场景、摄影机）；
作曲者。渲染（增量）；
}
制作动画（）

文件
问题在于
EffectComposer.js
脚本无法访问所需的正确元素（即
THREE.ShaderPass
）

要解决此问题，只需在JavaScript/HTML文件中导入EffectComposer脚本所需的文件，即可读取所需的缺失元素。以这种方式导入的某些文件可能需要自己导入的元素（即，
ShaderPass.js
需要
Pass.js
中的元素），因此请确保以正确的顺序导入它们，以便需要其他元素的js文件可以最后读取，需要导入其他脚本的js文件可以首先读取

请参阅下面更改的代码（主要是HTML文件）：


//画布设置
const canvas=document.querySelector（“canv”）
常量宽度=window.innerWidth；
const height=window.innerHeight；
const renderer=new THREE.WebGLRenderer（{canvas}）；
设置大小（宽度、高度）；
渲染器.setClearColor（0x0c023d，1）；
常数fov=12；
const aspect=宽度/高度；
常数近=0.1；
常数far=20；
常量摄影机=新的三个透视摄影机（视野、方位、近距离、远距离）；
摄像机位置z=10；
const scene=new THREE.scene（）；
//几何设置
const loader=new THREE.GLTFLoader（）.setPath（“./”）；
loader.load（“assets/model.glb”，（gltf）=>{
root1=gltf.scene；
root1.name='world'；
场景。添加（root1）；
});
loader.load（“assets/model2.glb”，（gltf）=>{
root2=gltf.scene；
root2.name='clouds'；
场景。添加（root2）；
});
loader.load（“assets/house.glb”，（gltf）=>{
root3=gltf.scene；
root3.name='house'；
场景。添加（root3）；
});
loader.load（“assets/city.glb”，（gltf）=>{
root4=gltf.scene；
root4.name='city'；
场景。添加（root4）；
});
//const geometry=new THREE.BoxGeometry（）；
//const material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
//常量立方体=新的三个网格（几何体、材质）；
//立方体比例y=3；
//场景.添加（立方体）；
//照明
恒光1=新的三方向光（0x404040）；
常量灯光2=新的三个环境灯光（0x404040）；
light1.位置y=2；
light1.位置z=2；
光照强度=2；
光明1.阴影黑暗=.1
light2.position.y=-2；
light2.position.z=-2；
光照强度=2；
光2.阴影黑暗=.1
场景。添加（light1）；
场景。添加（light2）；
//轨道控制
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.enableZoom=true；
controls.enablePan=false；
controls.maxDistance=12；
controls.minDistance=1.3；
controls.maxPolarAngle=2.5；
controls.minPolarAngle=.5；
controls.enableDamping=true；
控件更新（）；
//悬停控件
const raycaster=new THREE.raycaster（）；
const pointer=new THREE.Vector2（）；
让我们相交；
document.addEventListener（'mousemove'，onPointerMove）；
函数onPointerMove（事件）{
指针.x=（event.clientX/window.innerWidth）*2-1；
指针.y=-（event.clientY/window.innerHeight）*2+1；
}
函数hoverObj（）{
raycaster.setFromCamera（指针、摄像头）；
const intersects=raycaster.intersectObjects（scene.children）；
如果（相交长度>0）{
if（相交！=相交[0]。对象）{
如果（相交）相交.material.emissive.setHex（相交.currentHex）；
控制台日志（“yo”）
var INTERSECTED=相交