0

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>
frankenapps
  • 5,800
  • 6
  • 28
  • 69
NKhondaker
  • 3
  • 2
  • You might want to read https://stackoverflow.com/questions/43914818/alpha-animation-in-aframe-for-a-object-model – Diego Marcos Apr 12 '21 at 02:37
  • Also check out [this example](https://gftruj.github.io/webzamples/aframe/models/model_opacity.html)([source](https://github.com/gftruj/webzamples/blob/master/aframe/models/model_opacity.html)) – Piotr Adam Milewski Apr 12 '21 at 11:08

2 Answers2

0

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.

E Purwanto
  • 166
  • 1
  • 9
0

E Purwanto's answer above works for me with an addition of setting transparency true:

this.el.object3D.traverse((child) => {
  if (child.type === 'Mesh') {
    const material = child.material;
    // Do stuff with the material
    material.transparent = true; // enable to modify opacity correctly
    material.opacity = 0.1;
  }
})
ARadovski
  • 1