Publishing your lit SketchUp model on the Web
The following tutorial shows how to publish your lit model on a website and gives visitors the ability to navigate in realtime with your designs.
OK, you've finished your Sketchup model, you've added lighting using LightUp and you've set up a number "Scenes" that really show off your work. A great feature of LightUp is to ability to export you lit model with all the Scenes and GeoLocation info into a single file (extension '.luca') that can be explored interactively by others without needing SketchUp or LightUp.
You can view .luca files using the standalone Player App, or the LightUp WebPlayer plugins for all major web browser. Using a web browser means you can embed a realtime 3D model in your own pages on your website for other to explore.
Export from SketchUp
Check the menu Tools->LightUp->Loop Scene Animation to choose what kind of behavior you want for Scene animation. Play once and stop, or start again once all Scenes have been shown.
You may have Scenes used for your workflow that you do not wish to export. In this case, open the SketchUp Scene dialog and uncheck "Include in animation" for those Scenes you wish to skip.
The Sketchup default is to include all Scenes in animations.
LightUp tries to honor all your settings when exporting. In particular, you will need to set the Camera Speed for manual navigation. A handy tip is to set the speed to 0.0
if you only want users to look around with the mouse, but not be able to move apart from to the locations you've set up using Scenes.
Other settings to be aware of is GeoLocation, Camera Collision, Gravity and all your Post processing effects such as Bloom, Vignette etc.
Next we need to choose a 'watermark' image that will be shown in the lower right of the window. This can be any image you like; company logo, a message etc. By default it is the LightUp logo.
If the user click on this watermark logo during navigation, a new browser window will open on the URL you've set. The default is the LightUp website, but you can set any URL - so you can create linked pages in this way.
"Autoplay" is normally checked, meaning the player will load your model and start animating your Scenes. You can uncheck this if you wish.
Lastly, if you want to just export Scenes that are marked "Include in animation", you'll need to check the "In Animation" checkbox or you'll be exporting all Scenes.
If you're all ready, go ahead and press the "Player.." button to choose a filename to save your export and proceed to package up your model for publishing.
If you have a LightUp Player installed, you can simply double-click on the .luca file you've exported to check its as you expect and your Scenes are all present. The latest player for Mac and Windows are available here.
Embedding in a webpage
Embedding a .luca file in your webpages with your own content is made simple by using some JavaScript helper functions.
The minimal HTML required is a call to a JavaScript function like this:
So a minimal example would be something like this :
You will notice the example loads the webplayer.js JavaScript function and also some CSS for styling. If you wish to use your own CSS styling, you would of course replace this file.
Click here to try the example code above. (URL is http://light-up.co.uk/resources/tutorials/exporting/test.html)
Web Server configuration
Webservers need to know what sort of media files they are serving to users, so they can treat text files different from HTML files, and JPEG images different from video etc. To do this, every resources has a MIME-type. LightUp .luca files are a new file type, so while not required, it is good practice to configure your webserver by adding a new MIME-type for LightUp.
AddType application/x-lightup luca
Conclusion
Embedding LightUp files in your webpages is simple and offers a great new way of engaging visitors to your site and with the use of linked pages.
Any questions can be posted on the forum or emailed to the LightUp help email address.