How to Build a Web Page for Showcasing 3D Models? Seeking Guidance!

HTML & CSS
1

Hello everyone!

I’ve been working with 3D scanning and printing, and I own a 3D scanner that allows me to scan real objects and generate 3D models. Now, I want to create a web page to showcase and share these models, but I’m not sure where to start. I’d really appreciate some guidance!

Here’s what I’m aiming for:

  1. 3D model viewer – I want users to be able to view models on the webpage, with basic interactions like rotation and zooming.
  2. File format support – My 3D scanner outputs OBJ, STL, and PLY files. I’m unsure which format works best for web visualization.
  3. Tech stack recommendation – I’m a web developer familiar with front-end (HTML, CSS, JavaScript), but I have little experience with 3D web technologies. Should I use Three.js, Babylon.js, or something else?
  4. Model management – In the future, I might upload multiple models. Would I need a simple backend or CMS to manage them?

Has anyone worked on a similar project? I’d love to hear your suggestions on best practices, potential challenges, and recommended resources or open-source projects.

Thanks in advance for your help!

2

Reading your post, two well established sites that immediately spring to mind are turbosquid and cgtrader. I have used these sites numerous times over the years to purchase models.

They don’t appear to offer any sort of 3d viewer for their models though, and I do wonder whether there is a good reason for that. At best they offer 360s on the y axis or youtube videos.

There is threejs, but these do appear to be low-poly models. You can see quite a nice example here https://camera-webgi.vercel.app/

With regards the 360 y-rotation I did experiment with something similar some years ago using JS and a sprite sheet I made. Basically the sprite sheet is a background image and it’s position is shifted to the next frame

Note: drag cursor on image
https://codepen.io/rpg2019/pen/WNxemde

The sprite sheet looked like this

gamez-gear-sprite-360
gamez-gear-sprite-3601920×384 99.3 KB

With hindsight I am sure I could have made life easier for myself using one horizontal strip.

There may well be newer and better methods to achieve your goal, but just sharing my experience :slight_smile:

1 Like