How to change the color of a collada model?

Question

I try to visualize a self-derived collada model for a web application with WorldWind. My model is supposed to dynamically change the color.

Here is the link to my model which is supposed to change color. Here are links to other models with color, a Porsche and a satellite. They are well rendered.

Here is my html code:

<link href="custom.css" rel="stylesheet">
<canvas id="globe">
  Your browser does not support HTML5
</canvas>
<script src="https://files.worldwind.arc.nasa.gov/artifactory/web/0.9.0/worldwind.min.js"></script>
<script src="app.js" type='text/javascript'></script>

Here is my css code:

body {
  background-color: black;
}

canvas {
  width: 100vw;
  height: 100vh;
}

and finaly my javascript code:

var wwd = new WorldWind.WorldWindow("globe");
wwd.addLayer(new WorldWind.BMNGLandsatLayer());
wwd.addLayer(new WorldWind.AtmosphereLayer());
wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));

var renderableLayer = new WorldWind.RenderableLayer();
wwd.addLayer(renderableLayer);

var stuff = {};
stuff.ambient = new Float32Array([1, 1, 1, 1]);
stuff.diffuse = new Float32Array([0.66, 0.58, 0.40, 1]);
stuff.emission = new Float32Array([0, 0, 0, 1]);
stuff.id = "stuff";
stuff.reflectivity = 0.100;
stuff.shininess = 20;
stuff.specular = new Float32Array([0.33,0.33,0.33,1]);
stuff.techniqueType = "phong";
stuff.transparency = 0;
stuff.transparent = new Float32Array([1,1,1,1]);

var position = new WorldWind.Position(10, -5, 600000);
var colladaLoader = new WorldWind.ColladaLoader(position);
var modelAddress = "my_model.dae";
colladaLoader.load(modelAddress, function (model) {
    model.scale = 500;
    model.materials.stuff = stuff;
    model.meshes['aachen-mesh'].buffers[0].material = "stuff";
    renderableLayer.addRenderable(model);
  });


var position2 = new WorldWind.Position(10, -5, 300000);
var colladaLoader2 = new WorldWind.ColladaLoader(position2);
var modelAddress2 = "porsche.dae";
colladaLoader2.load(modelAddress2, function (model2) {
    model2.scale = 500;
    renderableLayer.addRenderable(model2);
  });


var position3 = new WorldWind.Position(10, -4, 400000);
var colladaLoader3 = new WorldWind.ColladaLoader(position3);
var modelAddress3 = "satellite.dae";
colladaLoader3.load(modelAddress3, function (model3) {
    model3.scale = 500;
    renderableLayer.addRenderable(model3);
    wwd.goTo(new WorldWind.Position(10, -5, 750000));   
  });

I try to change the color with these lines:

model.materials.stuff = stuff;
model.meshes['aachen-mesh'].buffers[0].material = "stuff";

I believe that it could be done with some texture coordinates (UVs). But I am not sure if that is true and if so, how such texture coordinates should be defined or what they feature. I just want uniform colors, nothing fancy. I am not considerably attached to WorldWind. Alternatives are welcome, as long as it gets the job done.

Answer 1

It depends on how many children your collada model has. You could try something like this:

this.yourMesh.children[0].material.color = hexToRgbTreeJs('#000000');

Helper:

const hexToRgbTreeJs = (hex) => {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

  return result ? {
    r: parseInt(result[1], 16) / 255,
    g: parseInt(result[2], 16) / 255,
    b: parseInt(result[3], 16) / 255
  } : null;
}

I'm using threejs to load the dae file.

Here is a demo changing one sofa child to black: https://codepen.io/iondrimba/pen/mZYLxq?editors=0010