Search code examples
aframe

In an A-Frame scene, how to make models from Sketchfab appear with correct size and color?

I'm trying to do something very basic with a-frame & gltf/glb models, basically want to drop a few models into a scene.

I started with A-Frame's "Hello WebVR" and just tried to add one model from Sketchfab, but every time I manage to make it work...:

  1. The model is huge. Like 100x or 1000x of its "correct" size.
  2. The model is completely dark.

I think I missing some basic understanding in setting up models in a scene.

How could I make models appear correctly, meaning correct size and color?

Here's one of my tries: https://glitch.com/edit/#!/spicy-pretty-singer, just walk back (WASD) A LOT.

If unfamiliar with Glitch: you can see the result by clicking on "Show" at the top, and you can click "remix" (fork) to change the code.

Sample model from Sketchfab (I tried several, same results).

Thanks!

Solution

  • 1) Size

    The "correct" size is quite is quite a subjective term - if you load the model into a modelling software, lets say blender, then You can check out the original (intented if the converted didn't mess up scaling) dimensions:

    enter image description here

    It is huge - like 250m x 70m x 90m huge. Keep in mind - in a-frame 1 unit equals one meter.

    You can either change it in blender (maya), or just scale the entity:

    <a-entity gltf-model="#model" scale="0.01 0.01 0.01"></a-entity>

    2) Dimmed textures

    When in doubt always double check the model with Don McCurdys gltf model viewer!.

    The sofa looks surprisingly good, but there is a catch!

    If the encodings (model texture encoding, and renderer output encoding) and lights are matched with the scene, the sofa goes dark:

    enter image description here

    If I change the output encoding to sRGB: enter image description here

    It looks already better. The output encoding is set by the renderers colorManagement (source code)

    With <a-scene renderer="colorManagement: true"> it looks like in the viewer:

    enter image description here

    Turning the texture encoding to linear also makes it brighter. To change it in the gltf-model - as far as i know - will require a bit of javascript:

    // wait until the model is loaded
entity.addEventListener("model-loaded", e => {
  // grab the mesh
  const mesh = entity.getObject3D("mesh");
  mesh.traverse(node => {
    // grab the material and change the encoding
    if (!node.material) return;
    node.material.map.encoding = THREE.LinearEncoding
  })
})

    Here's the scene: enter image description here

    glitch here