aframe glTF cube-env-map

Question

I'm unable to see any reflexion on my gtLF model using "cube-env-map". I'd like to get something like this : helmet from threejs.org examples I don't know if this is because of the .jpg files I use, or html or linked javascript scripts, or... anything else? Here's my html :

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script><!-- Master file for aframe (== a-scene) -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script><!-- webcam/mobilecam --> 
    <script src="https://mkwy.fr/js/play-all-model-animations.js"></script><!-- animation -->
    <script src="https://mkwy.fr/js/aframe-orbit-controls.min.js"></script><!-- orbit cam around target -->
    <script src="https://mkwy.fr/js/aframe-extras.js"></script><!-- cub-env-map -->
  </head>
  <body>
<a-scene vr-mode-ui="enabled: false" embedded>
     <a-assets>
     <a-asset-item id="toy" src="https://mkwy.fr/assets/toyDrummerSolo.glb"></a-asset-item>
     </a-assets>
     <a-entity 
        gltf-model="#toy"
        cube-env-map="path: https://mkwy.fr/assets/cube-env/; extension: jpg; reflectivity: 0.9;" 
        play-all-model-animations >
     </a-entity>
      <a-entity camera look-controls  orbit-controls="target: 0 1 0; minDistance: 0.5; maxDistance: 60; initialPosition: 0 5 5"></a-entity>
</a-scene>
</body>
</html>

Many thanks in advance for your help,

Huge +1 for this. That helmet demo looks as shiny as it does because of the use of something called an HDRI, a "High Dynamic Range Image" used as both the lighting environment and reflection environment. I don't know if a-frame supports setting an HDRI, but it's needed for models like this. — emackey
console says : three.js:18036 THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter. — Éric Loillieux
I've tried reproducing the issue. Other than an old a-frame (0.8.0 vs 1.0.4), I've noticed that Your model could use some roughness/metalness tweaking - as I've described in my answer — Piotr Adam Milewski

Piotr Adam Milewski Piotr Adam Milewski · Accepted Answer · 2020-11-19T23:29:05

(Assuming there are no console errors suggesting incorrect cubemap paths, or wrong extensions)

If your model looks like this:

And you want it to be more like this:

Then the answer lies in two factors - metalness, and roughness.

roughness determines whether the material is like a mirror (0), or completely diffuses the reflection (1).
metalness determines whether the material is metallic (1), or not (0).

You can deal with this in at least two ways:

Modify the materials in a modelling software like blender, or maya.
Modify the properties within an a-frame custom component.

A component would have to wait until the model is loaded, and change all (or some selected) model nodes. Like this:

AFRAME.registerComponent("foo", {
  init: function() {
    // wait until the model is loaded
    this.el.addEventListener("model-loaded", e => {
      // grab the mesh
      let mesh = this.el.getObject3D("mesh");
      mesh.traverse(node => {
        // ignore nodes without materials
        if (!node.material) return;
        // assign the values.
        node.material.metalness = 1;
        node.material.roughness = 0;
      })
    })
  }
})

You can check it out in this example.

The helmet is working with both jpg and png maps. As for arjs, if your model will be glitchy, and you'll experience z-fighting, just set the logarithmicDepthBuffer in the renderer:

<a-scene renderer="logarithmicDepthBuffer: true" embedded arjs>

Example here .Seems to be working as expected:

aframe glTF cube-env-map

2 Answers