добавление внешней текстуры к объекту сцены three.js

просто испачкал руки с three.js, и мне любопытно кое-что, что может быть относительно простым…

Я построил сцену в редакторе three.js и понял, как загрузить сцену. В редакторе я добавил изображение в качестве текстуры карты, но я понимаю, что он не будет знать, где он загружается извне на моем сервере. Итак, я загрузил сцену, объекты и источники света, но как я могу сопоставить свои текстуры с объектами?

// MATERIALS
    var wireframe = THREE.ImageUtils.loadTexture( 'textures/wireframe.jpg' );
    wireframe.wrapS = wireframe.wrapT = THREE.RepeatWrapping;
    wireframe.repeat.set( 4, 4 );
    var wireframeMaterial = new THREE.MeshLambertMaterial({ 
            map : wireframe, 
            side : THREE.DoubleSide 
        });


// LOAD SCENE
    var loader = new THREE.ObjectLoader();
    loader.load( 'js/scene.js', function ( obj ) {
        obj.traverse( function( node ) { 
            if ( node instanceof THREE.Mesh ) { 
                node.castShadow = true; 
                node.receiveShadow = true;
                var plane = scene.getObjectByName( "plane", true );
                plane.material = wireframeMaterial;
            } 
        });

        scene.add( obj );
        render();
    });

При добавлении plane.material = wireframeMaterial; в загрузчик все мои объекты просто исчезают... Как мне правильно отобразить wireframeMaterial объект плоскости?

рабочий пример с закомментированными var plane и plane.material: http://goo.gl/czSg7P

Сцена: http://goo.gl/BAVgVS


javascript three.js texture-mapping
person antonanton    schedule 14.01.2015    source источник
comment
Я еще раз обновил свой ответ и добавил скрипку, которая, кажется, работает.   -  person Wilt    schedule 20.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы сопоставить текстуру, вы должны создать материал, используя вашу текстуру, и применить его к своей плоскости.

При необходимости вы можете установить повторение вашей текстуры с помощью:

wireframe.wrapS = THREE.RepeatWrapping;
wireframe.wrapT = THREE.RepeatWrapping;
wireframe.repeat.set( 4, 4 );

И тогда вам нужно сделать что-то вроде этого:

material = new THREE.MeshLambertMaterial({ map : wireframe, side : THREE.DoubleSide });
plane.material = material;

РЕДАКТИРОВАТЬ

Вы создаете сцену внутри сцены. Поскольку загрузчик возвращает сцену, а затем вы снова добавляете ее в сцену. Это точно вызовет проблемы.

Попробуйте заменить scene.add( obj ); на это в вашем загрузчике:

for( var i = 0; i < obj.children.length; i++ ){
    scene.add( obj.children[i] );
}

Не уверен, что это вызывает проблему, но я сделал скрипку, и она все, кажется, работает нормально для меня. Проблема в том, что я не могу загружать внешние источники в свою скрипку, поэтому вместо этого мне пришлось использовать ваше изображение как строку base64, и код стал немного другим.

Это означает, что вам нужно немного изменить его, чтобы он снова работал с изображением из вашей локальной папки. Если вы замените всю часть кода //TEXTURE на следующую, она должна работать:

var texture = new THREE.ImageUtils.loadTexture( 'img/wireframe.jpg' );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1, 1 );

var textureMaterial = new THREE.MeshLambertMaterial({ map: texture, side : THREE.DoubleSide });
person Wilt    schedule 15.01.2015
comment
спасибо за ответ и скрипку! моя проблема в том, что в сцене, которую я построил... у меня есть два объекта... куб и плоскость. Я только хочу, чтобы текстура применялась к плоскости. если я удалю scene.add( obj );, то ни один из моих объектов не будет загружен из моей сцены. когда я реализую for( var i = 0; i < obj.children.length; i++ ){ scene.add( obj.children[i] ); }, то добавляется только первый объект в моей сцене, в данном случае самолет… - person antonanton; 20.01.2015