CODEWITHSUNDEEP
three.jswebgl
dA_uNknOwN
dA_uNknOwN

Reputation: 981

three.js - Add Material to OBJ Loader (WEBGL)

Hi, i tried already different sourcecodes for adding material to a geometry but if i add code like this:

var material1 = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );

i dont get shading /material to my obj (model) . its like a flat view. Example: http://dev.interactive-creation-works.net/Three/viewer.html

// This string has to be the path to your texture file.
loader.load( '0.jpg' );

/*** OBJ Loading ***/
var loader = new THREE.OBJLoader();

// As soon as the OBJ has been loaded this function looks for a mesh
// inside the data and applies the texture to it.
loader.addEventListener( 'load', function ( event ) {
var object = event.content;
object.traverse( function ( child ) {
  if ( child instanceof THREE.Mesh ) {
    child.material.map = texture;
  }
} );

 // object = new THREE.Mesh( geometry, [ new THREE.MeshFaceMaterial(), new   THREE.MeshPhongMaterial( { color: 0xff4400, wireframe: true, wireframeLinewidth: 2 } ) ] );
object = new THREE.Mesh(geometry);

// My initial model was too small, so I scaled it upwards.
object.scale = new THREE.Vector3( 25, 25, 25 );

// You can change the position of the object, so that it is not
// centered in the view and leaves some space for overlay text.
object.position.y -= 2.5;
scene.add( object );

});

// This string has to be the path to your object file.
loader.load( '0.obj' );

// We set the renderer to the size of the window and
// append a canvas to our HTML page.
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

Anyone can eventually help me out ?

Upvotes: 0

Views: 7071

Answers (2)

yaku
yaku

Reputation: 3111

Use MeshPhongMaterial (or Lambert) without the wireframe attribute to get a material that plays nice with lights (shaded). Eg.

var material1 = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );

MeshBasicMaterial is always flat.

Also you only replace the texture (map), not material in the load callback / traverse function. You need to assign the material there to the object, if you only replace the map, the material type will be whatever the .obj loader created.

Upvotes: 1

gaitat
gaitat

Reputation: 12632

Does your model have UV coords? The code in this question object importing in Three.js does exactly the same thing.

Upvotes: 2

Related Questions