Creating materials in Three.js from Blender source files

After exporting a simple white material with my geometry from Blender, I noticed that the Three.js loader somehow created a MeshPhongMaterial "type" object from the source JSON file:

     ...
     "materials":[{
        "colorEmissive":[0,0,0],
        "colorDiffuse":[0.8,0.8,0.8],
        "DbgName":"Material",
        "wireframe":false,
        "opacity":1,
        "shading":"phong",
        "colorSpecular":[0.5,0.5,0.5],
        "blending":1,
        "transparent":false,
        "specularCoef":50,
        "doubleSided":false,
        "DbgIndex":0,
        "DbgColor":15658734,
        "depthTest":true,
        "depthWrite":true,
        "visible":true
    }],
    ...

Now, I want to clone and reuse the geometry in different colors, but I am struggling to understand how the loader managed to build the object from the source. Despite reading the documentation, I haven't found any information that could assist me. The properties available on Material and PhongMaterial are not matching what's seen in this source code. Can anyone provide some guidance on this? :) As someone who is not an expert in this area, I apologize if this question seems silly ^^

Thank you for your answers and time! :)

javascriptthree.jsblender

Answer №1

If you happen to be utilizing JSONLoader in your project, your code may resemble the following:

jsonLoader.load("model.json", function (geometry, materials) {
    var mesh = new THREE.Mesh(geometry, materials);
});

In case your mesh consists of only one material and you wish to apply it to other geometries, you can store it in a variable and then utilize clone():

var gMaterial;
jsonLoader.load("model.json", function (geometry, materials) {
    var mesh = new THREE.Mesh(geometry, materials);
    gMaterial = materials[0];
    mesh1.material = gMaterial.clone();
});

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

Search MongoDB using regular expressions that disregard any punctuation marks

I'm currently working on querying a MongoDB collection to find a single item based on a string property using react-router-dom's NavLink. The challenge arises when the prop via NavLink contains hyphens instead of spaces, and there are also names ...

javascriptregexreactjsmongodbexpress

3 Methods for Implementing a Floating Header, Main Content, and Sidebar with Responsive Design

I am following a mobile-first approach with 3 containers that need to be displayed in 3 different layouts as shown in the image below: https://i.sstatic.net/UjKNH.png The closest CSS implementation I have achieved so far is this: HTML: <header>.. ...

javascripthtmlcsscss-float

Updating user data with Firebase cloud functions

For my e-commerce project, I am looking to utilize the Google Maps API to input the location of a user's shop. I have successfully utilized Google Cloud Functions to insert the latitude, longitude, and address data. Currently, the data can be insert ...

javascriptfirebasevue.jsgoogle-cloud-firestoregoogle-cloud-functions

How can I effectively set up and utilize distinct npm modules on my local environment?

A React Native component I have created lives in a separate folder with its own package.json file, and now I want to use it in another project. The component named MyComponent is located in Workspace/MyComponent and has specific dependencies listed in its ...

javascriptnode.jsreact-nativenpm

Implementing automatic updates for Vue.js model data from a global object

I'm new to working with Vuejs and I'm encountering an issue with updating data from a global object automatically. My project involves the use of ES6 and Vuejs. The problem I'm facing is related to enabling/disabling a button based on a glo ...

javascriptecmascript-6vue.js

Change when the div is shown or hidden

I'm attempting to add a transition effect when the DIV with the class .socialmenu is either shown or hidden. Below is the CSS code I've used, but it doesn't seem to be working: .socialmenu { bottom: 0; left: 0; right: 0; hei ...

javascriptjquerycss

Saving props in React-select

I'm currently utilizing react-select to enable multiple selection on my UI. However, I need to extract the props from react-select since I will be sending the selected values to the backend. My query is how can I store the state values in an array for ...

javascriptreactjsforms

Working with an array of object in Vuex for form handling

