"Integrate envMap into the materials section of the model.json file

I successfully exported an object from Blender to .json format for use with three.js. I manually added all the maps to the exported file, which were not included by the exporter but could easily be manually added after mapping correctly in Blender.

model.json:

"materials":[{
    "DbgColor":15658734,
    "DbgIndex":0,
    "DbgName":"FrontCol",
    "blending":"NormalBlending",
    "shading":"phong",
    "colorDiffuse":[1.0,1.0,1.0],
    "mapDiffuse" : "model_d.png",
    "mapDiffuseWrap" : ["repeat", "repeat"],
    "colorSpecular":[0.8,0.4,0.0],
    "mapSpecular" : "model_s.jpg",
    "mapBump" : "model_b.jpg",
    "mapBumpScale" : 4
}

I am now looking to add an environment map for better reflections, a process that is usually straightforward with three.js.

index.html:

var material = new THREE.MeshPhongMaterial( {
    envMap: mapEnvironment
} );

Is it possible to achieve this? If so, how can it be done?

javascriptjsonthree.jsmappingblender

Answer №1

I've encountered a similar issue and although loading directly in JSON is not possible, here's a workaround - set it for all meshes during import. Then, depending on the reflectivity of your material, you'll be able to see it on the material or not:

var objectLoader = new THREE.ObjectLoader();
objectLoader.load( "file.json" , function ( obj ) {
    obj.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {    

            child.material.envMap = mapEnvironment;

        }
    });

This will retain your material properties from JSON while adding this additional property.

Edit: Below is the version for using JSONLoader:

var loader = new THREE.JSONLoader();
loader.load( 'file.json', function ( geometry, materials ) {
    for ( var k in materials ) {
        materials[k].envMap = mapEnvironment;    
    }

    mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials));
    scene.add( mesh );
});

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

When implementing the GLTFLoader in a React (ThreeJS) project, be sure to define and handle errors that may arise with optimized

Using vite to create a React environment has been smooth except for one issue. When attempting to import GLTFLoader from the module, an error message popped up in the Vite command line: Vite Error: /node_modules/.vite/deps/three_examples_jsm_loaders_GLTF ...

reactjsthree.jsvite

What is the best way to access a variable from a .js file?

Is there a way to access a variable defined in a JavaScript file from a Vue file and pass it to the Vue file? In the following code snippet, there is a template.js file and a contact.vue file. The template file converts MJML to HTML and saves the output to ...

javascriptvue.js

Issues with Javascript Arrays not adding objects with duplicate values

When objects have arrays with the same values, only one of them is considered. For example: data[2018][2][25] <-- this one gets ignored by the object data[2018][2][22] Sample Code: var date = new Date(); var data = {}; <?php $eventsNum = 3> &l ...

javascriptphparraysobjectpush

Variable for Ajax success not set even though the other data was returned

UPDATE: While the main question remains unchanged, I have modified the approach to now return a getButtons() function instead of a global buttons array. I am utilizing an AJAX request to fetch data from the server in order to populate a popup box, which i ...

javascriptjqueryajaxjsonjsp

Error encountered during Rails JSON conversion operation

I recently encountered an unusual error while attempting to convert my object to JSON for an API connection. Here is a detailed account of my experience. Upon calling JSON.generate(self) The resulting output was: {"validation_context":null,"errors":{}, ...

ruby-on-railsjsonserialization

Displaying a single photo on mobile, while simultaneously showing four photos on the web using Nuxt.js

When viewing the web browser from a mobile device, only one image should be displayed instead of all four images fetched from an API. What are some possible ways to achieve this? The data retrieved includes all the images at once. <template> <d ...

javascriptvue.jsnuxt.jsrendering

Using jQuery and Ajax to fade in content after all images and other assets have finished loading

I've encountered an issue with loading pages via ajax for users with custom URLs. For example, a profile is usually found at http://example.com/users/Dan, but if a user has a custom URL like http://example.com/DansCustomURL, I need to fetch their desi ...

javascriptjqueryhtmlajax

Conditionally rendered components in JavaScript may cause the element.contains method to return false

I'm currently working on a form selector component and my goal is to have the dropdown element close whenever a user clicks anywhere else on the screen. This component has the following design: export const FormSelect = ({ defaultText, disabled, ...

javascriptreactjs

Incorporating CSS styles into a dynamic JavaScript computation

I'm attempting to apply inline CSS to a JS calculation (e.g. 3*2*1) in order to make it appear red. I have experimented with using a span tag, but it only displays the calculation and not the result. I also tried utilizing an internal style sheet. Ho ...

javascriptcss

Placeholder for empty values in Angular UI mask

Currently, I have implemented the angular ui mask directive for a date field. However, it is inserting underscores as a placeholder. Is there a way to display nothing in the placeholder instead? ...

javascriptangularjsangular-ui

Angular's watch feature fails to trigger when the value is modified

My setup includes two sliders, one for brightness and the other for contrast. They are linked to a "brightness" model and a "contrast" model. These sliders are located within a tab interface, and I noticed that every time the tab was changed, the values we ...

javascriptangularjsmaterial-design

Setting a date in Angular Material 2 without closing the mdMenu

I am trying to interact with Material 2's menu. Is there a way to select a menu item without closing the menu popup? Check out this link for more information. ...

javascriptangularangular-material

What sets index.js apart from page.js in next.js?

https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts While reading through the next.js documentation, I came across an interesting point. The documentation mentions that index.js serves as the root of the directory. This mean ...

javascriptnext.js

Reading JSON data with Flash is a useful skill to have in your

Are there any built-in methods in as3 for reading JSON data? Code samples would be greatly appreciated! ...

flashactionscript-3json

Fade in elements individually with the jQuery Waypoints plugin

I am currently using the waypoints jQuery plugin and it is functioning perfectly when fading in on scroll. However, I am facing an issue with making the blocks fade in individually one after the other. Here is the snippet of my jQuery code: $('.hbloc ...

javascriptjqueryjquery-pluginsjquery-waypoints

Why is the button missing from the codepen?

I attempted to recreate the code from this Codepen link: https://codepen.io/jakaric/pen/mjJQvg However, unlike what you see here (in the run result), the liquid "Pretty little button" is not showing up in my local files. On Codepen, there is no library me ...

javascriptbutton

When a directive generates an element, the ng-click function may not function as expected

I am developing a custom directive using angularJS. The directive is supposed to replace my custom element with pagination elements. However, the generated elements by the directive contain an ng-click attribute whose value is a function from the controlle ...

javascriptjqueryangularjsnode.jsmean

Getting your JQuery ready() statement right is crucial for the proper

I have come across all three variations below: $().ready(); $(document).ready(); $(document.body).ready(); All of them seem to work, but I'm wondering which one is the most appropriate or recommended to use when considering the usage of the ready() ...

javascriptjquerydocument-ready

Eliminating the muted attribute does not result in the sound being restored

I am looking to implement a feature where a video loads automatically without sound, but when a user clicks a button labeled "Watch with Sound", the video restarts from the beginning and plays with sound. Below is the JavaScript code: let videoButton = do ...

javascripthtmlvideo

Angular2 forms: creating validators for fields that are interconnected

Imagine a scenario where a form allows users to input either a city name or its latitude and longitude. The requirement is that the form must validate if the city name field is filled OR if both the latitude and longitude fields are filled, with the added ...

javascriptangularangular2-forms