Javascript Three.js：如何正确添加envMap？

现在我想要一种类似于这里的材料：

因此，我想补充以下内容：

* { 保证金：0； 填充：0； } .反对{ 位置：固定； 排名：0； 左：0； 宽度：100vw； 高度：100vh； 指针事件：无； 背景色：RGB200200200； } 将*作为三个从https://threejs.org/build/three.module.js; 从导入{OBJLoader}https://threejs.org/examples/jsm/loaders/OBJLoader.js; var容器； 摄像机、场景、渲染器； var mouseX=0， mouseY=0； var windowHalfX=window.innerWidth/2； var windowHalfY=window.innerHeight/2； var对象； 初始化； 使有生气 函数初始化{ 容器=document.createElementdiv； container.className=对象； document.body.appendChildcontainer； 摄像机=新的三视角摄像机 45, window.innerWidth/window.innerHeight， 1. 2000 ; 摄像机位置z=250； //场面 场景=新的三个场景； var ambientLight=新的3.AmbientLight0xCCCC，0.4； scene.addambientLight； var pointLight=新的三个点光源0xFFFFFF，2； pointLight.position.set100100,50； 摄像头。添加点光源； scene.addcamera； //经理 函数加载模型{ object.traversefunction子对象{ //这允许我们检查子对象是否是网格构造函数的实例 如果子实例为3.Mesh{ child.material=新的三点网格标准材质{ 颜色：555， 粗糙度：0.1， 金属度：0.4 }; child.material.flatShading=false； //有时.obj文件中缺少一些顶点法线，ThreeJs将计算它们 } }; object.position.y=-90； scene.addobject； } var manager=新的三点加载管理器加载模型； manager.onProgress=功能项，已加载，总计{ console.logitem，已加载，总计； }; //模型 函数onProgressxhr{ 如果xhr.length可计算{ var percentComplete=xhr.loaded/xhr.total*100； console.logmodel+Math.roundpercentComplete，下载2+%； } } 函数onError{} var loader=新的OBJLoadermanager； 装载机 https://threejs.org/examples/models/obj/female02/female02.obj, 功能对象{ 对象=obj； }, 关于进展， 一个错误 ; // renderer=new THREE.WebGLRenderer{alpha:true}； renderer.setPixelRatiowindow.devicePixelRatio； renderer.setSizewindow.innerWidth，window.innerHeight； container.appendChildrender.doElement； document.addEventListenermousemove，onDocumentMouseMove，false； // window.addEventListenerresize、onWindowResize、false； } 函数onWindowResize{ windowHalfX=window.innerWidth/2； windowHalfY=window.innerHeight/2； camera.aspect=window.innerWidth/window.innerHeight； camera.updateProjectionMatrix； renderer.setSizewindow.innerWidth，window.innerHeight； } 函数onDocumentMouseMoveevent{ mouseX=event.clientX-windowHalfX/2； mouseY=event.clientY-windowHalfY/2； } // 函数动画{ 请求动画帧动画； 提供 } 函数渲染{ camera.position.x+=mouseX-camera.position.x*0.05； camera.position.y+=-mouseY-camera.position.y*0.05； camera.lookAtscene.position； renderer.renderscene，摄影机； }

---

代码中的主要问题是加载对象时newEnvMap未就绪

通常，将环境贴图添加到场景的主要步骤包括：

