Export your 3d models to the web using GLTF format

Useful 3DBrowser feature tips
Post Reply
mootools
Site Admin
Posts: 260
Joined: Thu Jul 05, 2007 11:06 am
Contact:

Export your 3d models to the web using GLTF format

Post by mootools » Sun Jul 04, 2021 12:26 pm

This tutorial explains how to integrate your to content in a web page.

It shows the way to convert some Sketchup file to GLB format.
Sketchup format is interesting because it allows a different material for front and back face, which is not supported by GTLF.

3DBrowser provide some options to handle this case correctly.

Here is the way to proceed :

Sketchup2GLB_1.jpg
Sketchup2GLB_1.jpg (406.71 KiB) Viewed 3776 times
Sketchup2GLB_5.jpg
Sketchup2GLB_5.jpg (301.24 KiB) Viewed 3776 times
Sketchup2GLB_4.jpg
Sketchup2GLB_4.jpg (184.4 KiB) Viewed 3776 times
Sketchup2GLB_3.jpg
Sketchup2GLB_3.jpg (167.99 KiB) Viewed 3776 times
Sketchup2GLB_2.jpg
Sketchup2GLB_2.jpg (145.22 KiB) Viewed 3776 times
Sketchup2GLB_6.jpg
Sketchup2GLB_6.jpg (192.03 KiB) Viewed 3776 times

mootools
Site Admin
Posts: 260
Joined: Thu Jul 05, 2007 11:06 am
Contact:

Re: Export your 3d models to the web using GLTF format

Post by mootools » Sun Jul 04, 2021 12:29 pm

Some of you asked: "but finally how can I integrate the exported asset to my web site?"
Here are some piece of code to proceed in a simple way.
This is the entry point... Then GLTF is a sea and you can dive in it very deeply.

So, here is a link to the most simple HTML page that display a file content:
https://www.mootools.com/files/assets/glbsample.html

You find some equivalent HTML code here:
https://codepen.io/BabylonJS/pen/QxzBPd

and some more advanced sample in this tutorial:
https://babylonjs.medium.com/using-the- ... 1e6af46137

For those who have a WordPress site, there is a plugin that can integrate your 3D asset in your page:
https://forum.babylonjs.com/t/babylon-j ... N-dcseI9wg

Hope this help and will give you some great ideas!

Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests