Have ideas to improve npm?Join in the discussion! »

    aframe-gltf-helpers

    0.0.3 • Public • Published

    aframe-gltf-helpers

    Version License

    A-Frame glTF Helper Components

    gltf-part-plus component adds a few features to the original gltf-part component made by @ngokevin, namely: draco compression and ability to extract gltf translation to the A-Frame scene graph. Note: to enable draco decompression, refer to A-Frame instructions here, also shown in examples 3 and 4 below.

    model-center component centers the geometry of a mesh loaded from gltf-part-plus with an option to bottom align at ground level, useful for buildings, trees, etc.

    These are part of an experimental glTF workflow for handling assets related to Streetmix3D. See below for more info on the full workflow.

    API

    gltf-part-plus

    Property Description Default Value
    buffer Whether to load the geometry as a BufferGeometry (versus Geometry). Set to false if we need access to vertices, faces, UVs, etc. true
    part Name of the part to look for specified in the glTF file as name="<NAME>". ''
    src Path to the glTF file (or selector to <a-asset-item>). ''
    resetPosition copies the gltf translation to the a-frame element and resets the gltf translation false

    model-center

    Center the child geometry of the current entity's object3d.

    Property Description Default Value
    bottomAlign Whether to align the bottom of the centered mesh geometry with the ground or floor level (at y=0), useful for buildings, trees or other set dressings false

    anisotropy

    Traverse through materials in a glTF model to set anisotropic filtering value. This component only accepts one optional number value.

    Attribute Type Description Default Value
    number Desired anisotropy value for all texture maps found while traversing the model. Setting to 0 (default) will set the value to the maximum value supported by hardware. 0

    Examples

    For each example, press <ctrl> + <alt> + <i> once scene is loaded to inspect individual gltf-part entities as a "manual test".

    CLICK FOR ONLINE EXAMPLES

    Installation

    Browser

    Install and use by directly including the browser files:

    <head>
      <title>My A-Frame Scene</title>
      <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> 
      <script src="https://unpkg.com/aframe-gltf-helpers@0.0.2/dist/aframe-gltf-helpers.min.js"></script> 
    </head>
     
    <body>
      <a-scene>
        <a-entity gltf-part-plus="src: #draco-buildings-model; part: SM3D_Bld_Mixed_Corner_4fl;" model-center anisotropy></a-entity>
      </a-scene>
    </body>

    npm

    Install via npm:

    npm install aframe-gltf-helpers

    Then require and use.

    require('aframe');
    require('aframe-gltf-helpers');

    About the Example Models

    • The cubes.gltf model has 3 cubes translated to arbitrary locations within a few units of 0 0 0 with no rotation. MIT License.
    • The buildings.glb model has 5 buildings with "applied" custom translations applied in Blender, then exported as a glb with draco compression. The buildings are paid models from the Synty Polygon City Pack for use in Streetmix3D and are for testing only. Please purchase a license for $19.99 from them if you use these models in your own projects.
    • Meshopt gltf pack output of the same buildings model as 3 files: gltfpack -kn -i ./scenesmall3.gltf -o buildings-gltfpackkn.glb gltfpack -c -kn -i ./scenesmall3.gltf -o buildings-gltfpackckn.glb gltfpack -cc -kn -i ./scenesmall3.gltf -o buildings-gltfpack-cc-kn.glb
    • New Flyer XD40 Bus Model Credits: New Flyer XD40 Bus |

    About the Workflow

    These are part of an experimental glTF workflow for handling assets related to Streetmix3D.

    The current workflow is roughly:

    • "Main" Blender file for a collection of models that share the same material such as "urban buildings", "suburban buildings", "plants and trees", "vehicles", etc. (Only 1 material keep things simple at first, future support for more.)
    • Export to a gltf with separate bin and image files (some separate gltf files may share the same image, I don't see a need to combine to one glb). Enable Draco mesh compression.
    • Use this repo's gltf-part-plus component to load part from draco compressed file.

    Alternate workflow (not working):

    • Use the Main Blender file to export a gltf without draco compression.
    • Use meshopt gltfpack with compression such as gltfpack -cc -kn -i ./scenesmall3.gltf -o buildings-gltfpack-cc-kn.glb to optimize and compress
    • Or use meshopt gltfpack without such as gltfpack -kn -i ./scenesmall3.gltf -o buildings-gltfpack-kn.glb and serve with a web host that automatically gzip compresses (not github pages at the moment)

    Wishlist

    I'd like to add:

    • ability to support meshopt gltfpack with -c option, similar in spirit to draco support
    • automated testing for each example
    • instancing

    Install

    npm i aframe-gltf-helpers

    DownloadsWeekly Downloads

    8

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    8.15 MB

    Total Files

    46

    Last publish

    Collaborators

    • avatar