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

问题

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!

回答1:

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

    } );

来源：https://stackoverflow.com/questions/34283963/threejs-how-can-i-apply-an-environment-map-to-an-imported-obj-model

标签

three.js

blender