threejs 导出obj,ThreeJS-如何将环境映射应用于导入的obj模型？

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?

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!

解决方案

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

} );