Using Three.js to render JSON models multiple times

Is there a way to load a JSON model just once and then add it to the scene multiple times?

I am currently calling the model loading function twice, but I believe there might be a more efficient solution out there. If anyone has a working example or suggestion, I would greatly appreciate it.

var loader = new THREE.JSONLoader();

    loader.load( "models/model1.js", meshloader1("models/model1.js"));
    loader.load( "models/model1.js", meshloader2("models/model1.js"));

        function meshloader1(fileName){
            return function(geometry){
              mesh1 = new THREE.Mesh(geometry, material);
              mesh1 .position.set( 0, 0, 0 );
              mesh1 .scale.set( 1, 1, 1 );
              scene.add(mesh1 );
            }
        }

        function meshloader2(fileName){
            return function(geometry){
              mesh2 = new THREE.Mesh(geometry, material);
              mesh2 .position.set( 0, 0, 0 );
              mesh2 .scale.set( 1, 1, 1 );
              scene.add(mesh2 );
            }
        }

Answer №1

To incorporate a geometry object into your loader, you can define it externally like so:

var loader = new THREE.JSONLoader();
var customGeometry;

loader.load( "models/model1.js", loadMesh("models/model1.js"));

function loadMesh(fileName){
    return function(geometry){
        customGeometry = geometry;
        createMeshes();
    }
}

// As the `loader.load()` method is asynchronous,
// you should encapsulate this process within a function and invoke it when the geometry has been loaded successfully
function createMeshes(){
   var mesh1 = new THREE.Mesh(customGeometry, material);
   mesh1.position.set( 0, 0, 0 );
   mesh1.scale.set( 1, 1, 1 );
   scene.add(mesh1);

   var mesh2 = new THREE.Mesh(customGeometry, material);
   mesh2.position.set( 1, 1, 0 );
   mesh2.scale.set( 1, 1, 1 );
   scene.add(mesh2);
}

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

Fixing the 'window is not defined' Error in Node JS through Command Line

Trying to incorporate Angular JS using 'require' in my code snippet: var ang = require('angular'); However, encountering an error: ReferenceError: window is not defined I am aware that the window object is not defined in the Node co ...

Determine the specific value of an HTML table cell by specifying the column name for a specific row

One challenge I am facing is dynamically creating a table using JSON without knowing in advance the number of columns and/or rows that will be generated. I have successfully added a clicked event for the row that gets selected. In every table, there will ...

Ensuring proper integration of this regular expression for password validation

Trying to create a jQuery function that can efficiently check if passwords meet specific requirements. The password must contain at least 3 characters that are uppercase, numbers, or special characters, in any combination. I currently have a function usi ...

What is the process for verifying user authentication in a GET request?

My frontend utilizes Reactjs, while the backend is built with Nodejs and expressjs, connected to a Postgresql database. I have a basic signin page that authenticates users from the database. In my Reactjs application, once signed in, users can upload files ...

Guide to creating a Chrome extension that can detect updates in MongoDB documents

I have developed a chrome extension for syncing links, which stores the data in a MongoDB database using a custom REST API. While I am successfully able to push changes to the database and listen to them using a change stream in the REST API, I am facing d ...

"What is the best way to manipulate arrays in vue.js using the map function

I'm currently dealing with a Vue code that incorporates anime.js. My code has grown substantially to over 1500 lines. In order for Stack Overflow to accept my question, I have only included 5 items of my sampleText, even though it actually consists of ...

Why do I keep encountering a null window object issue while using my iPhone?

Hey there! I've got a React game and whenever the user loses, a new window pops up. const lossWindow = window.open( "", "", "width=500, height=300, top=200, left = 200" ); lossWindow.document.write( & ...

I received no response when I checked my Discord messages

I'm currently working on creating a bot that will send a daily morning message at 9 o'clock with a customizable reaction. Right now, it's successfully sending the message on Discord but there seems to be an issue with the reaction part. Can ...

Leveraging Server Response Codes Across Different Domains Using JavaScript

Before anything else, I must acknowledge the cross-domain issues that may arise with JavaScript. The fact that I am seeing both 404 and 200 response codes in my console has made me reconsider this possibility. The scenario... I am currently developing a w ...

Is there a way to compare a particular JSON value to the values in an array and determine if they are similar? If so, how can I update the JSON value with the array value

My inventory of wholesalers looks like this: const wholesalers = [ "B536 - T QUALITY LTD", ]; I also have a collection of JSON objects as shown below: { 'Preferred Wholesaler': 'T-Quality' }, { 'Preferred Wholesal ...

The jQuery .val(#) function does not update the selection after an AJAX call, but it functions correctly when debugging or paused

Currently encountering an interesting issue - after executing an AJAX call that updates the Appointment List dropdown with new entries based on page load or a user-entered filter, the .val() method is failing to set the value correctly. The successful exe ...

Adjust the text appearance of the graph in ApexCharts

Is there a way to adjust the font size of the donut chart generated by using apexchart? You can view the image here. <template> <section> <v-card raised> <v-card-title class="blue--text">Requests Overview</v-card-ti ...

Sorting in Vuejs fails to function properly when a filter is applied

Having recently delved into Laravel and Vue, I am eager to develop a site for our Intranet. Pulling data from the Laravel database has been successful, displaying the data works well, and the search functionality is also up and running smoothly. However, I ...

What are the best practices for integrating Firebase authentication pre-made UI in Next JS?

As someone new to React and NextJS, I am eager to implement an authentication service for my NextJS web application in order to manage user accounts efficiently. I am particularly interested in utilizing a familiar user login solution that offers a compre ...

Expanding a Zod object by merging it with a different object and selecting specific entries

Utilizing Zod, a TypeScript schema validation library, to validate objects within my application has led me to encounter a specific scenario. I find myself in need of validating an object with nested properties and extending it with another object while se ...

Transform my Curl script into a NodeJS app

I'm trying to replicate the functionality of a curl command within my NodeJS application, but I am facing some difficulties. Any guidance on how to achieve this would be greatly appreciated. curl -H "Authorization: bearer $TOKEN" If I already hav ...

What is the best way to stop a jQuery function from applying titles extracted from the first row th's in thead's to multiple tables in a document?

My circumstances: I am new to jQuery and Stack Overflow, seeking assistance for my website project. The challenge: Building a website using Bootstrap 3.3.6 with intricate data tables that need to be stacked dynamically on mobile devices using CSS. It is c ...

Utilizing the parameter "error" to distinguish unsuccessful tasks within async.mapLimit

In my coding process, I am using async.mapLimit to implement some parallel operations on an array with a limit of 10: async.mapLimit(files, 10, function(file, callback) { ... etc... }, function(error, files) { ... etc.. }); Within the main opera ...

XSLT issue with Internet Explorer 11 - unable to transform XML file

Attempting to display an XSLT stylesheet that is retrieved from an API. It seems to be rendering correctly on Chrome and Firefox, but not on Internet Explorer. I have tried using the example provided by W3C, which works perfectly fine, but it fetches the ...

Creating an app for sending text messages and making video calls with Spring Boot technology

I am interested in developing an application with Spring Boot that allows users to make video calls and share text messages. I also want the ability to save these videos for future viewing by registered users of the app. Although I am familiar with node.j ...