using a texture mesh and wireframe mesh in threejs

Question

I'm trying to draw a wireframe mesh and a textured mesh in threeJS but when I have both added to my scene the textured mesh doesn't display. Code below:

I'm having trouble creating two meshes that share the same geometry where one of the materials is wireframe and the other is a texture. If one of the materials is wireframe and the other is just a color fill it works fine- but as soon as I make the second material a texture it stops working.

If I comment out scene.add( wireMesh ); then the textured mesh shows up.

var wireMat =  new THREE.MeshBasicMaterial( { color:0x00FFFF, wireframe: true,                 transparent: true, overdraw:true } );
var wireMesh = new THREE.Mesh(geometry, wireMat);
scene.add( wireMesh );

var texture = texture = THREE.ImageUtils.loadTexture( 'textures/world.jpg' );

var imageMat = new THREE.MeshBasicMaterial( {color:0xffffff, map: texture } );

var fillMesh = new THREE.Mesh(geometry, imageMat);
scene.add( fillMesh );

Greg Tatum Greg Tatum · Accepted Answer · 2013-11-06T04:36:37

Under SceneUtils there is a createMultiMaterialObject(geometry, materials). It essentially creates multiple meshes that all share the same geometry all in a group.

Example:

var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [

    new THREE.MeshLambertMaterial( { color: 0xffffff} ),
    new THREE.MeshBasicMaterial( { color: 0x222222, wireframe: true} )

]);

THREE.SceneUtils source code

using a texture mesh and wireframe mesh in threejs

2 Answers