Looking to make updates to a vuex store that includes an array of objects: Users have a combobox for making selections, which then updates a property of the object in the database. However, every time I choose an item from the autocomplete (combobox) I e ...

javascriptvue.jsvuex

Is it possible in Vuetify 2 to align the items within the expansion of a v-data-table with the headers of the main component?

I am currently working on rendering a v-data-table where the expandable section serves as a "panel" title and I want the data inside the expansion to align with the headers set at the root level. Despite my efforts, I have not been able to find a way in th ...

javascriptvue.jsvuetify.jsweb-frontend

I'm currently working with React and experiencing issues with my components being unrendered

I'm currently navigating a React tutorial and I'm having issues getting this code to display some buttons. I'm utilizing codepen.io to work on the code and can provide the tutorial link if needed. const clips = [ { keyCode: 81, key ...

javascripthtmlreactjs

Closing notifications in Bootstrap 5.1 with the help of Ajax

I am utilizing bootstrap 5.1 alerts to display custom messages after an Ajax call. I also want the ability to dismiss the alert as necessary, which can be done with a dismiss button provided by bootstrap. Below is the PHP code I am using : <div class=& ...

javascriptajaxalertbootstrap-5

Toggle the visibility of multiple divs by clicking on other divs

I have implemented a script on my webpage to toggle the visibility of certain divs by clicking on anchor tags. I found a solution that seems perfect for my needs, but unfortunately it is not working when I try to integrate it into my own website. I suspec ...

javascriptjqueryhtml

Using Middleware in Node JS Routes for Paginating Data Tutorial

Recently delving into Node and Express, I found myself integrating a pagination feature into my API. Although I've made significant progress, I'm facing challenges after refactoring and converting pagination into a function. This is the current ...

javascriptnode.jsexpressmongoosepagination

Tacking the progress bar onto an array of $.ajax() calls within a Promise.all

FINAL UPDATE 25/06/20: After a thorough investigation, I discovered the root causes of why the progress bar was not functioning as intended. Firstly, dealing with $.ajax() proved to be cumbersome due to its lack of proper promise handling. To resolve this ...

javascriptjqueryajaxpromiseprogress-bar

Display the number of rows per page on the pagination system

Looking for a way to add a show per page dropdown button to my existing pagination code from Mui. Here's the snippet: <Pagination style={{ marginLeft: "auto", marginTop: 20, display: "inline-b ...

javascriptreactjsmaterial-uipagination

NodeJS does not support the Array.Push method

I'm having trouble getting this code to work. I want to generate 5 random items from my database and store them in an array called 'dato'. However, when I print the array, it appears to be empty. /* GET users listing. */ router.get('/& ...

javascriptnode.jsexpress

Setting a menu item as active in a SvelteKit app: A step-by-step guide

I encountered an issue with the main navigation menu in my sveltekit application. The problem is that when the app is loaded or refreshed, the active menu item corresponding to the current URL is not set. After struggling to find a solution online, I manag ...

javascripthtmlsveltekit

Issue: Control with the specified name '0' could not be located

Kindly review this code snippet and assist me in resolving the issue. I have set up a formArray where the label and formControlName do not match, so I have utilized mapping to synchronize them. Upon receiving a response from the API, I initialize the for ...

javascriptangulartypescriptangular-reactive-forms

DataTables.js, the powerful JavaScript library for creating interactive tables, and its compatible counterpart

I'm currently making some changes to a dynamic table that require enabling a vertical scroll bar. As a result, I need to implement this vertical scroll bar mechanism on an existing table. The code in our project utilizes dataTables.js version 1.5.2 ...

javascriptjqueryhtmlcss

Each time the Jquery callback function is executed, it will return just once

Whenever a user clicks on the "customize" link, I trigger a function to open a dialog box. This function includes a callback that returns an object when the user clicks "save". The problem is, each time the user clicks "customize", the object gets returned ...

javascriptjqueryjquery-callback