如何更改 collada 模型的颜色

Question

我尝试使用 WorldWind 为 Web 应用程序可视化一个自派生的 collada 模型。我的模型应该动态改变颜色。

这是指向我的模型的链接，它应该会改变颜色。以下是其他带有颜色的车型、保时捷和卫星的链接。它们渲染得很好。

这是我的 html 代码：

<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>

这是我的 css 代码：

body {
  background-color: black;
}
canvas {
  width: 100vw;
  height: 100vh;
}

并完成我的JavaScript代码：

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));   
  });

我尝试用这些线条更改颜色：

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

我相信这可以通过一些纹理坐标 (UV( 来完成。但我不确定这是否属实，如果是，应该如何定义这样的纹理坐标或它们的特点。我只想要统一的颜色，没有什么花哨的。我对WorldWind不太依恋。欢迎替代方案，只要它能完成工作。

Answer 1

这取决于您的 collada 模型有多少个孩子。你可以尝试这样的事情：

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

助手：

const hexToRgbTreeJs = (hex) => {
  const result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{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;
}

我正在使用 threejs 来加载 dae 文件。

这是一个将一个沙发孩子变成黑色的演示：https://codepen.io/iondrimba/pen/mZYLxq?editors=0010