Question

我正在尝试在threejs中重新创建Sketchfab的“环境”功能。

我希望Threejs中的模型可以显示传统的环境地图（一个位置的360张图片），但是我希望场景中显示的环境是模糊的环境图像。

我尝试加载两个立方体纹理，并将其中一个应用于模型的envMap，将另一个应用于场景。

    var loader = new THREE.TextureLoader();
    loader.load( "../../image/download/img1.jpg", function ( texture ) {
        texture.encoding = THREE.sRGBEncoding;
        texture.anisotropy = maxAnisotropy;
        var cubemapGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 512 } );
        var cubeMapTexture = cubemapGenerator.update( renderer );
        var pmremGenerator = new THREE.PMREMGenerator( cubeMapTexture );
        pmremGenerator.update( renderer );
        var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
        pmremCubeUVPacker.update( renderer );
        envMapCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
        var envMap = envMapCubeRenderTarget ? envMapCubeRenderTarget.texture : null;


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

        object.material.envMap = envMap

        var loader2 = new THREE.TextureLoader();
        loader2.load( "../../image/download/img2.jpg", function ( texture ) {
            texture.encoding = THREE.sRGBEncoding;
            texture.anisotropy = maxAnisotropy;
            var cubemapGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 512 } );
            envMapBackground = cubemapGenerator.renderTarget;
            scene.background = envMapBackground; //old = texture
            scene.background.anisotropy = maxAnisotropy;
        });

     });

当我尝试使用两个立方体贴图时，我的场景仅呈现空白背景...

用threejs重新创建Sketchfab的“环境”-多个CubeMaps？

0 个答案: