将外部纹理添加到 three.js 场景对象

Question

刚刚接触了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; 时，我所有的对象都消失了……我怎样才能正确地将线框材料映射到平面对象？

var plane 和 plane.material 的工作示例注释掉： http://goo.gl/czSg7P

场景： http://goo.gl/BAVgVS

Answer 1

要映射纹理，您必须使用纹理创建材质并将其应用到平面。

如有必要，您可以设置纹理的重复：

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

不确定这是否会导致问题，但我制作了 a fiddle，这对我来说似乎一切正常。问题是我无法在我的小提琴中加载外部源，所以我不得不使用你的图像作为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 });