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

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

• javascript
• opengl-es
• webgl
• three.js

2 Answers 2

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

Unfortunately it is not possible to share geometry between an object using wireframe and another one not using it. You'd need to clone that geometry. Which reminds me that we haven't done .clone() for Geometry yet.