导入EXRLoader。 使用THREE.PMREMGenerator创建预过滤、Mipmapped Radiance环境贴图PMREM。 使用新的EXRLoader或THREE.TextureLoader.Load加载EXR或JPG图像。 加载EXR后，必须使用此设置更新对象。在我制作的代码笔中，这是通过函数loadObjectAndAndEnvMap完成的。此函数用于加载模型并使用object.material.envMap=newEnvMap；更新envMap；。 不要忘记object.material.needsUpdate=true。 最后，如果要可视化背景本身，则需要设置scene.background=background；在渲染函数内部。 如果环境贴图仍然不可见，请检查材质的粗糙度、金属度和环境贴图强度。设置不反映环境的值是常见的错误。请参阅下面的一些示例。 * { 保证金：0； 填充：0； } .反对{ 位置：固定； 排名：0； 左：0； 宽度：100vw； 高度：100vh； 指针事件：无； 背景色：RGB200200200； } 将*作为三个从https://threejs.org/build/three.module.js; 从导入{OBJLoader}https://threejs.org/examples/jsm/loaders/OBJLoader.js; 从导入{EXRLoader}https://threejs.org/examples/jsm/loaders/EXRLoader.js; var容器； 摄像机、场景、渲染器； 让ExrcuberUnderTarget，exrBackground； 让纽恩 vMap； 让圆环网格，平面网格； var mouseX=0， mouseY=0； var windowHalfX=window.innerWidth/2； var windowHalfY=window.innerHeight/2； var对象； 初始化； 使有生气 函数初始化{ 容器=document.createElementdiv； container.className=对象； document.body.appendChildcontainer； 摄像机=新的三视角摄像机 45, window.innerWidth/window.innerHeight， 1. 2000 ; 摄像机位置z=250； //场面 场景=新的三个场景； /*var ambientLight=新的3.AmbientLight0xCCCC，0.4； scene.addambientLight； var pointLight=新的三个点光源0xFFFFFF，2； pointLight.position.set100100,50； 摄像头。添加点光源*/ scene.addcamera； //经理 函数加载模型{ THREE.DefaultLoadingManager.onLoad=函数{ pmremGenerator.dispose； }; // --------- 函数LoadObjectAndAndAndEnvMap{ object.traversefunction子对象{ //这允许我们检查子对象是否是网格构造函数的实例 如果子实例为3.Mesh{ child.material=新的三点网格标准材质{ 颜色：555， 粗糙度：0.0， 金属度：2.0， 环境强度：5.0 }; //child.material.flatShading=false； console.logmap； child.material.envMap=newEnvMap； child.material.needsUpdate=true； //有时.obj文件中缺少一些顶点法线，ThreeJs将计算它们 } }; object.position.y=-90； scene.addobject； } const pmremGenerator=新的3.PMREMGeneratorrenderer； pmremGenerator.compileeRequestAngularShader； 新型装载机 .setDataTypeTHREE.UnsignedByteType 负载 https://threejs.org/examples/textures/piz_compressed.exr, 功能纹理{ EXRCUBRENDERTARGET=pmremGenerator.fromEquirectangulartexture； exrBackground=exrCubeRenderTarget.texture； newEnvMap=exrCubeRenderTarget？exrCubeRenderTarget.texture:空； LoadObjectAndAndEndVMap；//加载纹理后添加环境贴图 纹理处理； } ; renderer.toneMapping=THREE.ACESFilmicToneMapping； renderer.outpunecoding=3.sRGBEncoding； } var manager=新的三点加载管理器加载模型； manager.onProgress=功能项，已加载，总计{ console.logitem，已加载，总计； }; //模型 函数onProgressxhr{ 如果xhr.length可计算{ var percentComplete=xhr.loaded/xhr.total*100； console.logmodel+Math.roundpercentComplete，下载2+%； } } 函数onError{} var loader=新的OBJLoadermanager； 装载机 https://threejs.org/examples/models/obj/female02/female02.obj, 功能对象{ 对象=obj； }, 关于进展， 一个错误 ; // renderer=new THREE.WebGLRenderer{alpha:true}； renderer.setPixelRatiowindow.devicePixelRatio； renderer.setSizewindow.innerWidth，window.innerHeight； container.appendChildrender.doElement； document.addEventListenermousemove，onDocumentMouseMove，false； // window.addEventListenerresize、onWindowResize、false； } 函数onWindowResize{ windowHalfX=window.innerWidth/2； windowHalfY=window.innerHeight/2； camera.aspect=window.innerWidth/window.innerHeight； camera.updateProjectionMatrix； renderer.setSizewindow.innerWidth，window.innerHeight； } 函数onDocumentMouseMoveevent{ mouseX=event.clientX-windowHalfX/2； mouseY=event.clientY-windowHalfY/2； } // 函数动画{ 请求动画帧动画； 提供 } 函数渲染{ camera.position.x+=mouseX-camera.position.x*0.05； camera.position.y+=-mouseY-camera.position.y*0.05； camera.lookAtscene.position； scene.background=exrBackground； renderer.toneMappingExposure=1.0； renderer.renderscene，摄影机； }