ThreeJS - Как я могу применить карту окружения к импортированной модели obj?

РЕДАКТИРОВАТЬ: Я нашел решение на этом посту -Как назначить материал для ColladaLoader или OBJLoader, Я использовал следующий код, который позволил мне использовать кубическую карту envMaterial на импортированном .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 и каким-то образом смешать это с материалом кубической карты. (Я отмечаю это как ответ, любой дальнейший вклад, очевидно, приветствуется ..)

РЕДАКТИРОВАТЬ: Решение этой проблемы смешивания исходной текстуры и комментариев envmap см. Ниже. Надеюсь, что это полезно!

OP: У меня есть кубическая карта среды, экспортированная из blender - я могу применить envmap к сгенерированной мелкой геометрии, но как мне применить ее к моей импортированной модели .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 и работающий gen'd cube ..

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

Большое спасибо!

Ответы на вопрос(1)

Ваш ответ на вопрос