Bring in a 3-dimensional model using JSONLoader in three.js

I'm facing some challenges with incorporating a simple 3D object created in Maya into my Three.js project using JSONLoader. The object consists of various materials (Lambert and Phong) and different colors. I used Maya to create a .obj file, then Blender to convert it to .json format. Initially, everything seemed fine. However, when I try to import the object while loading its original materials, the model fails to load. Strangely, if I use a random material during loading, I am able to successfully load the model.

var loader = new THREE.JSONLoader();
loader.load("http://localhost:8000/object/planev2.json", function(mygeo,mymat){
    var mat = mymat[0];
    mymesh = new THREE.Mesh(mygeo,mat);
    mymesh.scale.set(50,50,50); 
    scene.add(mymesh);
});

TL;DR - Can an object with multiple materials be loaded directly from a .json file?

javascriptjsonthree.jsblendermaya

Answer №1

Below is a snippet of code that you can try out:

const material = new THREE.MeshPhongMaterial({
                        color: 0xdddddd,
                        specular: 0x222222,
                        shininess: 35,
                        map: THREE.ImageUtils.loadTexture("tex/map1.jpg"),
                        specularMap: THREE.ImageUtils.loadTexture("tex/map2.jpg"),
                        normalMap: THREE.ImageUtils.loadTexture("tex/map3.jpg"),
                        normalScale: new THREE.Vector2(1, 1),
                        morphTargets: true
                    });

                    const loader = new THREE.JSONLoader();

                    loader.load("mesh.json", function(geometry) {

                        const mesh = new THREE.Mesh(geometry, material);
                        mesh.name = "male";

                        scene.add(mesh);

                    });

                    loader.onLoadComplete = function() {

                        console.log("Loading is complete!");

                    }

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

Adding jQuery and other libraries to Typescript for optimal functionality

After spending days researching and struggling, I am reaching out here for clarification on the process of importing a library in Typescript. I used to just add the script tag and everything would work fine. Now that I am working on building a MEAN-Stack ...

javascriptjquerytypescripttypesmean-stack

Tips for sending two values to a PHP file using JavaScript Ajax

I have created a code for two dropdown menus. The goal is to select values from both menus and send them to a php file using the GET method. The values should be sent to the php file only when both menus have selections made. Below is the code snippet: ...

javascriptphpjqueryhtmlajax

Tips for retrieving the third element from a JSON array using JMeter

Can someone help me extract the third time element from the JSON array provided below? [ { "userId": 1, "id": 1, "title": " How to Shape of Character Design", "write": &q ...

arraysjsonregexjmeter

The menu is about to receive some custom styling

I have come across a webpage where I need to make some modifications, but I am unable to locate the script responsible for applying the inline style. This issue only seems to be occurring on the mobile version with the dropdown menu. <div class="is-dri ...

javascriptjquerycssmenu

Is it possible to update the value of an element using JavaScript?

My goal is to manipulate the content of a specific element on a third-party web page using a JavaScript Add-on in order to display a clickable hyperlink. I have already identified the link that I want to interact with on the page, and I believe document.g ...

javascripthtml

Executing Node.js Function from an External File Dynamically

Is it possible to run a Node function from an external file that may be subject to change? main.js function read_external(){ var external = require('./external.js'); var result = external.result(); console.log(result); } setInterva ...

javascriptnode.jsfunctionnpm

A guide to understanding decimal parsing in C#

In my C# UWP project, I am using the Newtonsoft.Json library to parse text into JSON format. The data that I am attempting to parse looks like this: [ { "id": 9, "displayNo": 1, "ygnGoldPrice": 1111111.00, "worldGoldPric ...

c#json

Mastering the Art of jQuery: Easily Choosing and Concealing a Div Element

I'm currently facing challenges in removing a div upon successful AJAX completion. The issue I'm encountering is that the word "Added" appears twice after success, indicating that I am not properly selecting the two divs containing it. Any sugges ...

javascriptjqueryhtmlcss

JavaScript's getElementById function may return null in certain cases

I am studying JavaScript and I have a question about the following code snippet: document.getElementById('partofid'+variable+number). Why isn't this working? Check out these examples and JSfiddle link. I want the "next" button to remove th ...

javascriptgetelementbyid

The issue with using useState on arrays is that it is not functioning properly with React Hooks

const [LatestNews, setLatestNews] = useState([]); useEffect(() => { async function fetchLatestData() { const result = await database.collection('latestnews').get(); result.docs.forEach(doc => ...

javascriptreactjsreact-hooks

Tips for retrieving a specific element from a JSON file

My current challenge involves retrieving a JSON file from an API and extracting data from the 'place_id' object. I have been researching online on how to extract elements from JSON files, but I seem to be encountering an error in my code: Warning ...

phpjson

Navigating with Anchors, Styling and jQuery

Firstly: Apologies in advance for any language errors as English is not my native tongue. :) The Scenario Here's the deal: I'm attempting to create a single button that, when clicked by the user, automatically scrolls down to the next DIV. Each ...

javascriptjqueryhtmlcss

Refreshing the page triggers the callback function that retrieves the checkboxes selected in a Kendo treeview component

How can I retain the selected checkboxes after refreshing the page? Is there a way to achieve this using AJAX when submitting data to a database and then reloading the page? AJAX //AJAX call for button $("#primaryTextButton").kendoButton(); va ...

javascriptphpajaxcheckbox

Display a collection of Mongoose objects in a React component

In my development stack, I rely on node js + React. The data I work with comes from mongoose and typically follows this format: { "_id": "61b711721ad6657fd07ed8ae", "url": "/esports/match/natus-vincere-vs-team-liquid- ...

javascriptreactjs

Some suggestions for updating two div elements using only one Ajax response

My website features a signin() button that I want to enhance with ajax functionality. When the button is clicked, I need it to update two divs: one displaying a personalized welcome message, and the other showcasing a statistics table in a different locati ...

javascriptajax

Fire an event following the execution of $state.go()

Is there a way to activate an event once the state has been modified in ui.router? Specifically, I am utilizing the ionic framework alongside angularJS which incorporates angular-ui-router. Note: Below is the pseudo code I am hoping to implement. $state. ...

javascriptangularjsionic-frameworkangular-ui-routerangular-ui

Incorporate h:outputText into your JavaScript code segment

After populating some information into a h:outputText, I am now looking to trigger a JavaScript function upon clicking a button that will retrieve the text from the outputText. The structure of the code is as follows: <p:tabView id="tabView"> & ...

javascripthtmlajaxjsf

The Unmarshall function must throw an error if the JSON input structure is incorrect

I encountered an issue with struct A and B while unmarshalling JSON strings. When a JSON string meant for struct A is unmarshalled correctly, it works fine. However, if the same JSON string is mistakenly unmarshalled into struct B, it still succeeds (which ...

jsongostructmarshallingunmarshalling

Testing the functionality of an Express.js application through unit testing

I'm currently working on adding unit tests for a module where I need to ensure that app.use is called with / and the appropriate handler this.express.static('www/html'), as well as verifying that app.listen is being called with the correct p ...

javascriptnode.jsunit-testingexpress

PHP and JavaScript both offer methods for escaping variables that are written in the syntax ${HOST}

How can I safely handle variables from the database like ${HOST}? This issue arises when code is posted within <pre><code> tags. If left as it is, an error occurs: Uncaught ReferenceError: HOST is not defined. In this specific context, usin ...

javascriptphp