title: Three.js: How to change "diffuseMap" and "roughnessMap" to "cubeMap"?
body: <p>This is the code I would like to work with:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var container;
  var camera, scene, renderer;
  let exrCubeRenderTarget, exrBackground;
  let newEnvMap;
  let torusMesh, planeMesh;
  
  var mouseX = 0,
    mouseY = 0;
  
  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;
  
  var object;
  
  init();
  animate();
  
  function init() {
    container = document.createElement("div");
    container.className = "object";
    document.body.appendChild(container);
  
    camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      1,
      2000
    );
    camera.position.z = 250;
  
    // scene
  
    scene = new THREE.Scene();
    scene.add(camera);
  
    // manager
    function loadModel() {
      THREE.DefaultLoadingManager.onLoad = function() {
        pmremGenerator.dispose();
      };
  
      // -----------------
  
      function loadObjectAndAndEnvMap() {
  
        const textureLoader = new THREE.TextureLoader();
        const diffuseMap = textureLoader.load('https://threejs.org/examples/textures/brick_diffuse.jpg');
        const roughnessMap = textureLoader.load('https://threejs.org/examples/textures/brick_roughness.jpg');
  
        object.traverse(function(child) {
          //This allow us to check if the children is an instance of the Mesh constructor
          if (child instanceof THREE.Mesh) {
            child.material = new THREE.MeshStandardMaterial({
              color: "#555",
              roughness: 1.0,
              metalness: 0.5,
              envMapIntensity: 5.0
            });
  
            child.material.envMap = newEnvMap;
            child.material.map = diffuseMap;
            child.material.roughnessMap = roughnessMap;
            child.material.needsUpdate = true;
  
            //Sometimes there are some vertex normals missing in the .obj files, ThreeJs will compute them
          }
        });
        object.position.y = -90;
        scene.add(object);
      }
  
      const pmremGenerator = new THREE.PMREMGenerator(renderer);
      pmremGenerator.compileEquirectangularShader();
  
      new THREE.EXRLoader()
        .setDataType(THREE.UnsignedByteType)
        .load(
          "https://threejs.org/examples/textures/piz_compressed.exr",
          function(texture) {
            exrCubeRenderTarget = pmremGenerator.fromEquirectangular(texture);
            exrBackground = exrCubeRenderTarget.texture;
            newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
  
            loadObjectAndAndEnvMap(); // Add envmap once the texture has been loaded
  
            texture.dispose();
          }
        );
  
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      renderer.outputEncoding = THREE.sRGBEncoding;
    }
  
    var manager = new THREE.LoadingManager(loadModel);
  
    manager.onProgress = function(item, loaded, total) {
      console.log(item, loaded, total);
    };
  
  
    var loader = new THREE.OBJLoader(manager);
    loader.load(
      "https://threejs.org/examples/models/obj/female02/female02.obj",
      function(obj) {
        object = obj;
      }
    );
  
    //
  
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
  
    document.addEventListener("mousemove", onDocumentMouseMove, false);
  
    //
  
    window.addEventListener("resize", onWindowResize, false);
  }
  
  function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
  
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
  
  function onDocumentMouseMove(event) {
    mouseX = (event.clientX - windowHalfX) / 2;
    mouseY = (event.clientY - windowHalfY) / 2;
  }
  
  //
  
  function animate() {
    requestAnimationFrame(animate);
    render();
  }
  
  function render() {
    camera.position.x += (mouseX - camera.position.x) * 0.05;
    camera.position.y += (-mouseY - camera.position.y) * 0.05;
  
    camera.lookAt(scene.position);
  
    scene.background = exrBackground;
    renderer.toneMappingExposure = 1.0;
    renderer.render(scene, camera);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/three@0.125.2/examples/js/loaders/OBJLoader.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/three@0.125.2/examples/js/loaders/EXRLoader.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Instead of the existing material, I would like to have a metallic material like <a href="https://threejs.org/examples/#webgl_materials_cubemap_dynamic" rel="nofollow noreferrer">here</a>.</p>
  <p>For this, I have tried to delete <code>diffuseMap</code> and <code>roughnessMap</code>, and add <code>cubeMap</code>.</p>
  <p>That's my not working result:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var container;
  var camera, scene, renderer;
  let newEnvMap;
  let torusMesh, planeMesh;
  
  var mouseX = 0,
    mouseY = 0;
  
  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;
  
  var object;
  
  init();
  animate();
  
  function init() {
    container = document.createElement("div");
    container.className = "object";
    document.body.appendChild(container);
  
    camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      1,
      2000
    );
    camera.position.z = 250;
  
    // scene
  
    scene = new THREE.Scene();
    scene.add(camera);
  
    // manager
    function loadModel() {
      THREE.DefaultLoadingManager.onLoad = function() {
        pmremGenerator.dispose();
      };
  
      // -----------------
  
      function loadObjectAndAndEnvMap() {
  
        const textureLoader = new THREE.TextureLoader();
  
        textureLoader.load('https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg', function(texture) {
  
          texture.encoding = THREE.sRGBEncoding;
          texture.mapping = THREE.EquirectangularReflectionMapping;
  
          init(texture);
          animate();
  
        });
  
  
        object.traverse(function(child) {
          //This allow us to check if the children is an instance of the Mesh constructor
          if (child instanceof THREE.Mesh) {
            child.material = new THREE.MeshStandardMaterial({
              color: "#555",
              roughness: 1.0,
              metalness: 0.5,
              envMapIntensity: 5.0
            });
  
            child.material.envMap = newEnvMap;
            child.material.needsUpdate = true;
  
            //Sometimes there are some vertex normals missing in the .obj files, ThreeJs will compute them
          }
        });
        object.position.y = -90;
        scene.add(object);
      }
  
      const pmremGenerator = new THREE.PMREMGenerator(renderer);
      pmremGenerator.compileEquirectangularShader();
  
  
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      renderer.outputEncoding = THREE.sRGBEncoding;
    }
  
    var manager = new THREE.LoadingManager(loadModel);
  
    manager.onProgress = function(item, loaded, total) {
      console.log(item, loaded, total);
    };
  
  
    var loader = new THREE.OBJLoader(manager);
    loader.load(
      "https://threejs.org/examples/models/obj/female02/female02.obj",
      function(obj) {
        object = obj;
      }
    );
  
    //
  
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
  
    document.addEventListener("mousemove", onDocumentMouseMove, false);
  
    //
  
    window.addEventListener("resize", onWindowResize, false);
  }
  
  function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
  
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
  
  function onDocumentMouseMove(event) {
    mouseX = (event.clientX - windowHalfX) / 2;
    mouseY = (event.clientY - windowHalfY) / 2;
  }
  
  //
  
  function animate() {
    requestAnimationFrame(animate);
    render();
  }
  
  function render() {
    camera.position.x += (mouseX - camera.position.x) * 0.05;
    camera.position.y += (-mouseY - camera.position.y) * 0.05;
  
    camera.lookAt(scene.position);
  
    renderer.toneMappingExposure = 1.0;
    renderer.render(scene, camera);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/three@0.125.2/examples/js/loaders/OBJLoader.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The background should be transparent in the end, only the OBJ object should be visible.</p>
  <p>Could somebody help me please? Would be soooo happy about it!</p>