ThreeJS - 如何将环境贴图应用于导入的对象模型?
ThreeJS - How can I apply an environment map to an imported obj model?
编辑: 我遇到了关于此 post -- How to assign a material to ColladaLoader or OBJLoader 的解决方案。我使用以下代码实现了允许我在导入的 .obj 上使用 envMaterial 立方体贴图的效果 -
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 );
} );
不幸的是,我不得不牺牲 .mtl 文件,所以我的下一步将是尝试恢复导出的 .mtl 纹理,并以某种方式将其与立方体贴图混合 material。 (我将其标记为已回答,显然欢迎任何进一步的输入。)
EDIT: 混合原始纹理和 envmap 注释的解决方案见下文。希望有用!
OP:
我有一个从 blender 导出的环境立方体贴图 - 我可以将环境贴图很好地应用于生成的几何体,但我如何将它应用于我导入的 .obj 模型?
我相信我能在这个演示中找到最接近的例子 - 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 ) } );
但是它运行在 BinaryLoader 之外,我不认为我可以将其与 blender 导出一起使用 -(我可能是错的?)
这就是我的装载机 envmap/skybox 和工作生成立方体的样子..
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);
});
非常感谢!
您可以使用如下模式将环境贴图添加到 OBJ 模型的现有材料中:
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 );
} );
编辑: 我遇到了关于此 post -- How to assign a material to ColladaLoader or OBJLoader 的解决方案。我使用以下代码实现了允许我在导入的 .obj 上使用 envMaterial 立方体贴图的效果 -
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 );
} );
不幸的是,我不得不牺牲 .mtl 文件,所以我的下一步将是尝试恢复导出的 .mtl 纹理,并以某种方式将其与立方体贴图混合 material。 (我将其标记为已回答,显然欢迎任何进一步的输入。)
EDIT: 混合原始纹理和 envmap 注释的解决方案见下文。希望有用!
OP: 我有一个从 blender 导出的环境立方体贴图 - 我可以将环境贴图很好地应用于生成的几何体,但我如何将它应用于我导入的 .obj 模型?
我相信我能在这个演示中找到最接近的例子 - 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 ) } );
但是它运行在 BinaryLoader 之外,我不认为我可以将其与 blender 导出一起使用 -(我可能是错的?)
这就是我的装载机 envmap/skybox 和工作生成立方体的样子..
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);
});
非常感谢!
您可以使用如下模式将环境贴图添加到 OBJ 模型的现有材料中:
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 );
} );