Creating a luminous impact on objects in three.js by utilizing OBJ and MTL loaders

I am striving to recreate the luminescent effect seen in the image below on my pants obj:

sample image

This is the current code I have:

        //pants map and obj

    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setBaseUrl( 'Ftest2/' );
    mtlLoader.setPath( 'Ftest2/' );
    mtlLoader.load( 'jean1.mtl', function( materials ) {


    materials.preload();


    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( 'Ftest2/' );
    objLoader.load( 'jean1.obj', function ( object ) {

        object.position.y = -24;
        pants = object; 
        pants.visible = true; 
        scene.add( pants );

        }, onProgress, onError );

        });

Furthermore, I am interested in exploring other effects such as wireframe display or creating a glass-like appearance using the given code. Is it possible to achieve this without directly mapping the .obj file?

Please keep in mind that I must utilize the mtl loader for this project.

Answer №1

By utilizing MeshBasicMaterial, I was able to achieve the specific aesthetic I was aiming for as opposed to using phong or lambert.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with a Vue3 project after running a Vite build in production mode?

When I run my project in development mode, everything works perfectly fine. However, when I build the project using `vite build´, some components stop functioning. Oddly enough, there are no errors displayed in the console or in the build logs. If I use ...

Looking to modify the CSS of an element during a drop event using interact.js?

I've encountered an issue in my code where setAttribute and .transform are not working as expected. I have tried using them within the ondrop event function, but with no success. interact('.dropzone') .dropzone({ // Setting the r ...

What is the best way to transfer floating point input values from one page to another for later retrieval?

Is there a way to send floating point values to another page? I tried sending a floating point value in an AJAX request, but the receiving page only gets an integer value. <div class="form-group"> <label for="" class="col-sm-4 control-label"> ...

Having trouble determining why the design is not displaying correctly

I'm currently working on a calendar webpage, and everything looks perfect until I add the new JavaScript element. Suddenly, the numbers in the first row start behaving strangely. I've tried to troubleshoot but can't seem to figure out what&a ...

My goal is to monitor every action (button) that users take while using the PDF viewer

Each browser displays the view differently, and I am interested in monitoring specific user actions such as button presses on a PDF viewer. I am currently setting up an iframe and configuring its attributes. Is there a way to achieve this? ...

The method you are trying to access in Typescript is not present on the specified class

Here is a code snippet that showcases the use of state handling in TypeScript: type StateTypes = State1 | State2; class State1 { static handleA (): StateTypes { // Do Something return State2; } static handleB (): StateTy ...

Expo-three is experiencing an issue with its lights not functioning properly in threejs

Seeking assistance: I recently discovered the compatibility of the ThreeJS library with react-native, which is truly remarkable! After conducting a small experiment, I encountered some issues with the lighting. Unfortunately, I am unable to modify the ligh ...

Ways to make an AngularJS Expression show an empty value

Consider the following HTML snippet: <p>{{ booleanVariable ? "The variable is true!" : "" }}</p> In case 'booleanVariable' evaluates to false, the expression should display nothing and the <p></p> tags should not be show ...

When the Add button in AngularJS is clicked, a new popup page should appear by concealing the parent page

I am currently working on a project that involves using the AngularJS/Breeze framework within the HotTowel Template. One of the requirements I have is to include a button/link labeled "Add" on the parent.html page. When this button is clicked, it should t ...

Steps to Retrieve and Showcase a Compilation of YouTube Clips with JavaScript

Recently, I managed to write a C code that retrieves the list of YouTube videos from the URL "*http://gdata.youtube.com/feeds/api/standardfeeds/top_rated*" using the libsoup library. By utilizing libxml2, I was able to parse the XML data and extract specif ...

Loop through an array of buttons using an event listener

My HTML and Javascript code currently have the functionality to show/hide a row of 3 images upon button click. However, I need this feature to work for two additional rows similar to this one. I believe it involves looping through an array of buttons, but ...

Angular JS - Establishing a Connection to Woocommerce OAuth v1

I'm having trouble authenticating myself with the rest service. I attempted to use this library to generate all the necessary parameters as mentioned here, and I constructed the request like this: $scope.oauth = new OAuth({ consumer: { p ...

Prevent automatic scrolling to the top following an AJAX request

Question about Preventing Scrolling to Top: How can I prevent a web page from scrolling to the top when a link triggers javascript? Whenever an ajax request occurs, my browser automatically scrolls to the top. In order to return to my desired div sect ...

Utilize Function to Gain Access to React Context

As I work on developing a package that enhances the responsiveness of my React widget, I have encountered an issue. The responsiveness now relies not on the viewport width, but rather on the width of the widget container element. Presently, I am wrapping ...

Angular mouse over causing problems with Bootstrap date picker functionality

I'm currently utilizing a combination of Bootstrap date picker and Angular. Within my project, I have implemented a dropdown menu/form that only appears on mouse hover. This dropdown menu includes the Bootstrap date picker. However, there is an issue ...

MERN stack: HTML is currently processing while React is failing to compile

I can't seem to figure out why I'm not receiving an error message, but when trying to launch a react app with node, only the Html is being displayed. Am I overlooking something? I've attempted the <script type="text/babel" src=".. ...

When working with Angular Universal, using d3.select may result in a "reference error: document is not defined" in the server.js file

I'm currently working on an Angular project that uses server-side rendering to generate D3 charts. Each chart is encapsulated within its own component, such as a line-chart component which consists of TypeScript, spec.ts, HTML, and CSS files for rende ...

What is the significance of providing a sole argument to the Object () function?

Answering a related question about object constructors, what is the intention behind passing an argument to the constructor of objects and using it in this specific manner? function makeFoo(a, b) { var foo = Object.create(Foo.prototype); var res ...

How can I swap a string for a symbol in JavaScript?

Is there a way to convert the text @abc some text here to <a href="some_url">@abc</a> some text here using JavaScript? Are there any libraries that can help with this task? ...

When the value remains unchanged, Angular's @Input() value does not get updated

Upon running this program, I initially receive the output as false, 5, 500 since they have been initialized in the child component. However, upon clicking the update button, I am unable to revert to the previous values. Instead of getting true, 10, 1000, I ...