A Three.JS Environment with a THREE.JSONLoader for mapping

Hello, I am looking to load an environment map from a jpg file ( env.jpg ) onto an object that has been loaded using THREE.JSONLoader(). Unfortunately, I was unable to export this map using Maya, so it needs to be added in this way. Can anyone help me with how to do this? Below is my code.

Thank you

        loader.load(
            // resource URL
            'assets/alexander_test.json',

            // onLoad callback
            function ( geometry, materials ) {
                //new THREE.MeshNormalMaterial()
                var material = materials[ 0 ];
                console.log(material.normalMap);
                var object = new THREE.Mesh( geometry, material );
                object.castShadow = true;
                object.receiveShadow = true;
                object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                           child.receiveShadow = true;
                           child.castShadow = true;
                    }
                });

                scene.add( object );
            },

            // onProgress callback
            function ( xhr ) {
                console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
            },

            // onError callback
            function( err ) {
                console.log( 'An error happened' );
            }
        );

EDIT:

Here is the online example: Here is the environment map:

EDIT:

Check out this working fiddle: https://jsfiddle.net/xk12n88z/4/

Thanks

Answer №1

Solved!

After encountering a problem with OBJ and MTL loaders not loading normal or environment maps, I decided to try using the JSON loader instead. However, this solution only worked for normal maps, not environment maps. Finally, I switched to the FBX loader and found that it was able to successfully load both types of maps.

If you want to see a working example, check out: http://example.com/environment-map

Here's the code snippet that resolved my issue:

var loader = new THREE.FBXLoader();
loader.load('assets/model.fbx', function(object) {

    object.traverse(function(child) {

        if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }

    });

    scene.add(object);

});

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

How to retrieve the nearest sibling in AngularJS without using jQuery

Is there a way to access the nearest element in Angular without using jQuery, like the example below demonstrates with jQuery? link: function (scope, element, attrs) { function handler($event) { if(!($event.target).closest(element).length) { ...

What is the process for creating a list using AngularJS?

Looking to create a list of products including name, price, PV, and BV. Below is the JSON data stored in $scope : $scope.products = [ {"id":1,"name":'SP0300370 Nutrient Super Calcium powder',"price":21,"PV":18,"BV":18}, {"id":2,"name":'S ...

Error: Encountered an unexpected asterisk symbol while trying to import a Sequelize model from the

Currently, I am developing an application that requires me to connect and run queries on an SQL server using Sequelize. I have set up migrations, seeders, and models by utilizing sequelize init. However, when attempting to generate model objects with const ...

Exploring Angular data iteration with Tab and its contentLearn how to loop through Tab elements

Upon receiving a response from the API, this is what I get: const myObj = [ { 'tabName': 'Tab1', 'otherDetails': [ { 'formType': 'Continuous' }, { 'formType& ...

Passing asynchronous data to child components using an object in Angular6

Currently, I am facing an issue with displaying data retrieved from a server using Angular 6, Rxjs, and Chartjs. When utilizing local mock data, everything works perfectly fine. However, when fetching data from the server, the charts render as blank becaus ...

When checking if el.text() is equal to "string", it will return false, regardless of the actual content of the element being "string"

Looking at the code snippet below, it seems that the else block is always being executed instead of the if block. The alert confirms that the variable state has the value 'payment' as expected. var state = $('.check-state').text(); ale ...

The impact of THREE.OrbitControls on the rotation of objects in the scene

Recently started diving into THREE.js and I've put together a simple scene with the basics: http://codepen.io/inspiral/full/Lewgj Overall, everything is running smoothly aside from an odd glitch that's been happening due to the new mouse event h ...

The regex function is not functioning correctly

var content = []; content.push('\r\n"use strict";'); content.push('\n"use strict";'); var useStrictRegExp = /([^{]\r?\n)['"]use strict['"];/g; for (var x = 0; x < contents.length; ++x) { var tex ...

Using Typescript to implement a conditional return type and ensuring that the value types are consistent together

I am working with a useSelectedToggle hook that helps in connecting the UI state to the open/closed status of a dialog where it will be displayed. The toggle defines the value as (T) when it is open, and null when it is closed. How can I enforce stricter ...

Storing an array of objects in MySQL using Node.js

I am looking to insert an array of objects into a MySQL database using Node.js. I am familiar with inserting single data, editing, deleting, and other functions, but I am unsure how to accomplish this task. Below is the JSON format that I am utilizing for ...

Utilizing the "::first-letter" pseudo element selector in conjunction with the MuiButton class in Material UI - What is the process?

Is it possible to change the text case of Button text inside Material UI Button to sentence case with CSS? https://mui.com/components/buttons/ The text inside the button - ADD FRIEND should be transformed to sentence case as Add friend. I attempted to o ...

When using .slideup(), the entire ul is removed instead of just the nested li

Encountering some issues with this particular element: I am looking to ensure that when a hidden list collapses, the code checks to see if there are any other 'active' lists already open and closes them before opening a new one. It can be messy ...

"Delving into the World of CSS and Live Content

ERROR: Couldn't get my CSS right, completely unrelated to dynamic content! The answer provided is quite enlightening though! I am generating tags and adding content with the help of handlebars: Here's the Handlebars code snippet: {{#each docs} ...

Updating configuration file for Next.js

Typically, Next.js relies on the next.config.js file for configuration settings. Is it possible to modify this to use a different file name such as my.next.config.js? ...

Using Laravel, how can I retrieve the specific user ID associated with an element?

I am seeking a solution to retrieve the User ID from the users table using either JavaScript or Laravel. But why do I need it? The reason is that I want to populate a modal window popup with specific user information. I currently have 10 users, each with ...

Utilize the power of jQuery for form validation by combining the errorPlacement and showErrors functions

I am currently attempting to implement validation using the Jquery .validate plugin. Unfortunately, I have encountered an issue where I am unable to utilize both the errorPlacement and showErrors methods simultaneously. If you'd like to see a demons ...

What is the best way to showcase a rating value in vue.js?

Here is my JSON data: {"status": true, "reviews": [{"review": "scdbgnhvgdbsr", "rating": 5, "by": "aravind", "pid": 8, "review_id": 1}, {"review": "helsocxdxvfbgfnhfgdf", "rating": 2, "by": "ab", "pid": 8, "review_id": 2}], "rating": 3.5} I have successf ...

Execute a JavaScript function upon pressing the 'Enter' key without using jQuery

Hey there! I'm looking to trigger a JavaScript function when the Enter key is pressed. Check out my current code below: HTML <!DOCTYPE html> <html> <head> <title>JS Bin</title> </head> <body> <d ...

I am encountering an issue with my Javascript file not running due to a bigint error

I'm attempting to utilize @metaplex/js for NFT minting. Usually, my .js files function correctly, but when I execute the file, this particular error arises. bigint: Failed to load bindings, pure JS will be used (try npm run rebuild?) The meaning of ...

Can Selenium in JavaScript be used to retrieve child elements from a webpage?

I've been struggling to adapt my JavaScript script for use with Selenium (also in JavaScript). Despite numerous attempts, I haven't been able to find a solution. I've attached an image to better explain my question await chromeDriver.findEle ...