Change opacity of glb 3D model with aframe

Question

I am trying to make a web app where I can use world tracking to view a 3D model. I am trying to change the opacity of the model using the material property of the a-entity tag, however it does not seem to be working. any idea on how to change the opacity of my 3D object in order to make it translucent?

<a-entity
    id="model"
    gltf-model="#3dmodel"
    class="cantap"
    geometry="primitive: box"
    scale="0.5 0.5 0.5"
    material="transparent: true; opacity 0.1"
    animation-mixer="clip: idle; loop: repeat"
    hold-drag two-finger-spin pinch-scale>
</a-entity>

Answer 1

GLTF models come with their own materials included in the model file. These are handled by THREE.js rather than AFrame, so in order to access their properties you have to search through the elements object3D, using something like this:

this.el.object3D.traverse((child) => {
  if (child.type === 'Mesh') {
    const material = child.material;
    // Do stuff with the material
    material.opacity = 0.1;
  }
})

See the THREE.js documentation on Materials and Object3D for more detail.

Also, I noticed you have both a geometry primitive and a gltf-model on that entity. Not sure how well those two things can co-exist, if you want both a box and the model you should probably make one a child of the other.