How to embed a 3D model on a website?
Hi, if you want to show an archiviz 3D model on a website what tools would you recommend? I am not looking for an *.ifc viewer rather I need to achieve some decent level of photorealism (model produced in blender); just some basic features like rotating and zooming the 3D model.
So far I have found https://threejs.org/, it looks promising. I also know about sketchfab and unreal engine but they are not open source. Would you recommend other tools or do you have experience with three.js?
Comments
Verge 3D is a more WYSIWYG alternative to Three.js https://www.soft8soft.com/verge3d
There are payed and free licenses, depending on what you mean to publish, and can be self hosted.
The Blender addon part at least is open source, the rest I'm not sure
There is a great search engine you can use when looking for OS alternatives. https://alternativeto.net/software/sketchfab/?license=opensource
I you search something straightforward, I would definitely recommand Speckle. But not sure they support textures yet.
three.js is a library so you will need some javascript code. You could export as gltf and use a hdri.
I've done a video here :
Three.js it has become a reference, That Open, Speckle or Giro 3D are built on it.
Giro 3D has a more direct interface called Piero, you could also test it. It is more Survey/GIS oriented but you can import a gltf too.
Nope.
There is a demand but I do not think Textures have that much priority.
The other problem is App priority. Blender is pretty low on the list, not much updates lately.
https://www.babylonjs.com/
A couple of years ago, I had some easy success with exporting a glb/gltf from Blender, and using Google's https://modelviewer.dev/ code. It was very simple, and just a few lines of code. It's not full feature but gives basic functionality; rotate, zoom etc. and handles colours, textures.
Upload a glb into the accompanying editor https://modelviewer.dev/editor/ and there are a handful of settings to experiment with. Exporting glb/gltf from Blender also has a range of settings to improve results.
It's light enough to run from the web site server, but I found it much faster to load (a second or two) when hosting the .glb on a CDN (I used https://bunny.net/ which was cheap and good). There's a nice facility to use a static image of the model while the .glb loads, so the end user gets a seamless experience.
I've just had a quick play with https://modelviewer.dev/ and they've recently updated it. Ironically, I couldn't upload a glb in Chrome but could in Firefox.
Here's an early development version of the site I was using it on (the project got binned shortly after) https://xtec-jopro67.pythonanywhere.com/ the main 3D (a chemical tank) is loaded from a CDN, other items are loaded from sketchfab. Looking at the tank, after 2 years, I've got to say the tank looks amazing, nice one Blender ;)