.. HTML5-3dmodel-viewer documentation master file, created by sphinx-quickstart on Fri Oct 10 22:47:15 2025. You can adapt this file completely to your liking, but it should at least contain the root `toctree` directive. 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 ---------------- * :ref:`gltf-format-reference` * :ref:`gltf-export-reference` * :ref:`ui-navigation-reference` * :ref:`scene-import-reference` * :ref:`scene-parameters-reference` * :ref:`project-export-reference` * :ref:`contribution-reference` .. _gltf-format-reference: glTF 2.0 format ================== External links ----------------- `glTF-Tutorials`_ `glTF-Extensions`_ .. _glTF-Tutorials: https://github.com/KhronosGroup/glTF-Tutorials/tree/main/gltfTutorial .. _glTF-Extensions: https://github.com/KhronosGroup/glTF/tree/main/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, ...) * ... .. _gltf-export-reference: 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)``. .. _export scenes as glTF 2.0: https://docs.blender.org/manual/en/4.5/addons/import_export/scene_gltf2.html 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. .. _on a set of constraints: https://docs.blender.org/manual/en/4.5/addons/import_export/scene_gltf2.html#exported-materials 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. .. _ui-navigation-reference: 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. .. _scene-import-reference: 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-reference: 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. Navigation parameters -------------------------- Not implemented yet. Center Pivot ^^^^^^^^^^^^^^ Orbital navigation around the center-point of the scene. Can zoom with the scroll-wheel and rotate by holding the left mouse button and moving the mouse. 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 :ref:`gltf-export-reference`. 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-reference: 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. .. _contribution-reference: Contribute =========== The best way for you to contribute is to `give feedback`_. .. _give feedback: https://turboseb.itch.io/3d-scene-viewer/comments .. toctree:: :maxdepth: 2 :caption: Contents: