0

この例のような hdr 環境マップをロードできるように、threejs エディターを拡張したいと考えています: 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 に答える