GLTF - JPG for 3D Objects in WebVR
Steve Luiting
Digital designer specializing in website design and print work. I do AI Art with MidJourney, ChatGPT. I am currently doing video with Runway AI.
By Steve Luiting - October 29, 2017
In the image above I added a 3D model of our building into a procedurally generated landscape. The landscape is a new component that allows you to add a scene with one line of code in the <scene> code. The component is javascript based.
The GLTF was made by creating the building in Sketchup and exporting it as a .obj and .mtl file. I then created a Sketchfab account and uploaded the model. Sketchfab has a great GLTF converter. So, I set the file to allow download and as I do it asks what type I would like to download and I chose gltf. You can see the example here: https://www.cablecenter.org/vr/gltf/
The file is 15MB in size and yet it loads on a good connection in three to five seconds. I could, in the future, optimize the model. I am considering rebuilding the model in VR using Gravity Sketch, https://youtu.be/XDCmDjs9z5I. I would rebuild it in three parts allowing for three downloads as opposed to one large one.
GLTF is now in version two which allows for animation. This works in A-Frame version 7. If you want to use GLTF 7 and you have an older format you need to load an extension that allows GLTF version one to show up.
So, in the HTML header, I add these components:
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
?<script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
?<script src="https://unpkg.com/[email protected]/dist/aframe-environment-component.min.js"></script>?
Above the <scene> I add the preload of the building:
???<a-assets>
<a-asset-item id="building" src="scene.gltf"></a-asset-item>
???</a-assets>
In the scene I add:
<a-entity gltf-model="#building" position="-50.10 -1 60" scale="0.020 0.020 0.020" rotation="0 0 0"></a-entity>??
For more gltf information: https://aframe.io/docs/0.7.0/components/gltf-model.html#sidebar
The information about the environment component is here:
https://blog.mozvr.com/aframe-environment-component/