Tips for capturing the Three.js model file content and assigning it to a variable

Question

Tips for capturing the Three.js model file content and assigning it to a variable

After exporting a model from Blender to Three.js, the resulting file contains JSON data. There are two methods I know of for loading this model:

var loader = new THREE.JSONLoader()
var material = new THREE.MeshPhongMaterial({color: '#8080a0'})

1.

loader.load('tower.json', function (geometry) {
    var mesh = new THREE.Mesh(geometry, material)
})

2. Make changes to the tower.js file by adding

var tower =

on the first line. Then load it using:

var towerModel = loader.parse(tower)
var mesh = new THREE.Mesh(towerModel.geometry, material)

I personally prefer the second solution as repeatedly using loader.load() when creating multiple meshes based on the same model can significantly slow down performance and potentially crash your browser.

Therefore, my question is - is there a way to extract JSON data from the tower.json file directly into a variable without manual alterations? The ideal scenario would be to retrieve the JSON data without having to modify the file itself.

javascript json three.js

Answer 1

Answer №1

Option 1 seems like the way to go in my opinion. It doesn't make much sense to include a loader in a source file. To maintain organization, it's better to keep loaders and data sources (such as model files) separate.

Why bother reloading the same model? It's more efficient to store it in a variable and reuse it instead of loading the same geometry multiple times which can be taxing on both CPU and memory.

Here's an optimization concept you can try out:

// Keep track of model files
myFiles = {
    tower: 'tower.json',
    car: 'car.json'
};

// Store loaded geometries
myModels = {
    tower: null,
    car: null
};

// Loader function that loads from file or storage
var load = function( modelName ){
    if( myModels[modelName] === null ){
        loader.load(myFiles[modelName], function (geometry) {
            myModels[modelName] = geometry;
        });
    }

    var model = new THREE.Mesh(myModels[modelName], material)
    scene.add( model );
}

Feel free to adjust this code according to your preferences.

Answer 2

Option 1 seems like the way to go in my opinion. It doesn't make much sense to include a loader in a source file. To maintain organization, it's better to keep loaders and data sources (such as model files) separate.

Why bother reloading the same model? It's more efficient to store it in a variable and reuse it instead of loading the same geometry multiple times which can be taxing on both CPU and memory.

Here's an optimization concept you can try out:

// Keep track of model files
myFiles = {
    tower: 'tower.json',
    car: 'car.json'
};

// Store loaded geometries
myModels = {
    tower: null,
    car: null
};

// Loader function that loads from file or storage
var load = function( modelName ){
    if( myModels[modelName] === null ){
        loader.load(myFiles[modelName], function (geometry) {
            myModels[modelName] = geometry;
        });
    }

    var model = new THREE.Mesh(myModels[modelName], material)
    scene.add( model );
}

Feel free to adjust this code according to your preferences.

Tips for capturing the Three.js model file content and assigning it to a variable

Answer №1

Similar questions

Dropbox menu within an extended webpage

Modify the dateFormat setting in amChart to display the dates as the days of the week, such as Monday

Activating view loading in AngularJS through child window authentication (OAuth)

Combining user input data using JavaScript and Vue.js

Learn how to access a variable within the Watch function using a directive in Angular framework

NodeJS Jest test failing due to a global variable being set for a different test already

Looking for assistance in consolidating identical values in a dictionary into one cohesive group

Guide to encoding data using a multidimensional array in JSON format

Upon clicking the button, input numbers into multiple number type inputs

Write the dictionary data directly to a file without any additional processing

Tips for changing the <title> in an AngularJS one-page application

Having trouble getting async and await to function properly

Measuring the success of Vuejs app

The action of json_decode/encode on a simpleXMLElement results in the addition of arrays instead of leaving empty strings

Having trouble running Protractor with the Angular Seed Basic app in AngularJS?

What is the significance of the "@" in JXON conversion in JavaScript?

Instructions for showing a timer on a webpage from a managed bean by utilizing JavaScript

When using jQuery to focus on an input element, the cursor fails to show up

Is there an issue with my JavaScript append method?

Encountered an error while trying to run npm start