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;添加到加载程序中时，我的所有对象都会消失...如何正确映射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 });

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

1 个答案:

修改