Question

在threejs我想动态更改天空盒纹理，我在这里添加了2个场景，所以我将一个场景附加到我的天空盒，所以我决定在从纹理切换到另一个之前移除天空盒，并且天空盒纹理反映了环境贴图在对象上，如果我通过从给定列表中选择来更改纹理，我使用开关案例检查纹理并添加纹理，对象上的反射正在工作，但是如果我将skyBoxMaterial切换到所选纹理Enviromentmap已成功更改但反射在对象上没有更改为当前的环境地图

以下是我的代码：

function envmap(envmap)
            {

                switch(envmap)
                {
                case 'canary':

                     var urls = [
                          'textures/cube/canary/pos-x.png',
                          'textures/cube/canary/neg-x.png',
                          'textures/cube/canary/pos-y.png',
                          'textures/cube/canary/neg-y.png',
                          'textures/cube/canary/pos-z.png',
                          'textures/cube/canary/neg-z.png'
                        ];
                    //var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
                break;

                case 'Park2':

                     var urls = [
                          'textures/cube/Park2/posx.jpg',
                          'textures/cube/Park2/negx.jpg',
                          'textures/cube/Park2/posy.jpg',
                          'textures/cube/Park2/negy.jpg',
                          'textures/cube/Park2/posz.jpg',
                          'textures/cube/Park2/negz.jpg'
                        ];
                    //var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
                break;

                case 'Park3Med':

                     var urls = [
                          'textures/cube/Park3Med/px.jpg',
                          'textures/cube/Park3Med/nx.jpg',
                          'textures/cube/Park3Med/py.jpg',
                          'textures/cube/Park3Med/ny.jpg',
                          'textures/cube/Park3Med/pz.jpg',
                          'textures/cube/Park3Med/nz.jpg'
                        ];
                    //var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
                break;

                case 'Bridge2':

                     var urls = [
                          'textures/cube/Bridge2/posx.jpg',
                          'textures/cube/Bridge2/negx.jpg',
                          'textures/cube/Bridge2/posy.jpg',
                          'textures/cube/Bridge2/negy.jpg',
                          'textures/cube/Bridge2/posz.jpg',
                          'textures/cube/Bridge2/negz.jpg'
                        ];
                    //var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
                break;

                case 'pisa':

                     var urls = [
                          'textures/cube/pisa/px.png',
                          'textures/cube/pisa/nx.png',
                          'textures/cube/pisa/py.png',
                          'textures/cube/pisa/ny.png',
                          'textures/cube/pisa/pz.png',
                          'textures/cube/pisa/nz.png'
                        ];
                    //var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
                break;

                default:

                 var urls = [
                          'textures/cube/canary/pos-x.png',
                          'textures/cube/canary/neg-x.png',
                          'textures/cube/canary/pos-y.png',
                          'textures/cube/canary/neg-y.png',
                          'textures/cube/canary/pos-z.png',
                          'textures/cube/canary/neg-z.png'
                        ];

                break;
                }

                    var cubemap = THREE.ImageUtils.loadTextureCube(urls,undefined, render); // load textures
                    cubemap.needsUpdate = true;

                    cubemap.format = THREE.RGBFormat;

                    var shader = THREE.ShaderLib['cube']; // init cube shader from built-in lib
                    shader.uniforms['tCube'].value = cubemap; // apply textures to shader

                    // create shader material
                    var skyBoxMaterial = new THREE.ShaderMaterial( {
                      fragmentShader: shader.fragmentShader,
                      vertexShader: shader.vertexShader,
                      uniforms: shader.uniforms,
                      depthWrite: false,
                      side: THREE.BackSide
                    });

                alert(skybox);
                if (skybox)
                {
                sceneCube.remove(skybox);   
                }

                skybox = new THREE.Mesh( new THREE.BoxGeometry( 1000, 1000, 1000 ), skyBoxMaterial );
                sceneCube.add( skybox );

                    var reflectionMaterial = new THREE.MeshBasicMaterial({
                      color: 0xcccccc,
                      envMap: cubemap
                    });


                    var object = scene.getObjectByName ("myname", true);

                    object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh )
                    {
                    //child.geometry.computeFaceNormals();
                    var  geometry = child.geometry;
                    //console.log(geometry);

                    material = child.material;
                    material.transparent = true;

                    child.material.needsUpdate = true;

                    child.material.map = reflectionMaterial;

                    mesh = new THREE.Mesh(geometry, reflectionMaterial);
                    scene.add(mesh);


                    }
                    });



            }

Answer 1

自己解决后自行修复

我使用了child.material=reflectionMaterial;而不是child.material.map = reflectionMaterial;，并且对对象素材进行了反思

现在，当从一个环境切换到另一个环境时，反射也应用于我的对象

并且无需在

下添加新网格

  mesh = new THREE.Mesh(geometry, reflectionMaterial);
  scene.add(mesh);

如何在反射材质上动态更改环境贴图纹理

1 个答案: