Tips for adjusting the color of a loaded object in three.js using JSONLoader

Question

Tips for adjusting the color of a loaded object in three.js using JSONLoader

My experience with Three.js involves using the AssimpJSONLoader to load objects. One specific object I loaded was cube_cone, a simple 3D model featuring a cube with a cone on top.

var loader1 = new THREE.AssimpJSONLoader(); 
loader1.load( 'models/assimp/cube_cone.json', function ( object ) {
        object.scale.multiplyScalar( 1 );
        object.material.color.setHex(0x666666);
        scene.add( object );

}, onProgress, onError );

My first challenge was changing the color of the object. I attempted to do so by using: "object.material.color.setHex(...)".

Additionally, I wanted to manipulate the color of a specific child object within cube_cone, for example, just the cone. This child object, named test_cone.json, contains children with names like "3DSMesh_0" and "3DSMesh_1". How can I access these children to modify only part of the object?

As a beginner in Javascript, any assistance you can provide would be greatly appreciated.

javascript json three.js

Answer 1

Answer №1

It's always helpful to provide an example as a response to your previous comment.

let myObject = new THREE.Group(); //declaring a global variable
...
let loader = new THREE.AssimpJSONLoader();
loader.load('models/assimp/cube_cone.json', function (loadedObject) { //callback function for when object is loaded
    myObj = loadedObject; //setting the loaded object to the global variable inside the callback
}, onProgress, onError);
...
function animate() {
    ...
    myObject.rotation.y += 0.1; // accessing the global variable in the animation function
    ...
}

You can also assign a child of an object, like this:

myObject = loadedObject.getObjectByName("3DSMesh_1", true);

Answer 2

It's always helpful to provide an example as a response to your previous comment.

let myObject = new THREE.Group(); //declaring a global variable
...
let loader = new THREE.AssimpJSONLoader();
loader.load('models/assimp/cube_cone.json', function (loadedObject) { //callback function for when object is loaded
    myObj = loadedObject; //setting the loaded object to the global variable inside the callback
}, onProgress, onError);
...
function animate() {
    ...
    myObject.rotation.y += 0.1; // accessing the global variable in the animation function
    ...
}

You can also assign a child of an object, like this:

myObject = loadedObject.getObjectByName("3DSMesh_1", true);

Tips for adjusting the color of a loaded object in three.js using JSONLoader

Answer №1

Similar questions

Upon returning to the previous page, the checkbox remains checked and cannot be unchecked

What could be causing the issue with local storage in React JS not functioning in real time?

Display JSON information on an ejs page in Expressjs

What is the process for obtaining the longitude and latitude coordinates from a map?

only the final object is visible in the Json array once it has been constructed

Extracting a precise value from an array nested within another array

When utilizing both jQuery and JSON, the date value is being shown in an incorrect format

What could be the reason behind my Discord bot never being marked as ready?

Decode a JSON string that has already been encoded

Utilizing the power of Vue Router with DataTables

Error: Property 'blogCategory' is unreadable because it is undefined

Utilize JavaScript's $.Map() function in combination with Math.Max.Apply() to determine the tallest height possible

Navigating a JSON array with Python: A guide to parsing

using next-i18next for internationalization in an array of objects

dismiss facial recognition event

Upon clicking the link, the JavaScript functionality failed to activate

An unexpected error has occurred: Uncaught promise rejection with the following message: Assertion error detected - The type provided is not a ComponentType and does not contain the 'ɵcmp' property

Iterating over JSONObject to Form Array in Java

What is the best method to handle errors when retrieving JSON data and updating it using fetch()?

What could be the reason for the malfunctioning of my JavaScript code?