更改"AR.JS"中对象的颜色(.dae或gltf). [英] Change the color of an object (.dae or gltf) in "AR.JS"
问题描述
我正在尝试更改在Blender中创建的对象的颜色.我可以在html代码本身中更改"a-box，a-sphere"之类的对象的颜色，但不能在tree.js(gltf或.dae-collada)内部使用对象.
I'm trying to change the color of an object I created in blender. I can change the color of objects like "a-box, a-sphere" in the html code itself, but with objects inside tree.js (gltf or .dae - collada) I cannot.
CodePen (这只是我的真实项目中未来应用的测试环境(AR.JS))
CodePen (This is just a test environment for future application in my real project (AR.JS))
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-gltf-model id="test" src="https://raw.githubusercontent.com/KurtRodrigues/KurtRodrigues.github.io/master/Arquivos%20utilizados/Pe%C3%A7a%2Bbancada_V2.gltf" color="#FF0000" position="0 0 -3" rotation="0 0 0" scale="1.5 1.5 1.5" size="20px"> </a-gltf-model>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
已经尝试过:
HTML 和 color =#ff00000 .
CSS 通过ID .test {color:#ff0000}
JS :
var b = document.querySelector ("test");
b.setAttribute ("color", "red");
是否有任何方法可以直接在代码中或仅在我制作对象(混合器)时更改对象的颜色?
Is there any way to change the color of the object directly in the code or just at the moment I make the object (blender)?
推荐答案
包含GLTF模型的实体很复杂，因为它们在gltf容器中包含许多模型.您不能像使用其他基元那样在gltf内的模型上使用setAttribute.相反，您必须将它们像THREEjs模型一样对待.这意味着您需要制作一个自定义组件，以遍历" gltf，查找模型，并存储对它们的变量引用，然后稍后可以在THREEjs级别上更改这些模型的参数.例如
Enitities that contain GLTF models are complex, as they contain many models inside the gltf container. You can't use setAttribute on the models inside a gltf like you can with other primitives. Instead you have to treat them like THREEjs models. That means you need to make a custom component that will 'traverse' through the gltf, and find the models, and store variable references to them, and then later you can change the parameters of these models on the THREEjs level. For example
AFRAME.registerComponent('treeman', {
init: function(){
let el = this.el;
let self = this;
self.trees = [];
el.addEventListener("model-loaded", e =>{
let tree3D = el.getObject3D('mesh'); // get the THREEjs group
if (!tree3D){return;}
console.log('tree3D', tree3D); // log the THREEjs group so you can look
at all of its contents and parameters.
tree3D.traverse(function(node){ // this is how you loop through
(traverse) the models
if (node.isMesh){
console.log(node);
self.trees.push(node);
if(node.name == "Trunk_A"){
self.treeMat = node.material; // store a reference to the
material you want to modify later
}
node.material.map = null; // removes the texture so we can see
color clearly
}
});
});
然后，您可以使用事件侦听器功能访问此组件，并对材料进行处理.像这样
Then later, you can access this component with event listener functions, and do stuff to materials. like this
el.addEventListener('changecolor', e =>{
let colorp = e.detail.color;
let colorHex = Number(colorp.replace('#', '0x'));
let color3D = new THREE.Color(colorHex);
self.treeMat.color = color3D;
});
请注意，我们必须将颜色放入THREEjs想要的数据结构中，例如颜色对象.与Aframe的简单性相比，所有这些工作量很大，但是您拥有更多的控制权，并且可以准确地看到引擎盖下正在发生的事情.
Note that we have to put the color into data structures that THREEjs wants, like the color object. All of this is a lot of work compared to the simplicity of Aframe, but you have much more control and you can see precisely what is happening under the hood.
这篇关于更改"AR.JS"中对象的颜色(.dae或gltf).的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
