Assigning array materials in ThreeJS allows you to create complex

Question

Assigning array materials in ThreeJS allows you to create complex

When I assign framemat to

createScene(ID, geometry, 1, framemat)

, everything works fine. But when I try

createScene( ID, geometry, 1, materials[ID] )

, it doesn't cooperate.


    var jsonLoader = new THREE.JSONLoader(),
    paths = [
        "obj/jgd/GALD-JGD-frame.json", 
        "obj/jgd/GALD-JGD-logo.json", 
        "obj/jgd/GALD-JGD-light.json"
    ],

    materials = [
        "framemat", 
        "logomat", 
        "lightmat"
    ],                  

    objNum = paths.length; 

for ( var id = 0; id < paths.length; id++ ) {

    (function(){ 

        jsonLoader.load( paths[id], function( geometry, materials ) { 

                createScene( id, geometry, 1, materials[id] ) 
            }
        );

    })(); 
}

The fun part of creating a scene:


function createScene( id, geometry, scale, material ) {
    geometry.computeTangents();
    objects[id]= new THREE.Mesh( geometry, material );
    objects[id].scale.x = objects[id].scale.y = objects[id].scale.z = scale;
    scene.add( objects[id] );
}

javascript three.js

Answer 1

Answer №1

There seems to be some confusion in your code: you initially define an array called materials, but then you use the same name for the second argument of the JSONLoader to capture textures from a json file. Furthermore, you are attempting to access materials[id] when it's not clear if the correct index exists. This ambiguity can lead to errors and unexpected behavior.

To clarify the situation, consider the following options:

If you prefer creating materials independently, stick with the first array and implement a function that converts strings to materials. In this case, remove the second argument from the JSONLoader.
If you want to utilize materials from the JSON File directly, the initial materials array is unnecessary and may cause issues. You have two choices:
- If there is only one material for the entire object, use:
```
createScene(..., ..., materials);
```
- If multiple materials are required, opt for:
```
createScene(..., ..., new THREE.MeshFaceMaterial(materials));
```

Answer 2

There seems to be some confusion in your code: you initially define an array called materials, but then you use the same name for the second argument of the JSONLoader to capture textures from a json file. Furthermore, you are attempting to access materials[id] when it's not clear if the correct index exists. This ambiguity can lead to errors and unexpected behavior.

To clarify the situation, consider the following options:

If you prefer creating materials independently, stick with the first array and implement a function that converts strings to materials. In this case, remove the second argument from the JSONLoader.
If you want to utilize materials from the JSON File directly, the initial materials array is unnecessary and may cause issues. You have two choices:
- If there is only one material for the entire object, use:
```
createScene(..., ..., materials);
```
- If multiple materials are required, opt for:
```
createScene(..., ..., new THREE.MeshFaceMaterial(materials));
```

Assigning array materials in ThreeJS allows you to create complex

Answer №1

Similar questions

Leverage a single JavaScript file across all Vue components without the need for individual imports

Implement an AJAX link on the webpage using Yii framework

Tips for coordinating the execution of 2 async.waterfalls in Node.js

Efficient method for retrieving the values of each cell in a row within an array

Tips for avoiding a form reload on onSubmit during unit testing with jasmine

The Twilio JWT authentication token has expired

Navigate to a different page using Angular2 routing

Refresh the div based on the script's output

Angular 7 features a table with multiple timers indicating the remaining time until expiration

Unexpected TypeScript issue: Unable to access the 'flags' property of an undefined entity

Having trouble getting the onClick event to trigger in React?

Perform a single click and a double click on an anchor element in the document

Implementing Asynchronous Custom Validators in Angular 4

Retrieving localStorage data from another webpage

The hydration error in next js is causing this code to malfunction

What's the deal with the max element indices/vertices in WebGL2?

Tips for eliminating nested switchMaps with early returns

Despite successfully connecting to my webservice, the ajax function encounters an error

What causes the error message "ng-model is undefined"?

In the process of transforming my JavaScript code into JQuery