Modifying colors and applying transparency to objects in Three.js (loading from .obj + .mtl files)

Question

Modifying colors and applying transparency to objects in Three.js (loading from .obj + .mtl files)

Currently, I am working with Three.js to load .obj + .mtl files in order to view a 3D model within a web browser. I am at the beginning stages and would greatly appreciate some assistance.

Two things that are currently puzzling me:

The model I am working on (requires mouse dragging)

Initially, the object appears transparent in the scene and requires dragging to make it visible
How can I change the black color of the object? (There is an image below showing it in black)

My aim is to make it resemble this example on Sketchfab

The majority of the code is taken from the castle example on script-tutorialsׂ(mentioned at the top of the page)

Any information or guidance would be greatly appreciated.

javascript 3d three.js .obj wavefront

Answer 1

Answer №1

UPDATE: I've noticed that you've made some adjustments, but don't forget about the MTL tip.

Have you experimented with modifying the ambient and directional light components or adding them? It seems like you need to customize how light affects your model.

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

    var directionalLight = new THREE.DirectionalLight( 0xffeedd ); //for shader visibility
     directionalLight.position.set( 0, 0, 1 ).normalize(); //front of scene
     scene.add( directionalLight );

You can also manually adjust the Ks and Ke components in your material's MTL file. Sometimes they default to:

Ks 0.0000 0.0000 0.0000
Ke 0.0000 0.0000 0.0000

They may need different values like 1 instead of 0 for proper light reflection.

You might want to center your obj in the scene by setting its initial position when loading the model like this:

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

//change the initial position of your model after loading
                    object.position.set(0,0,0); //in one step
                    object.position.y = -80; //or individually
                    scene.add(object);

});

Alternatively, adjust camera parameters like this:

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

I hope this information is helpful for your project.

Answer 2

UPDATE: I've noticed that you've made some adjustments, but don't forget about the MTL tip.

Have you experimented with modifying the ambient and directional light components or adding them? It seems like you need to customize how light affects your model.

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

    var directionalLight = new THREE.DirectionalLight( 0xffeedd ); //for shader visibility
     directionalLight.position.set( 0, 0, 1 ).normalize(); //front of scene
     scene.add( directionalLight );

You can also manually adjust the Ks and Ke components in your material's MTL file. Sometimes they default to:

Ks 0.0000 0.0000 0.0000
Ke 0.0000 0.0000 0.0000

They may need different values like 1 instead of 0 for proper light reflection.

You might want to center your obj in the scene by setting its initial position when loading the model like this:

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

//change the initial position of your model after loading
                    object.position.set(0,0,0); //in one step
                    object.position.y = -80; //or individually
                    scene.add(object);

});

Alternatively, adjust camera parameters like this:

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

I hope this information is helpful for your project.

Modifying colors and applying transparency to objects in Three.js (loading from .obj + .mtl files)

Answer №1

Similar questions

The error message "Unexpected token" occurs when using async function prefix in TypeScript

MUI: The fontFamily property is not able to be overridden by nesting within the

Is it better to master JavaScript before diving into JQuery?

"After completing the survey form, the User Details form is displayed upon clicking the submit button

"Experience the latest version of DreamFactory - 2.0.4

Could anyone assist me in resolving the error stating, "The 'Argument `where` of type UserWhereUniqueInput needs at least one of `id` arguments"?

When using AJAX with CodeIgniter, session data is not being saved properly

Limiting the length of numbers in Material UI

Content that is set to a fixed position within a hidden element will remain at the top

Opacity of a three.js box geometry

Is there a way to ensure that functions operate effectively within a modal window?

Tips on creating a personalized memoizeOne function that delivers the accurate data type

A step-by-step guide on accessing and displaying local Storage JSON data in the index.html file of an Angular project, showcasing it on the

The issue with the callback function not being triggered within a self-repeating loop

When attempting to click the "New" button in a lightning datatable to add a new row, an error

Encountering a next-i18next 404 error while attempting to access pages with localeSubpaths configuration enabled

Encountering issues with Node.js and Socket.io not displaying results on Internet Explorer when using a secure connection

Is there a way for me to identify the value within useCallback without any intermediaries?

Add C# iteration with JavaScript on ASP.NET directories

Creating a dynamic user interface in Angular 6 that successfully tracks changes without reliance on the parent