0

我想扩展 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;
            } );
4

1 回答 1

0

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

于 2016-12-13T08:19:01.493 回答