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

Question

编辑：我在这篇文章中遇到了一个解决方案——如何将材料分配给ColladaLoader或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纹理，并以某种方式将其与立方体贴图材料混合。（我将此标记为已回答，显然欢迎任何进一步的输入。）

编辑：混合原始纹理和环境贴图注释的解决方案如下。希望这个有用！

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运行的，我不相信我可以将其用于搅拌机出口-（我可能错了？）

这就是我的加载程序envmap/skybox和正在工作的gen'd多维数据集的样子。。

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

非常感谢！

Answer 1

您可以使用以下模式将环境地图添加到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 );
    } );