有了这个答案作为参考，我已经成功改变了gltf模型的颜色。
（更改“AR.JS”中对象（.dae 或 gltf）的颜色 https://stackoverflow.com/questions/58589525/change-the-color-of-an-object-dae-or-gltf-in-ar-js）
但是，模型纹理将会消失。
为什么？
<!-- A FRAME -->
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/aframe-orbit-controls.min.js"></script>
<script>
AFRAME.registerComponent('carman', {
init: function(){
let el = this.el;
let self = this;
self.cars = [];
el.addEventListener("model-loaded", e => {
let car3D = el.getObject3D('mesh');
if (!car3D){return;}
//console.log('car', car3D);
car3D.traverse(function(node){
if (node.isMesh){
// console.log(node);
self.cars.push(node);
if(node.name == "meta02t"){
self.carMat = node.material;
}
node.material.map = null;
}
});
});
el.addEventListener('changecolor', e => {
let colorp = e.detail.color;
let colorHex = Number(colorp.replace('#', '0x'));
let color3D = new THREE.Color(colorHex);
self.carMat.color = color3D;
});
}
});
AFRAME.registerComponent('click-listener', {
init: function () {
// Listen for click event
let self = this;
let el = this.el;
this.el.addEventListener('click', function (evt) {
// Call the Octahedron and trigger it's scalewave animation
let car = document.querySelector('#car');
let color = el.getAttribute('material', 'color');
car.emit('changecolor', color);
});
}
});
</script>
我的故障项目https://glitch.com/~0421 https://glitch.com/~0421
没有纹理，因为一旦加载模型，您就会遍历节点并将其删除：
node.material.map = null; // removes the texture
此外，即使颜色改变，汽车看起来也是黑色的。 “金属”部件是粗糙的，不是金属的（粗糙度：0.5，金属度：0）。如果你改变它，汽车就会改变它的颜色（从视觉上来说）：
el.addEventListener('changecolor', e =>{
// set the new color
let colorp = e.detail.color;
let colorHex = Number(colorp.replace('#', '0x'));
let color3D = new THREE.Color(colorHex);
// apply for the "metal" materials
for (var i = 0; i < self.cars.length; i++) {
if (!self.cars[i].material) return
if (self.cars[i].name.includes("meta")) {
self.cars[i].material.metalness = 0.7
self.cars[i].material.roughness = 0.2
self.cars[i].material.color = color3D;
}
}
});
检查一下this https://glitch.com/~61358144 glitch.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
