What is the best way to access the "materials" array from my JSON file when using THREE.JS?

Previously, this code was functioning correctly on an outdated THREE.JS version:

var loader = new THREE.JSONLoader();
loader.load("ns.js", function(geometry){

                mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(geometry.materials));

                mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.05;
                scene.add(mesh);

                loadRestOfScene();
            });

However, in a newer version, "geometry" no longer contains a materials property. How can I retrieve that array?

javascriptthree.js

Answer №1

Below is the guideline to adhere to for your situation:

let loader = new THREE.JSONLoader();

loader.load( 'model.js', function ( geometry, materials ) {

    let mesh = new THREE.Mesh( geometry,  new THREE.MeshFaceMaterial( materials ) );

    scene.add( mesh );

} );

Utilizing three.js version r.63

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 is the best way to import my JavaScript function from a separate JavaScript file into my Node.js server?

Currently, I am in the process of developing a small website. As a beginner in JavaScript and Node.js, I managed to create a basic server using Node.js. However, I'm encountering challenges when it comes to loading my file.js on the server. Can someon ...

javascriptnode.js

Switch between different URL tabs seamlessly in NEXT.JS without needing to refresh the page

I have implemented Material UI tabs in my project and I am updating the tab in the URL. However, I do not want the page to refresh every time I switch the tab. Despite using shallow:true in my code, the issue persists. const tabs = [ { label: &apos ...

javascriptreactjsmaterial-uinext.js

Strategies for Preventing Repetitive Coding of a Function

Apologies in advance for the title being a bit vague, I struggled to find the right words. Essentially, I have 10 buttons each with unique IDs. When these buttons are clicked, I want them to toggle the class of a textarea element. Is there a way to do thi ...

javascriptjqueryhtmlcss

The webpage continues to refresh after executing a JavaScript function triggered by the AJAX response

I have experimented with various solutions for calling a JavaScript function returned from an AJAX response. While each method worked to some extent, I found that using an alert within the refreshResults function was necessary in order to display the resul ...

javascriptjqueryajaxnode.js

Injecting JavaScript object values into dynamically generated modal

I have a JavaScript object that contains various training courses. Each category includes multiple training courses, and each course is associated with a specific category. Currently, I am able to display the title and description of each category in a mo ...

javascriptjqueryhtmlobjectfor-loop

What exactly is the state ID that xtext employs when saving resources?

I have integrated xtext's orion editor in an iframe within my Angular application. I am facing a challenge where I need to save the edited content from my Angular application to a backend Java application. Can someone guide me on the API calls or appr ...

javascriptangularjsiframextexteclipse-orion

Is there a way I can retrieve a cookie stored in an Express middleware even if the req.cookies object is returning empty?

I am currently working on validating a cookie using the cookie-parser module to verify if the user is authenticated to access restricted routes within my application. My technology stack includes NodeJS and Express for the server, and Sveltekit for the fro ...

javascriptnode.jsexpresscookies

Passport.js simply redirects to the failure page without invoking the LocalStrategy

I'm facing a persistent issue with Passport.js in my Express.js small application. No matter what I input in the LocalStrategy, I always end up being redirected to the failureRedirect without seemingly passing through the LocalStrategy at all. What am ...

javascriptnode.jsexpresspassport.js

What could be causing my jQuery switch not to function on the second page of a table in my Laravel project?

Having an issue with a button that is supposed to change the status value of a db column. It seems to only work for the first 10 rows in the table and stops functioning on the 2nd page. I'm new and could really use some help with this. Here's the ...

javascriptphpjquerylaravel

Calling JavascriptInterface in an H5 environment is not permitted

Utilizing the power of vue, I created an immersive h5 page within the application framework. The seamless connection between the page and the app relies on the use of window.JSInterface for communication. My current challenge lies in invoking the JSInterfa ...

javascriptjavaandroidhtmlvue.js

What is the process to insert a record into a table by triggering an AJAX call upon clicking "save

I'm looking to dynamically update a table with data from a database using AJAX. Specifically, I want the table to reflect any new records added by the user without having to refresh the entire page. Below is my JavaScript code snippet for handling thi ...

javascriptphpmysqlajax

Changing the context results in the entire component being re-rendered

Currently, I am encountering a challenge where I have two different components within my Layout.js component that need to "share" props with each other. To address this issue, I introduced a ContextProvider named IntegrationProvider. However, a new proble ...

javascriptreactjs

Tips for manipulating and storing nested information within the "state" by utilizing "text input"

Using Material-ui Version: 0.1 The current value stored in state: formatter = [ {currencyField: "", amountField: ""} {accountField: "", amountField: ""} {numberField: ""} ] I am looking to update each element of the object in state ...

javascriptreactjsmaterial-uijsx

Feathers.js - Incorporating Static Content

Recently, I've been exploring the capabilities of feathers.js for a new project and have been quite impressed with its potential. Intrigued by what it offers, I decided to embark on creating a basic content management system as a way to further my lea ...

javascriptnode.jsexpressfeathersjs

"Enhance your design with cutting-edge optimization techniques by customizing shapes and utilizing ExtrudeGeometry to convert them into stunning 3

I have created numerous custom geometries in three.js, causing high CPU usage and low FPS. Each custom geometry has a different color assigned to it. Can someone provide me with tips on how to optimize this issue? Thank you. Click here for more informatio ...

three.js

You cannot access the property 'subscribe' on a void type in Angular 2

fetchNews(newsCategory : any){ this.storage.get("USER_INFO").then(result =>{ this.storage.get("sessionkey").then(tempSessionKey =>{ this.email = JSON.parse(result).email; this.newSessionKey = tempSessionKey; this.authKey =JSON.stringify("Basic ...

javascriptangulartypescriptionic2angular2-services

The Raycaster in ThreeJs is not updating the color of the boxes it touches

//Creating a Scene and Camera const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(0, 0, 10); //Generating Geometries const boxGeo=new THREE.Bo ...

three.js

Tips for positioning a modal in the center specifically for zoomed-in mobile devices

I created a modal that uses the following function to center itself: center: function() { var top=Math.max($window.height() - $modal.outerHeight(),0) / 2; var left=Math.max($window.width() - $modal.outerWidth(),0) / 2; $modal.css({ ...

javascriptjqueryhtmlcssmobile

What could be the reason my code isn't successfully performing addition within the input field?

As a novice, I am practicing by attempting to retrieve a number from a text field, prompting the user to click a button that adds 2 to that number, and then displaying the result through HTML. However, I keep encountering an issue where NaN is returned whe ...

javascripthtml

Excessive Function Calls Detected in AngularJS Application

I'm facing a major performance issue. I need to display details in a list, but the function is being called excessively. Feel free to check out the demo here Here's the HTML code snippet : <div ng-controller="MyCtrl as ctrl"> <p>K ...

javascriptangularjsperformance