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.
|buffer||Whether to load the geometry as a BufferGeometry (versus Geometry). Set to
|part||Name of the part to look for specified in the glTF file as
|src||Path to the glTF file (or selector to
|resetPosition||copies the gltf translation to the a-frame element and resets the gltf translation||false|
Center the child geometry of the current entity's object3d.
|bottomAlign||Whether to align the bottom of the centered mesh geometry with the ground or floor level (at
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|
||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|
For each example, press
<ctrl> + <alt> + <i> once scene is loaded to inspect individual gltf-part entities as a "manual test".
Install and use by directly including the browser files:
My A-Frame Scene
Install via npm:
npm install aframe-gltf-helpers
Then require and use.
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-pluscomponent 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.glbto optimize and compress
- Or use meshopt gltfpack without such as
gltfpack -kn -i ./scenesmall3.gltf -o buildings-gltfpack-kn.glband serve with a web host that automatically gzip compresses (not github pages at the moment)
I'd like to add:
- ability to support meshopt gltfpack with -c option, similar in spirit to draco support
- automated testing for each example