Question

我想扩展threejs编辑器，以便能够加载类似于此示例的hdr环境贴图：http://threejs.org/examples/#webgl_materials_envmaps_hdr

我在app.js Start（）函数中成功加载了示例代码，不知何故，当在编辑器中执行完全相同的代码时，示例环面显示为亮白色而没有任何阴影。

加载环境贴图时是否有任何自动完成的操作？或者为什么它不能正常工作？

这是我正在使用的代码：

            //renderer = new THREE.WebGLRenderer( { antialias: false } );
            //renderer.setClearColor( new THREE.Color( 0xffffff ) );
            standardMaterial = new THREE.MeshStandardMaterial( {
                map: null,
                bumpScale: - 0.05,
                color: 0xffffff,
                metalness: 0.0,
                roughness: 1.0,
                shading: THREE.SmoothShading
            } );

            var genCubeUrls = function( prefix, postfix ) {
                return [
                    prefix + 'px' + postfix, prefix + 'nx' + postfix,
                    prefix + 'py' + postfix, prefix + 'ny' + postfix,
                    prefix + 'pz' + postfix, prefix + 'nz' + postfix
                ];
            };
            var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
            new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {

                var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
                pmremGenerator.update( renderer );

                var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
                pmremCubeUVPacker.update( renderer );

                hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
                standardMaterial.envMap = hdrCubeRenderTarget.texture;
                standardMaterial.needsUpdate = true;
                SetChildEnvMaps(editor.scene,hdrCubeRenderTarget.texture);

            } );
            //renderer.gammaInput = true;
            //renderer.gammaOutput = true;
            var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );;
            var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
            torusMesh1.position.x = 0.0;
            torusMesh1.castShadow = true;
            torusMesh1.receiveShadow = true;
            editor.scene.add( torusMesh1 );
            var textureLoader = new THREE.TextureLoader();
            textureLoader.load( "./textures/roughness_map.jpg", function( map ) {
                map.wrapS = THREE.RepeatWrapping;
                map.wrapT = THREE.RepeatWrapping;
                map.anisotropy = 4;
                map.repeat.set( 9, 2 );
                standardMaterial.roughnessMap = map;
                standardMaterial.bumpMap = map;
                standardMaterial.needsUpdate = true;
            } );

Answer 1

最后三个修改83-dev的工作。我可以通过点击将Mash从教程添加到编辑器的场景中。 http://image.prntscr.com/image/5adb87108f3045a69333916fc2f24d61.png 修订版82得到了与您相同的结果。

编辑中的threejs hdr环境贴图

1 个答案: