Incorporating geometric shapes into THREE.Object3D

Question

Incorporating geometric shapes into THREE.Object3D

I have made some edits to this post for clarity.

My goal here is to create a tile made up of 8 different triangles, each capable of changing color independently.

https://i.sstatic.net/iFsWz.png

The issue I am facing is that when I change the color of one triangle, it also changes the color of the lines in between, as shown in the second image.

https://i.sstatic.net/eFM4I.png

This is the code used to create a tile:

var tile=[];
var n=0;
for(var i=0; i<4; i++){
    for(var j=0; j<2; j++){
        var triangle = new THREE.Object3D();
        var lineMaterial = new THREE.LineBasicMaterial({color:0xffffff, transparent:true, opacity:0.5});
        var triangleMaterial = new THREE.MeshPhongMaterial({color:COLOR_OFF ,emissive:EMISSIVE_OFF ,side:THREE.DoubleSide, shading:THREE.FlatShading});

        var geometry = new THREE.Geometry();
        geometry.vertices.push( triangleVectors[j][0], triangleVectors[j][1], triangleVectors[j][2] );
        var face = new THREE.Face3(0, 1, 2);
        geometry.faces.push(face);

        triangle.add(new THREE.LineSegments(new THREE.Geometry(), lineMaterial));
        triangle.add( new THREE.Mesh( new THREE.Geometry(), triangleMaterial));

        triangle.children[ 0 ].geometry = new THREE.WireframeGeometry(geometry);
        triangle.children[ 1 ].geometry = geometry;

        triangle.rotation.z = Math.PI*i/2;
        triangle.position.x = TILE_LENGTH*x;
        triangle.position.y = TILE_LENGTH*y;

        n++;                        
        tile.push({'triangle':triangle,'number':n,'state':"OFF"});                      
        scene.add(triangle);
     }
}

To update the state of a triangle on the tile, I use the following code:

for(var j=0;j<tile.length; j++){

    tile[j].triangle.children[0].material.color.set(COLOR_OFF);
    tile[j].triangle.children[1].material.color.set(COLOR_OFF);
    tile[j].state="OFF";

    for(var k=0; k<pathUpdates[step].length; k++){
        if(pathUpdates[step][k].number == tile[j].number){
           tile[j].triangle.children[0].material.color.set(COLOR_ON);               
           tile[j].triangle.children[1].material.color.set(COLOR_ON);
           floor[i].tile[j].state="ON";
        }
    }
}

Is this the correct way to modify a material?

I have simplified the code slightly to illustrate my issue better. The full code can be found in this repository https://github.com/tul1/Tile.git. If you'd like to see it in action, I have deployed it at .

javascript three.js

Answer 1

Answer №1

My current issue revolves around the fact that altering the color of a single triangle also changes the color of the connecting lines, as depicted in the second image.

After examining your source code, it seems that if you wish to maintain the white color of the lines while only adjusting the triangles' colors, you can simply eliminate the line responsible for modifying the color of lineMaterial:

for(var j=0;j<tile.length; j++){
    // The line below will alter all line colors to 0x156289:
    // tile[j].triangle.children[0].material.color.set(COLOR_OFF);

    tile[j].triangle.children[1].material.color.set(COLOR_OFF);
    tile[j].state="OFF";

    for(var k=0; k<pathUpdates[step].length; k++){
        if(pathUpdates[step][k].number == tile[j].number){
           // The line below will change the active line color to 0x891528
           // tile[j].triangle.children[0].material.color.set(COLOR_ON); 

            tile[j].triangle.children[1].material.color.set(COLOR_ON);
            floor[i].tile[j].state="ON";
        }
    }
}

Evaluation

To maintain the original white color on the lines, refrain from altering their color during modification: https://i.sstatic.net/ASlyT.jpg

Grouping

Should you desire grouping all tiles into one entity, consider introducing a THREE.Group object within your global scope (outside of any for() loops). Subsequently, add each triangle individually during every iteration of the for() loop. Here's a pseudocode example illustrating this process:

// Establish tileGroup outside the loop
var tileGroup = new THREE.Group();

for(var x=0; x<nX; x++){
    for(var y=0; y<nY; y++){
        var tile=[];
        var n=0;
        for(var i=0; i<4; i++){
            for(var j=0; j<2; j++){
                // All existing triangle-creation code belongs here

                // ...

                // Once triangle is formed, include it into the group
                tileGroup.add(triangle);
            }
        }
    }
}

// At last, append tileGroup to scene
scene.add(tileGroup);

// Consequently, manage all tiles simultaneously inside the group
tileGroup.position.set(0, 15, 0);

Answer 2

My current issue revolves around the fact that altering the color of a single triangle also changes the color of the connecting lines, as depicted in the second image.

After examining your source code, it seems that if you wish to maintain the white color of the lines while only adjusting the triangles' colors, you can simply eliminate the line responsible for modifying the color of lineMaterial:

for(var j=0;j<tile.length; j++){
    // The line below will alter all line colors to 0x156289:
    // tile[j].triangle.children[0].material.color.set(COLOR_OFF);

    tile[j].triangle.children[1].material.color.set(COLOR_OFF);
    tile[j].state="OFF";

    for(var k=0; k<pathUpdates[step].length; k++){
        if(pathUpdates[step][k].number == tile[j].number){
           // The line below will change the active line color to 0x891528
           // tile[j].triangle.children[0].material.color.set(COLOR_ON); 

            tile[j].triangle.children[1].material.color.set(COLOR_ON);
            floor[i].tile[j].state="ON";
        }
    }
}

Evaluation

To maintain the original white color on the lines, refrain from altering their color during modification: https://i.sstatic.net/ASlyT.jpg

Grouping

Should you desire grouping all tiles into one entity, consider introducing a THREE.Group object within your global scope (outside of any for() loops). Subsequently, add each triangle individually during every iteration of the for() loop. Here's a pseudocode example illustrating this process:

// Establish tileGroup outside the loop
var tileGroup = new THREE.Group();

for(var x=0; x<nX; x++){
    for(var y=0; y<nY; y++){
        var tile=[];
        var n=0;
        for(var i=0; i<4; i++){
            for(var j=0; j<2; j++){
                // All existing triangle-creation code belongs here

                // ...

                // Once triangle is formed, include it into the group
                tileGroup.add(triangle);
            }
        }
    }
}

// At last, append tileGroup to scene
scene.add(tileGroup);

// Consequently, manage all tiles simultaneously inside the group
tileGroup.position.set(0, 15, 0);

Incorporating geometric shapes into THREE.Object3D

Answer №1

Similar questions

"Adjust the placement of a personalized marker on a Google Map using google-map-react

Searching by object id from the front-end: A step-by-step guide

How can I make the menu item become highlighted as I scroll through the page

How can I enhance the functionality of AJAX in Symfony 1.4 when using jQuery, specifically in cases where a select box's options depend on the selection of another select box?

Validating passwords using Vuetify

Tips on retrieving stored data from asynchronous d3 calls within the document.ready event and passing it to another function

Simultaneous appearance of multiple jQuery dialogs

Struggling to conceal the code with a Jasmine Spy

Is it possible to retrieve a list of controllers that are connected to an object in Three.js?

Steps for passing $scope to an AngularJS 1.5 component or directive

Tips for adjusting the font size according to the varying number of characters entered

Ways to dynamically update the content of an HTML table without the need to reload the page

Tips for sending information to a JavaScript variable through AJAX requests

The HTML document is unable to locate the Angular framework

Ways to make all elements appear darker with the exception of one specific element

Watchman encountered an error upon initialization

Learn how to successfully place a draggable object into a sortable container while ensuring that the dropped item is a personalized helper element rather than the original object

Chargebee encountered an error of type TypeError when attempting to create a subscription. The action

Selenium's `getEval` function is unexpectedly returning null, despite the fact that the corresponding JavaScript

Using a $watch on a directive that has an isolated scope to monitor changes in a nested object property retrieved from