ThreeJS - 如何将环境贴图应用于导入的 obj 模型?

问题描述

我在这篇文章中找到了一个解决方案——如何将材质分配给 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.. )

EDIT:混合原始纹理和 envmap 注释的解决方案见下文.希望这个有用！

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

操作:我有一个从 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 上，我不相信我可以将其用于 Blender 导出 -(我可能错了?)

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

这就是我的加载器、envmap/skybox 和正常工作的 gen'd 立方体的样子..

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 模型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！