Three.js transparent object and color change (load .obj + .mtl)

Question

I am using Three.js to load .obj + .mtl files to view 3d model in the browser. currently at the beginning and I will be happy if someone could help a little :)

Two things I did not understand yet:

The model on which I am working (need to drag with the mouse)

At the beginning of the scene the object is transparent and to be able to see it need to drag
How can I change the black color from the object? (There is a picture below to black )

My goal is to make it look more or less like here in sketchfab

Most of the code is from the castle example from script-tutorials ׂ(write at the top of the page)

I would appreciate any information or guidance.

score 0 · Answer 1 · answered May 12 '15 at 13:57

EDIT: Now I see you have played with some of this, just pay attention to the MTL tip.

Have you tried modifying the ambient/directional light components or adding them? it looks like you have to configure how light is apllied to your model.

ambient = new THREE.AmbientLight(0xFFFFFA); //most black
    scene.add( ambient );

    var directionalLight = new THREE.DirectionalLight( 0xffeedd ); //to see shaders
     directionalLight.position.set( 0, 0, 1 ).normalize(); //front of scene
     scene.add( directionalLight );

you may also change manually the Ks and Ke components of your material on the mtl file. A common problem is that they configure like this by default:

Ks 0.0000 0.0000 0.0000
Ke 0.0000 0.0000 0.0000

And they might be with some other values like 1 instead of 0 in order to correct light reflectance.

You can also be interested in centering your obj in the scene, you could do it by setting the position on the load of your model with something like

    var loader = new THREE.OBJMTLLoader();
                    loader.load( 'models/'mymodel.obj', 'textures/mymodel.mtl', function ( object ){

//after the load of your model you can modify it's initial position by
                    object.position.set(0,0,0); //in one step
                    object.position.y = -80; //or by separated components
                    scene.add(object);

});

or you can also modify camera parameters by

camera.position.z = 550 ; //for example

I hope you can do something with that.

Three.js transparent object and color change (load .obj + .mtl)

1 Answers1