ThreeJS - How can I apply an environment map to an imported obj model?

Question

EDIT: I have come across a solution on this post -- How to assign a material to ColladaLoader or OBJLoader. I used the following code which achieved the effect of allowing me to use the envMaterial cubemap on the imported .obj -

    var loader = new THREE.OBJLoader();

    loader.load( 'models/refTestblend.obj', function ( object ) {

      object.traverse( function ( child ) {

          if ( child instanceof THREE.Mesh ) {

              child.material = envMaterial;

          }

      } );

      scene.add( object );

    } );

Unfortunately, I have had to sacrifice the .mtl file however, so the next step in my quest will be to attempt to reinstate the exported .mtl textures and somehow mix this will the cubemap material. ( I'm marking this as answered, any further input obviously welcome.. )

EDIT: The solution to this issue of mixing the original texture and envmap comments see below. Hope this is of use!

OP: I have an environment cubemap exported from blender - I can apply the envmap to generated geometry fine, but how do I apply it to my imported .obj model?

I believe the closest example I can find it this demo - http://mrdoob.github.io/three.js/examples/webgl_materials_cubemap.html

loader = new THREE.BinaryLoader();
loader.load( "obj/walt/WaltHead_bin.js", function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } );

However it runs off the BinaryLoader, which I don't believe I can use with blender exports - (I may be wrong?)

This is what my loader, envmap/skybox, and working gen'd cube looks like..

    var urls = [
        'models/cubemap/right.png',
        'models/cubemap/left.png',
        'models/cubemap/top.png',
        'models/cubemap/bottom.png',
        'models/cubemap/front.png',
        'models/cubemap/back.png'
    ];


    // create the cubemap
    var cubemap = THREE.ImageUtils.loadTextureCube(urls);
    cubemap.format = THREE.RGBFormat;

    // create a custom shader
    var shader = THREE.ShaderLib["cube"];
    shader.uniforms["tCube"].value = cubemap;

    var material = new THREE.ShaderMaterial({

        fragmentShader: shader.fragmentShader,
        vertexShader: shader.vertexShader,
        uniforms: shader.uniforms,
        depthWrite: false,
        side: THREE.DoubleSide

    });

    // create the skybox
    var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);
    scene.add(skybox);

    var envMaterial = new THREE.MeshBasicMaterial({envMap:cubemap});

    var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);

    var cube = new THREE.Mesh(cubeGeometry, envMaterial);
    cube.name = 'cube';
    scene.add(cube);
    cube.position.set(-10, 0, 0);

    var loader = new THREE.OBJMTLLoader();
    loader.load("models/refTestblend.obj",
    "models/refTestblend.mtl",
    function(obj) {
    obj.translateY(-3);
    scene.add(obj);
    });

Many thanks!

What does THREE.OBJMTLLoader return? If its a Mesh you should be able to switch the material after loading to your envMaterial. — Ben Gannaway
If not you could export from Blender using the Three plugin and load geometry on its own using the jsonloader, then apply the envMaterial — Ben Gannaway
The objmtl loader brings in the model nicely, I believe as a mesh, I don't know how to manually apply the envMaterial once it is in? I can adjust the textures loaded in the .mtl file but as far as applying the cubemap I'm lost. Ultimately I'll want to have the textures used in the .mtl file in conjunction with the envmap as well. — Cult Digital

WestLangley WestLangley · Accepted Answer · 2015-12-15T16:30:40

You can add an environment map to the existing materials of your OBJ model using a pattern like this one:

    var loader = new THREE.OBJLoader();

    loader.load( 'myModel.obj', function ( object ) {

      object.traverse( function ( child ) {

          if ( child instanceof THREE.Mesh ) {

              child.material.envMap = myEnvironmentMap;
              // add any other properties you want here. check the docs.

          }

      } );

      scene.add( object );

    } );

ThreeJS - How can I apply an environment map to an imported obj model?

1 Answers