Using ambientOcclusionMap with tiled textures in A-frame - aframe

Question

Does anyone have an example of applying ambientOcclusionMap to an OBJ model?
To save on texture size I'd like to make tiled materials using the material component and bake the shadows into the ambientOcclusionMap separately. However, when I apply the AO map and adjust the intensity, the whole material gets darker - no visible shadow map. What am I missing? Any ideas?
<a-entity obj-model="obj:#brick_walls-obj" material="src: #brick_walls_tiled_T; repeat: 10 10; ambientOcclusionMap: #brick_walls_shadow; ambientOcclusionMapIntensity: 0.5"></a-entity>
For example - http://codepen.io/MannyMeadows/pen/KWZWvY

Answer 1

The material component doesn't tend to work with custom models. What you can do, though, is create a component that makes whatever changes you need directly to the THREE.Material object.
AFRAME.registerComponent('material-map', {
schema: {
map: {default: ''},
uri: {default: ''}
},
init: function () {
this.textureLoader = new THREE.TextureLoader();
this.modify();
this.el.addEventListener('model-loaded', this.modify.bind(this));
},
modify: function () {
const textureLoader = this.textureLoader;
const mesh = this.el.getObject3D('mesh');
const data = this.data;
if (!mesh) return;
mesh.traverse(function(node) {
if (node.material) {
switch (data.map) {
case 'emissiveMap':
node.material.emissive = node.material.color.clone();
node.material.emissiveMap = textureLoader.load(data.uri);
break;
default:
node.material[data.map] = textureLoader.load(data.uri);
}
node.material.needsUpdate = true;
}
});
}
});
Usage:
<a-entity obj-model="obj: foo.obj; mtl: foo.mtl"
material-map="map: aoMap; uri: foo_ao.png">
</a-entity>
NOTE: Your original code also looks correct to me, so I'm not 100% sure why it isn't working... This is something I've done in similar cases, though, so maybe it will work.