ThreeJS-如何将环境映射应用于导入的obj模型？ [英] ThreeJS - How can I apply an environment map to an imported obj model?

问题描述

编辑：我在这篇文章中遇到了一个解决方案-如何将材料分配给ColladaLoader或OBJLoader 。我使用了以下代码，其效果是允许我在导入的.obj中使用envMaterial多维数据集映射-

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

    } );

不幸的是，我不得不牺牲了.mtl文件，因此下一步我的追求将是试图恢复导出的.mtl纹理，并以某种方式将其混合成立方体贴图材质。 （我将其标记为已回答，显然欢迎任何进一步的输入。。）

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

编辑：混合原始文档的解决方案纹理和envmap注释请参见下文。希望这是有用的！

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

OP：
我有一个从Blender导出的环境立方体贴图-我可以将envmap应用于生成的几何形状很好，但是如何将其应用于导入的.obj模型？

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?

我相信最近的示例可以在此演示中找到它- http://mrdoob.github.io/three.js/examples/webgl_materials_cubemap.html

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

但是它运行在BinaryLoader上，我认为我不能将其用于搅拌机出口-（我可能是错了吗？）

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

这就是我的加载器，envmap / skybox和可工作的生成立方体的样子。

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

非常感谢！

推荐答案

您可以使用如下模式将环境图添加到OBJ模型的现有材料中：

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-如何将环境映射应用于导入的obj模型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！