how to change Environment map texture dynamically on reflection material

Question

in threejs i want to change the skybox textures dynamically, am added 2 scenes here so i attached one scene to my skybox, so i decided to remove the skybox before switch from on texture to another, and the skybox textures are reflecting Environmentmap on the object, if i change the textures by select from the given list, am checking textures with the switch case and adding the texture , the reflection on the object is working, but if i switch skyBoxMaterial to selected texture Enviromentmap changed successfully but the reflection on the object is not changed to current Enviromentmap

Following is my code:

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);


                    }
                    });



            }

1. With all due respect, you need to practice debugging your code yourself. Use three.js, not three.min.jsfor that purpose. Ask questions about three.js, not help-me-debug-my-code-questions. 2. Remove the needsUpdate flags, and add them only when needed. 3. What is child.material.map = reflectionMaterial ??? — WestLangley
Hi @WestLangley thank you so much for the valuable reply, i tried myself to debug the code, but failed so only am asking the question to debug,, child.material.map = reflectionMaterial is the traverse of the object with the where reflectionMaterial isvar reflectionMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc, envMap: cubemap }); — Jothi Kannan
and now am getting TypeError: offset is undefined in three.js online 25341 i will try to fix it — Jothi Kannan
child.material.map is a THREE.Texture. reflectionMaterial is a THREE.MeshBasicMaterial. — WestLangley
so we can't apply reflectionMaterial to child.material.map ?? actually i want a Environment for an object, and that the Environment reflection will apply to my model as like in the attached image imgur.com/5ZGmwpv, it is working fine, but while switch from one Environment to others i can't override the reflection on object it still on the old environment reflection — Jothi Kannan

Jothi Kannan Jothi Kannan · Accepted Answer · 2014-07-16T15:04:23

After the work around fixed it myself

i used child.material=reflectionMaterial; instead of child.material.map = reflectionMaterial; and the refection is worked on the object material

So now while switch from one environment to another environment the reflection applied to my Object too

and there is no need of add new mesh below

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

how to change Environment map texture dynamically on reflection material

1 Answers