Retrieve model from stored value

Many tutorials suggest using the JSONLoader when loading a Three.js model into a scene:

var loader = new THREE.JSONLoader();
var createMesh = function(geometry) { 
   var zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
   zmesh.position.set( 0, 0, 0 );
   zmesh.scale.set( 3, 3, 3 );
   zmesh.overdraw = true;
   scene.add(zmesh);
};
loader.load("the_model.js", createMesh);

But what if I have a JavaScript file that is already loaded with a <script> tag?

var the_model = {
   "metadata" : {
      "formatVersion" : 3.1,
      .......................
   },
   "scale" : 1.000000,
   "materials" : [ {
   ........................
}

Is there a way to integrate this var the_model with Three.js?

Replacing it for geometry did not yield the desired result.

javascriptthree.js

Answer №1

To achieve this, utilize THREE.JSONLoader.parse in place of THREE.JSONLoader.load:

var loader = new THREE.JSONLoader();
var geometry = loader.parse(the_model);
createMesh(geometry);

This method allows for a synchronous call without the need for an AJAX request.

Answer №2

To successfully incorporate a material into your model, utilize a pattern similar to the one shown below:

var loader = new THREE.JSONLoader();
var model = loader.parse( the_model );

var mesh = new THREE.Mesh( model.geometry, new THREE.MeshBasicMaterial() );
scene.add( mesh );

If you want to include a material in your model, follow this example:

var mesh = new THREE.Mesh( model.geometry, materials[ 0 ] );

This code snippet is specifically for use with three.js version r.58

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

What steps can be taken to troubleshoot issues with the jquery mask plugin?

I am using the jQuery Mask Plugin available at to apply masks to input fields on my website. Currently, I am trying to implement a mask that starts with +38 (0XX) XXX-XX-XX. However, I am facing an issue where instead of mandating a zero in some places, ...

javascriptjqueryjquery-plugins

The caption below the image is not functioning correctly when hovering over it

I'm having trouble getting the text to appear correctly underneath the image. Whenever I hover over the image, the text seems to overlap it. I am sure there is a simple solution to this issue, but I can't seem to figure it out. Removing the inlin ...

javascriptjqueryhtmlcss

What is the best way to verify in JavaScript whether a value is present at a specific position within an array?

Is this method effective for checking if a value exists at a specific position in the array, or is there a more optimal approach: if(arrayName[index]==""){ // perform actions } ...

javascriptarrays

When utilizing KineticJS on a canvas that has been rotated with css3, the functionality of the events appears to be malfunctioning

Currently, I'm working on a rotating pie-chart widget using Kineticjs. However, I have run into an issue where the events don't seem to function correctly when drawing on a rotated canvas element (with the parent node being rotated 60deg using CS ...

javascriptcss-transitionskineticjs

Can you explain what JSX is, its purpose, and the benefits of using it?

As I delve into the world of React, I can't escape the constant mention of JSX. Despite my efforts to grasp it by watching tutorials, the concept still eludes me. Even after consulting the documentation, my mind remains in a state of confusion. To m ...

javascriptreactjsjsx

Adding the victory chart in react-native slider causes performance issues, as the slider becomes laggy and there is a delayed reflection

When I use a slider in my application without including a Victory chart, the slider functions smoothly with no issues. However, integrating the slider with the Victory chart causes lag and delays in updating the state value on screen. For more detailed in ...

javascriptreactjsreact-nativevictory-chartsreact-native-elements

Is there a way to set the default state of a checkbox in a spring-form?

I have set up my web content using spring-boot with .jsp files. The controller code is as follows: @Slf4j @Controller @AllArgsConstructor @SessionAttributes({"language", "amount", "words"}) public class LanguageController { private LanguageService lang ...

javascriptjavahtmlspringspring-form

What is the best way to retrieve the js window object within emscripten's EM_JS function?

I'm looking to access the window.location in an EM_JS method in order to call a JavaScript method from C++. My attempted approach was: EM_JS(const char*, getlocation, (), { let location = window.location; let length = lengthBytesUTF8(location ...

javascriptc++webassemblyemscripten

Submitting a JavaScript array to MongoDB using a React application: A guide to success!

As a beginner delving into the world of React and MongoDB, I'm encountering difficulties in establishing communication between the two technologies. Recently, I've been following a detailed tutorial on Medium that focuses on utilizing the Plaid A ...

javascriptreactjsmongodbplaid

When I adjust the page size, the navbar stays hidden after clicking

Trying to implement a toggle button for the navigation bar. The objective is to hide the navbar on screens smaller than 667px and display a toggle button instead. Clicking the button should toggle the visibility of the navbar items. The toggle button work ...

javascripthtmljquerycss

What is the best way to apply a class to a jQuery element only if a specific condition is met, and then remove it if the condition is no longer

Is there a more concise method to accomplish the same task? const selectAllCheckbox = $("input.select_all"); const isChecked = selectAllCheckbox.prop("checked"); isChecked ? selectAllCheckbox.parent().addClass("selected") : selectAllCheckbox.parent().r ...

javascriptjquery

The "Auto Load More" feature is only loading the first two pages when scrolling down

I have set up an auto load more feature that triggers on page scroll down. Although my jQuery/ajax code is functioning properly, it only loads the first 2 pages automatically as I scroll down. There are more pages/records available but the loading process ...

javascriptphpjqueryajax

What could be causing this issue with my Mongoose.js program when it freezes during a 'nested' save operation?

[edit]: I made a revision to the previous question, providing a very precise reproducible example. This is the program I've created. I have developed two Schemas named ASchema and BSchema with collections A and B respectively. Then, I generated ...

javascriptmongodbnode.jsmongoose

A guide on implementing Angular ngbPopover within a CellRenderer for displaying in an ag-grid cell

I successfully set up an Angular Application and decided to utilize ag-grid community as a key component for displaying data from a backend API in tables, using fontawesome icons to enhance readability. While everything looks fine and my application is fu ...

javascriptangulartypescriptag-grid

axios GET and POST requests are not functioning properly, while fetch requests are successful

I recently set up a REST API on Heroku using Express, NodeJS, and MongoDB (mogoose as orm and MongoDB Atlas as well). I am diving into the world of MERN stack development as a beginner ...

javascriptajaxaxiosfetch-api

According to npm, the JSON is not valid, but jsonlint.com confirms that it is valid

Here is the json file for package.json that I used npm install on (specifically for the angularfire-seed project on github): { "name": "angularfire-seed", "description": "A starter project for Angular + Firebase with AngularFire", "version": "1.0.0 ...

javascriptjsonnode.jsnpmangularfire

Guide on downloading the complete Vue.js to-do list with JsPdf

I am new to this field and attempting to create a small project using Vue.js. I want to provide users with the option to download their Vue.js to-do list. I have imported the jspdf library and Html2canvas. Here is the current output, but this is the desire ...

javascriptvue.jsjspdfhtml2canvas

What is the functionality of Vue plugins in Vite MPAs?

I have developed a Vite application and I am trying to implement multiple pages. I followed the documentation on how to achieve this (link here), but when I start the server, all I see is a blank page. This is what my vite.config.js file looks like: impor ...

javascriptvue.jsvite

What is the best way to deactivate a button with an onclick function in javascript?

I would like to enhance the button click event behavior by disabling it after it has been clicked. How can I modify the function so that when the button is clicked, it becomes disabled and then redirects to the specified URL? <form id="edit" action=" ...

javascriptjquery

Exploring the Node.js view object within a function and delving into the reasons why a property of

As a beginner in programming, I am seeking tips on how to effectively learn node.js. Currently, I am utilizing the "Learning Behavior Driven Development with JavaScript" book for my learning journey. I would greatly appreciate any advice on how to view ob ...

javascriptnode.jsjsonfunctionbdd