Using Three.js to load a JSON model and easily implement it in multiple instances

Is there a way to load a JSON model just once and then add it multiple times to the scene with different scales, positions, etc?

I've tried adding the Object3D() to an array, assigning a position and scale to each object in the array, adding them to the scene, but the position and scale get overwritten for every object in the array.

I'm stuck and hoping someone can provide me with a working example of what I want to achieve.

Here's one of my failed attempts. It should give you an idea of what I'm attempting to do, in case my explanation was unclear.

 function addModels(){

            var models = [];    

var model = new THREE.Object3D();       
var modelTex = THREE.ImageUtils.loadTexture( "textures/model.jpg" );
var loader = new THREE.JSONLoader();
loader.load( "models/model.js", function( geometry ) {
    mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({ map: modelTex }) );
    model.add(mesh);
} );

for(var i = 0; i < 5; i++){ 
    model.scale.set(i,i,i);
    model.position.set(i,i,i);
    models[i] = model;

    scene.add(models[i]);
}   

}

Answer №1

To start, make sure you clone a model before setting its position and scale.

 for(var i = 0; i < 5; i++){ 
        var newModel = model.clone();
            newModel.position.set(i,i,i);
            newModel.scale.set(i,i,i);

            scene.add(newModel); 
}  

For an updated example on how to create a JSON model without loading it: View the Fiddle example here, or simply add a loop inside the load function.

Answer №2

To generate fresh meshes using the same geometries and materials, follow these steps:

loader.load( "models/model.js", function( geometry ) {
        var material = new THREE.MeshLambertMaterial( { map: modelTexture });
        for (var index = 0; index < 5; index++) { 
            var meshObject = new THREE.Mesh( geometry, material );
            meshObject.position.set(index, index, index);
            meshObject.scale.set(index, index, index);
            scene.add(meshObject);
        }
});

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 causing this form to submit?

I need help with sending emails via AJAX. My problem is that the form keeps submitting and refreshing, even though I haven't used GET to send anything in the URL. HTML: <form onsubmit="ajaxEmail(); return false;" > <input type=" ...

Creating a Django application that allows users to dynamically add a textfield by

I'm currently developing a django recipe website and I have a query regarding JSON Field and forms While working on the create recipe function for my site, I would like to achieve two things: I am looking to implement text fields that can be adde ...

Looking to attach a listener to an element within a modal once it has finished rendering?

Upon clicking a button, a modal window appears. The controller assigned to the modal contains a list of element IDs that need listeners assigned. However, when the controller initializes, the modal has not yet rendered, causing the elements requiring liste ...

Extracting data from properties within a Vue.js local component

Within my Vue Instance, I have two local components that receive props from the data of the Vue Instance. However, when attempting to access the values of these props in one of the local components, they appear as undefined. The code snippet is as follows ...

Disregard Cloudflare's Automatic RocketLoader feature for certain JavaScript scripts

After extensive research and failed attempts, I am seeking help to disable Cloudflare Rocketloader for a specific JavaScript file on my WordPress website. Specifically, I need to exclude the Automatic Rocket Loader for a particular .js file. I attempted t ...

Issues encountered with jQuery's $.ajax function when communicating with PHP

I am having trouble creating a simple app that displays data from a MySQL database using PHP and jQuery. The issue I am facing is with retrieving the data using jQuery. While my PHP script successfully returns the data without any problems, I am not receiv ...

Unable to retrieve HTTP call response during debugging, although it is visible in the browser

When I send an HTTP request to create a record, I am able to see the added record id in the Network section of browsers like Chrome and Firefox. However, when I try to debug the code and retrieve the same id value, I encounter difficulties. I have tried us ...

Incorporating lodash into Angularjs for enhanced functionality

After stumbling upon an app online that utilizes AngularJS with Lodash, I noticed a simple way in which Lodash is incorporated. By including the following line in the body (after angular has been included): <script src='vendor/lodash/3.3.1/lodash. ...

Conceal or reveal buttons using JavaScript

I am struggling with a function that is supposed to hide certain buttons and create a new button. When I click on the newly created button, it should make the previously hidden buttons visible again. However, the function does not seem to work properly. ...

I am looking to display text dynamically on a web page that is retrieved from a MySQL database and shown in a text box

Here is the code snippet I'm working with: // Set up event listener for when ".thoughts_box" input field loses focus $(".thoughts_box").blur(function(){ var box_id= $(this).attr("id").split("_")[$(this).attr("id").split("_").length-1]; // Cal ...

Adjust the size of the plane in Three.js to match the entire view

English is not my strong suit, as I am Japanese. I apologize for any confusion. Currently, my focus is on studying Three.js. I aim to position a Plane directly in front of the camera as the background. My goal is to have the Plane background fill the en ...

Text in Angular vanishes upon reopening

I have a code snippet where I am trying to allow the user to edit and save a paragraph displayed on a side panel of the main page. Although the code works fine, allowing users to update the text and see it reflected in the network upon saving, there seems ...

Translating protocol buffers to/from JSON using C without the need to create C code

To enable the reading of serialized protocol-buffer messages and their conversion to JSON using jansson, I must utilize .desc files. This is necessary because the protocol-buffer message formats are expected to change more frequently than the C code itself ...

Parsing dates arriving from a Restful Service in JavaScript

When I make a Restful call, the JSON response contains dates in a strange format like this: /Date(-62135568000000)/ What is the simplest way to convert it to a normal date format like (January 10, 2016)? I have read some articles that suggest using rege ...

How can you effectively pass props to a Vuejs Component that is rendered by a Router?

I am new to Vuejs, so I apologize if this is a beginner question. I have added a router to my App and I want to display data from my main App in my Components templates, but it doesn't seem to be working. Here is my current setup: Vue.use(VueRouter ...

How can I modify the card loading style in Vuetify?

My preference is for the <v-card :loading="loading">... However, I would like to modify the appearance from a linear progress bar to something like an overlay. I am aware that changing colors can be done by binding color instead of using boolean ...

Can Javascript have IDs within hrefs?

Is it possible to insert an href with an id inside the runConfirm function? My goal is to display a pop-up after clicking accept, where the accept button triggers the query from isset. Below is the code for accepting: $displaybody .= "<tr> <td&g ...

Springboot: Optionally ignore null values in response

There is a common model class utilized by different APIs, where if certain fields are null in the class they will be returned as null in the JSON response. However, there is another API that also uses this model class but requires any null fields to be omi ...

Calculating the total sum in Vuejs when an event is triggered

I am faced with a situation where the price of a product is added to an existing total when a user increases the quantity. However, the problem lies in the fact that even if the user decreases the quantity, the price continues to increase. Solution html ...

How can I create a placeholder in semantic-ui components?

I'm currently utilizing the plugin and facing an issue with displaying the placeholder. Although data retrieval from the database is functioning properly, the placeholder is not being shown. Note:- When I remove the PHP code, the placeholder display ...