HTML5-3dmodel-viewer documentation

The 3D Scene Viewer Maker generates a web visualisation program from imported 3D files. Import your scene to generate a web program which can be hosted on sites like itch.io.

Chapters

glTF 2.0 format
Exporting glTF scenes (from 3D programs)
Navigating the interface
Importing your 3D scene
Scene parameters
Project export
Contribute

glTF 2.0 format

External links

glTF-Tutorials glTF-Extensions

Supported data

The glTF format (.glb and .gltf files) supports complex 3D scenes.

Animations
Meshes with normals
Materials
- PBR (Base Color, Metallic, Roughness)
- Textures / Images / Sampler parameters
Cameras
Morph targets (a.k.a. Shape keys)
Skins (Armatures)

glTF Extensions

The glTF format also supports multiple extensions developed by Khronos to include additionnal data.

Punctual lights
Additional material parameters (clearcoat, emission, transmission, …)
…

Exporting glTF scenes (from 3D programs)

From Blender

Blender allows to export scenes as glTF 2.0 under File > Export > glTF 2.0 (.glb/.gltf).

Exporting Meshes

By default, blender exports meshes with all modifiers disabled. If you want to apply them on export, activate Data > Mesh > Apply Modifiers.

Note: The Transform > +Y Up parameter should be active to have your mesh correctly oriented.

Exporting Materials

Blender exports mesh materials based on a set of constraints. It is currently impossible to export complex shaders that don’t respect these constaints. The best way to export a complex shader, as of now, is to bake it into an image texture.

Note: The Data > Material > Materials parameter should be set to Export to have your materials exported.

Exporting Lights

Lights export isn’t enabled by default in blender. To do so, activate Include > Punctual Lights in the export parameters. This option allows to export directional, point and spot lights using the KHR_lights_punctual extension.

Note: The Data > Lighting > Lighting Mode parameter should be set to Standard to have accurate light intensities.

Navigating the interface

The program interface consists of two panels. They can be resized using the handle between the two.

Control panel

The control panel contains all the options to import, export and setup your scene. These options are reset once the program is closed.

3D view

The 3D view shows what’s currently in your scene, and what it will look like after export. The scene initially contains a placeholder mesh. You can navigate in the 3D view by holding the left mouse button over the scene and moving your mouse, and zoom with the scroll-wheel when your mouse is over the 3D view. The 3D view also shows imported lights with icons based on their type (directional, point, spot).

Message Panel

Important informations are printed to the top-right of the window. Allows the user to understand potential errors.

Importing your 3D scene

To import your 3D scene, press Import 3D Scene (.glb/.gltf) and locate your file, or drag-and-drop your file on the window. glTF 2.0 is currently the only supported file format.

Importing an new 3D scene while working on a file will remove the current 3D scene but keep the Scene Parameters.

Scene parameters

The scene parameters allow you to modify your 3D scene before exporting.

Mesh parameters

Parameters applied to all the imported meshes.

Single Color Meshes

Activating this option will replace (non destructively) the material of the imported meshes with a single color. Set the color by giving a Hex (RGB) value. The shaded option defines if the meshes should react to light or not.

Light parameters

Imported Lights Power

Parameters applied to the lights imported in your scene. The imported lights are hinted in the 3D space by icons based on their type (directional, point, spot).

Note: if your scene doesn’t contain lights when it should after exporting to glTF, make sure your 3D program exports using the KHR_lights_punctual, see Exporting glTF scenes (from 3D programs).

Additional sun

Activating this option will add a directional light facing close to the initial camera direction. Set the sun color by giving a Hex (RGB) value. Set the light intensity with the Sun Power parameter.

Note: This option is activated by default to light-up the placeholder mesh.

Environment parameters

Background color

Set the color of the background by giving a Hex (RGB) value.

Note: The background color doesn’t affect lighting.

Ambiant lighting

Set the ambiant light color by giving a Hex (RGB) value. Set the light intensity with the Light Power parameter. The ambiant lighting lights up the scene uniformly.

Project export

Once your parameters are set, press Export Project to package your scene and export the .zip file at the given directory / with the given name. The exported file can directly be hosted online on platform like itch.io.

Note: Some temporary files are created in the .zip file save directory and deleted right after (custom_scene.tscn and custom_scene.pck). In the case these files aren’t deleted automatically, they can be removed without affecting the packaged project.

Contribute

The best way for you to contribute is to give feedback.