Question

我尝试使用WorldWind可视化用于Web应用程序的自定义collada模型。我的模型应该动态地改变颜色。

这是指向我的model的链接，该链接应该会更改颜色。这里是带有其他颜色，Porsche和satellite的其他模型的链接。它们呈现效果很好。

这是我的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-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;
}

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

以下是一个演示，其中将一个沙发孩子变成了黑色：https://codepen.io/iondrimba/pen/mZYLxq?editors=0010

如何更改collada模型的颜色？

1 个答案: