时间戳

首页 > 解决方案 > Three.js Importing gltf without a background

javascript - Three.js Importing gltf without a background

问题描述

There are 2 example scenes on Three.js (I'm using), that are teaching how to import gltf models.
Both using a RGBELoader function, which does initialize the background.

new RGBELoader()
                .setDataType( THREE.UnsignedByteType )
                .setPath( 'textures/equirectangular/' )
                .load( 'venice_sunset_2k.hdr', function ( texture ) {

                    var cubeGenerator = new EquirectangularToCubeGenerator( texture, { resolution: 1024 } );
                    cubeGenerator.update( renderer );

                    //background = cubeGenerator.renderTarget;

                    var pmremGenerator = new PMREMGenerator( cubeGenerator.renderTarget.texture );
                    pmremGenerator.update( renderer );

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

                    envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;

                    pmremGenerator.dispose();
                    pmremCubeUVPacker.dispose();

I want now to get a empty background (or just a ground or smth) without loading that background.

It works to comment the "background" line in the code to see my object and NOT the background, but it should be unnecessary to load the textures for the background. When I'm commenting/deleting more things my object has no texture.

How can I see the helmet/boombox (example object in the example scene "gltf loader") and get rid of the background? I know that it has something to do with the "envmap"..

标签： javascriptthree.jsloadergltf

解决方案

但应该没有必要为背景加载纹理。

立方体纹理也用于 glTF 模型的环境贴图。因此，如果您真的想删除它，则必须删除webgl_loader_gltf中的以下代码部分。

gltf.scene.traverse( function ( child ) {
    if ( child.isMesh ) {
        child.material.envMap = envMap;
    }
} );

但是，这样做时头盔会或多或少变暗，因为环境贴图是场景中唯一的（间接）光源。然后，您可能想要添加环境光和定向光或点光。

three.js R109

推荐阅读