Import SketchUp model in a website and react to click events



I need to create a 3d model for a vessel container. A reefer vessel container exists of around 1400 parts. So it is very difficult to know these all by hart. So we would create some 3d models of these different vessel containers, with clickable areas. This program is for repairing such vessel containers.
So i would like to create a 3D model with clickable areas. Then when the user clicks on a part in the 3d model, i would like to catch this clickable event in my web browser. Then i know which part of the vessel container must be repaired.

2 question:

  • Can i show a 3d model on a website? I think you can export to html and javascript. But where can i find more info and a good example.
  • How can i communicate with this 3d model. Get the click event in my web program of the 3 d model? Also where can i find a good example to do this in Javascript?


Yes! You can upload your completed model to 3D Warehouse where people can view or download it. You can also embed it into your website.

Check out this blog post about SeaTech (a port logistics company) and see if there are any similarities.

Can you describe what you mean by a reefer vessel container? There may already be 3D models of one on 3D Warehouse: I would do a search here.

To make things interactive I recommend:

  1. Use SketchUp scenes
  2. Embed your 3D model on a website so it is clickable, zoomable
  3. Create Dynamic components in your model

I hope this helps and gets you started on the right track!




Thanks For your mail

I can now see a model of a vessel container in my website.
But the second (not easy part) is not clear for me.

When i click on a part of the Vessel container i want it to turn red and i want to do something in my website when a specific part is clicked . For instance get the part price in the database and show it in the website. Is this possible with sketchup?

Thanks You



I found now how i can click on a part and that it turns red. Red means selected. I did this with dynamic components and in the component attributes i have added a function SET(“Material”,“base”,“Red”). I publish this via 3d warehouse on my website. But now i want to read the published 3d model to see which components are red (are selected)? IS this possible with javascript?

Thank you