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

Faulty toggle functionality within a JavaScript-created accordion panel

HTML I'm looking to add a FAQ question within the div with the class "section-center" <body> <section class="questions"> <div class="title"> <h2>FAQ SECTION</h2> < ...

javascripthtmlcss

Replacements of JSON null values within Mantle

Utilizing Mantle for parsing JSON data, the typical structure includes: "fields": { "foobar": 41 } However, there are instances where the value of foobar is null: "fields": { "foobar": null } This leads to an exception being thrown ...

iosjsongithub-mantle

Retrieving data from an HTML input tag and storing it in a variable

I'm currently working on a project that involves reading the contents of an uploaded file through an input tag and storing it in a variable. My goal is to then use an algorithm to decrypt the .txt file: <input type="button" value="decrypt" id="dec ...

javascripthtmljqueryhtml-input

Resetting a form in React JS: A step-by-step guide

How can I clear the input values in a React JS form upon clicking Reset? class AddFriendForm extends Component { constructor(props) { super(props) this.state = { firstname: '', lastname: '', } } render() { c ...

javascriptreactjsredux

What is the process for creating a duplicate element within the target div after the original element has been dropped?

Imagine a scenario where the "HI" div is dragged into the "DRAG HERE" div, causing the "HI" div to be removed from its original location. What if, instead of disappearing, dragging the "HI" div to another location generated a new "HI" div? /** * Fu ...

javascripthtml

When attempting to connect to http://localhost:8545/ using Web3.js, the network encountered an error with the message

I am currently working on setting up web3.js for a website in order to enable Ethereum authentication. However, I encountered the following error: web3-light.js:4327 OPTIONS http://localhost:8545/ net::ERR_CONNECTION_REFUSED HttpProvider.send @ web3- ...

javascriptnode.jsweb3js

Ruby's MongoDB output is a BSON::OrderedHash, but converting it to JSON can be tricky. When trying to use to_json, an error saying "stack level too deep" may occur

I am experimenting with creating a web service using Ruby Sinatra and MongoDB with the intention of returning JSON objects. The decision to utilize MongoDB was influenced by its ability to store documents in a structure that resembles JSON. This led me to ...

rubyjsonmongodb

What is the most effective strategy for handling JSON responses in Angular's Front End when subscribing to them using a forkJoin?

After researching various solutions for handling JSON mapping issues in the front end, I still haven't found a satisfactory answer. Despite trying different approaches, such as working with Root-object and nested interfaces, I'm struggling to map ...

jsonangularinterfacefork-join

Problem with Google's PageSpeed Insights - Focus on Making Most Important Content Visible

During the process of creating a comprehensive website for a client who has a strong affinity towards Google tools and recommendations, I have encountered an interesting challenge: Despite my best efforts, I seem unable to attain a flawless score for the ...

javascriptphphtmlcssgoogle-pagespeed

Module not found (Error: Module not found for './models/campground')

Here is the code snippet I am working with: var express = require("express"), app = express(), bodyParser = require("body-parser"), mongoose = require("mongoose"), Campground = require("./models/campground"), Comment = require("./mode ...

javascriptnode.jsexpressmongoose

Having trouble removing a row from Mysql database using Node.js

Recently, I developed a pet shop web application using nodeJS and MySql. Everything was working smoothly until I encountered an issue with deleting pets by their pet_id. Upon attempting to delete using pet_id 'pa04', I received the following erro ...

javascriptmysqlnode.jsexpress

The jQuery click event does not fire within a bootstrap carousel

I am trying to set up a bootstrap carousel where clicking on an image inside it will trigger a self-made lightbox. However, I am facing some issues with the JavaScript code not being triggered with the following syntax: $('html').on("click", ".l ...

javascriptjqueryhtmltwitter-bootstrap

Is it possible for a Vue.js build to encounter errors due to unregistered components?

Exploring a component template... <template> <Unknown></Unknown> </template> In the context of this template, Unknown could be either a globally registered component or not. Upon encountering this scenario at runtime, an informa ...

javascriptvue.jsvuejs2

How can json attributes in java be validated against predefined values?

How can I enforce validation of JSON attributes against predefined values in Java? for example: { "operation": "ONE" } The only acceptable values for the operation attribute are ONE, TWO, THREE. Therefore, in the JSON layer, we need to validate thi ...

javajsonjacksonfasterxml

What steps are involved in setting up a point distribution system in AngularJS?

My objective is to develop a point allocation system within AngularJS. I have successfully created a basic directive that introduces DOM elements, including a span displaying "0" points and buttons for incrementing and decrementing. The total number of poi ...

javascriptangularjs

"Utilizing Vue Mixins on a global scale, but restricting their usage to local components

Is there a way to use a mixin in multiple components without having to constantly import and declare it? I've tried connecting the mixin object to a global variable using vue.prototype, but mixins are added to components before globals are accessible. ...

javascriptvue.jsimportfrontendmixins

Retrieve the original jqXHR object from the success callback of the $.ajax function

My original task is as follows: Execute a jQuery.ajax() request. Upon success, perform additional checks on the data received from the server. If these checks fail, reject the promise for further handling. After researching extensively online, I came up ...

javascriptjqueryajaxjsgrid

Obtain the dynamic identifier of an element within every block using jQuery in a rails application

Let me illustrate my issue with a simple example. I am currently developing a recipe application. Within the show partial that loads via AJAX, I have the following setup: _show.html.erb <% @recipe.ingredients.each do |ingredient| %> <div class ...

javascriptjqueryruby-on-railsajax

Is there a way I can maintain the active state after clicking on a link?

Is there a way to maintain an active element state when navigating to another page after clicking a link? I am wondering if it is possible to use JavaScript to remove the active state from one link and apply it to the next one. I am facing some challenges ...

javascripthtmlcss

What is the process of adding new fields to a model in TypeScript?

I have created a test.model.ts file: export interface ITransaction { description: string; transactionDate: string; isDebit: boolean; amount: number; debitAmount: string; creditAmount: string; } export class Transaction implements ...

javascriptangularjstypescript