So, I have been creating some model on Blender and exporting them as .glb files. For instance, I have three models named “Infantry.glb”, “Space Dock.glb” and “PDS.glb”. Now, I have loaded several of them in and am changing their material colors (r,g,b that is). Here is where I am running into an interesting problem. When I load in multiple space docks and change each one’s color, it is fine and each object has its own unique position and color. But, when I load in multiple infantry and PDS objects, each object maintains its unique position, but when I try to assign a different color to each object, then they all appear as the same color. I have included code below:
const planetOneX = -0.15;
const planetOneY = 0.45;
const planetTwoX = 0.15;
const planetTwoY = -0.45
makeInfantryToken(system, system.position.x + planetOneX - 0.2, system.position.y + planetOneY + 0.1);
makePDSToken(system, system.position.x + planetOneX + 0.15, system.position.y + planetOneY + 0.1);
makeSpaceDockToken(system, system.position.x + planetOneX, system.position.y + planetOneY - 0.2);
makeControlToken(system, system.position.x + planetTwoX, system.position.y + planetTwoY + 0.07, gamePlayers);
makeInfantryToken(system, system.position.x + planetTwoX - 0.2, system.position.y + planetTwoY + 0.1);
makePDSToken(system, system.position.x + planetTwoX + 0.15, system.position.y + planetTwoY + 0.1);
makeSpaceDockToken(system, system.position.x + planetTwoX, system.position.y + planetTwoY - 0.2);
const makeInfantryToken = (system, infantryPositionX, infantryPositionY) => {
unitLoader.load( 'img/units/Infantry.glb', object => {
const unit = object.scene.children[0];
unit.position.set( infantryPositionX, infantryPositionY, 0.01 );
unit.scale.x = unit.scale.x * .075
unit.scale.y = unit.scale.y * .075
unit.scale.z = unit.scale.z * .075
unit.visible = false;
system.userData.boardTokens.infantry.push( unit );
// if there is infantry on the planet, make it visible with the appropriate color
const planetIndex = system.userData.boardTokens.infantry.length - 1;
for ( var i = 0; i < system.userData.planets[planetIndex].units.length; i ++ ) {
if ( system.userData.planets[planetIndex].units[i].name == 'Infantry' ) {
const playerColor = system.userData.planets[planetIndex].units[0].color;
const unitColor = getUnitColor(playerColor);
unit.material.color.r = unitColor[0];
unit.material.color.g = unitColor[1];
unit.material.color.b = unitColor[2];
unit.visible = true;
break;
}
}
scene.add( unit );
});
}
const makePDSToken = (system, pdsPositionX, pdsPositionY) => {
unitLoader.load( 'img/units/PDS.glb', object => {
const unit = object.scene.children[0];
unit.position.set( pdsPositionX, pdsPositionY, 0.01 );
unit.scale.x = unit.scale.x * .2
unit.scale.y = unit.scale.y * .2
unit.scale.z = unit.scale.z * .2
unit.rotation.set( 0, 0.5, 0 );
unit.visible = false;
system.userData.boardTokens.pds.push( unit );
// if there is a pds on the planet, make it visible with the appropriate color
const planetIndex = system.userData.boardTokens.pds.length - 1;
for ( var i = 0; i < system.userData.planets[planetIndex].units.length; i ++ ) {
if ( system.userData.planets[planetIndex].units[i].name == 'PDS' ) {
const playerColor = system.userData.planets[planetIndex].units[0].color;
const unitColor = getUnitColor(playerColor);
unit.material.color.r = unitColor[0];
unit.material.color.g = unitColor[1];
unit.material.color.b = unitColor[2];
unit.visible = true;
break;
}
}
scene.add( unit );
});
}
const makeSpaceDockToken = (system, spaceDockPositionX, spaceDockPositionY) => {
unitLoader.load( 'img/units/Space Dock.glb', object => {
const unit = object.scene.children[0];
unit.position.set( spaceDockPositionX, spaceDockPositionY, 0.01 );
unit.rotation.set( 0, 0.5, 0 );
unit.scale.x = unit.scale.x * .2
unit.scale.y = unit.scale.y * .2
unit.scale.z = unit.scale.z * .2
unit.visible = false;
system.userData.boardTokens.spaceDock.push( unit );
// if there is a pds on the planet, make it visible with the appropriate color
const planetIndex = system.userData.boardTokens.spaceDock.length - 1;
for ( var i = 0; i < system.userData.planets[planetIndex].units.length; i ++ ) {
if ( system.userData.planets[planetIndex].units[i].name == 'Space Dock' ) {
const playerColor = system.userData.planets[planetIndex].units[0].color;
const unitColor = getUnitColor(playerColor);
unit.material.color.r = unitColor[0];
unit.material.color.g = unitColor[1];
unit.material.color.b = unitColor[2];
unit.visible = true;
break;
}
}
scene.add( unit );
});
}
const getUnitColor = ( color ) => {
var r = 0;
var g = 0;
var b = 0;
if ( color == 'red' ) {
r = 2;
} else if ( color == 'blue' ) {
b = 2;
} else if ( color == 'green' ) {
g = 2;
} else if ( color == 'yellow' ) {
r = 2;
g = 2;
} else if ( color == 'purple' ) {
r = 1;
b = 2.9;
} else if ( color == 'black' ) {
// do nothing
}
return( [r,g,b] );
}
I am thinking there is one of two problems that might be the issue here
(1) There is a specific issue with the blender models for the infantry and PDS models in terms of their materials (they are being shared by all models?)
(2) Something I am not considering about the asynchronous nature of the gltf loader in three.js
I am continuing to try and resolve the issue, but if anyone can shed some light on what could be wrong, that would be greatly appreciated. Thanks