javascript - 如何更改 collada 模型的颜色?
问题描述
我尝试使用 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)来完成。但我不确定这是否属实,如果是这样,应该如何定义这样的纹理坐标或它们的特点。我只想要统一的颜色,没有什么花哨的。我不太喜欢 WorldWin。替代品是受欢迎的,只要它能完成工作。
解决方案
这取决于您的 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
推荐阅读
- javascript - 如何使用javascript填充从文本框中选择的下拉列表中的值
- json - 无法将响应数据分配给状态数据并且响应在 React 中不为空
- python-3.x - 即使不在列表中,在列表中获取重复项也应该在 Python 中正常工作
- google-smart-home - 当用户选择取消链接时该怎么办
- python - Python 和 Pandas 中的年月彩条图
- sql-server - SQL Server 中不存在约束
- css - CSS使背景颜色从亮到暗开始
- python - PyTorch 的 torch.nn.functional.interpolate 行为异常
- html - 如何在边框中添加图像
- dolphindb - 如何获取某个日期范围内的 NYSE 交易日