2nd uv in Aframe for ambient occlusion

Question

I would like to use baked AO on an obj-model in Aframe. Don Mccurdy explains that AO needs a 2nd UV channel and how to solve this in Java here:

https://github.com/aframevr/aframe/issues/2721

I tried it but I don`t get it to work!

var geometry = mesh.geometry;

geometry.addAttribute( 'uv2', new THREE.BufferAttribute( geometry.attributes.uv.array, 2 ) );

How do I point this js-lines to my obj-model in Aframe?

Thanks a lot for help, appreciate! Best, can

Answer 1

Ideally, I'd suggest opening the OBJ file in Blender, adding the Ambient Occlusion texture as described in the Blender docs, then exporting to glTF. The rest will be handled automatically with A-Frame's gltf-model component, and will load more quickly.

---

If converting to another format isn't an option, you'll need to write a custom component that listens for the model to load, then traverses every mesh in the model (there might be more than one!) and creates an extra UV set:

AFRAME.registerComponent('copy-uvs', {
  init: function () {
    this.el.addEventListener('model-loaded', function (e) {
      e.detail.model.traverse(function(object) {
        if (object.isMesh && object.geometry.attributes.uv) {
          var geometry = object.geometry;
          geometry.setAttribute('uv2', geometry.attributes.uv);
          console.log('copied UVs!');
        }
      });
    });
  }
});

This copy-uvs component would need to be attached to the same element as your OBJ model.