-
Notifications
You must be signed in to change notification settings - Fork 31
How To Customize
If Spectacles is indeed a 'hackable BIM viewer for the web', then this page should show you how to get hacking.
One of the main goals of the project is to provide a viewer that is easy to build on top of so that AEC hackers can design user experiences that make sense to their specific design problems. We'll demonstrate below how to move along the Spectacles customization spectrum - from basic viewer embedding and existing UI customization, to modifying how parts of the existing Spectacles Viewer work, and finally to developing an application that adds new functionality on top of Spectacles.
If you didn't see them in the readme, we have a number of examples in this repo that demonstrate how to embed a Spectacles Viewer in another page. Here's the list again - have a look if you'd like:
- #1 - No User Interface
- #2 - Multiple Viewers
- #3 - Scene and Lighting UI
- #4 - Layers UI
- #5 - View and Selection UI
- #6 - Mash up Spectacles.json and .Obj/.Mtl
Let's take a closer look at example #1, starting with the index.html file's header.
<!-- Various libraries that Spectacles depends upon. All of these are stored in the /js/libs directory in this site -->
<script type="text/javascript" src="../../js/libs/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../../js/libs/dat.gui.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/datgui_styleOverride.css">
<script type="text/javascript" src="../../js/libs/three.js"></script>
<script type="text/javascript" src="../../js/libs/OrbitControls.js"></script>
<script type="text/javascript" src="../../js/libs/Projector.js"></script>
<script type="text/javascript" src="../../js/libs/stats.js"></script>
<script type="text/javascript" src="../../js/libs/jquery-ui.js"></script>
<!-- Application files -->
<link rel='stylesheet' type='text/css' href='css/960.css'> <!-- grid layouts -->
<link rel='stylesheet' type='text/css' href='../../css/SPECTACLES.css'/> <!-- the Spectacles stylesheet -->
<script type="text/javascript" src="../../js/SPECTACLES.js"></script> <!-- the Spectacles library -->
<script type="text/javascript" src="js/APP_INIT.js"></script> <!-- the file that starts our app - contains the jquery.ready() function. -->
First, in the 'Various libraries' block, we load a bunch of javascript libraries and stylesheets that SPECTACLES.js relies upon - jQuery, three.js and the like.
Then, in the 'Application files' we load all of the Spectacles-specific styles, SPECTACLES.js, and finally APP_INIT.js. We'll come back to APP_INIT.js in a second, but first let's look at some of index.html's body code:
<body>
<div class="container_12">
<div class="grid_12">
<h1>Spectacles Embed Example 1 --- No User Interface</h1>
<p>In this example we'll load a single model in a dedicated div, and strip away all Spectacles UI. This example should demonstrate how to embed a 3D model viewer in another web page that has it's own formatting.</p>
</div>
<div class="clear"></div>
<div class="grid_12" id="Spectacles_output" style="height: 600px"></div>
<div class="clear"></div>
Take note of the div with the 'Spectacles_output' id - this is the element we'll bind the Spectacles Viewer to. This div should be empty, and just needs that ID. When Spectacles binds to it, it will create a canvas in this div, and append a few other elements (blackout, loading, stats, etc).
Now, let's have a look at the code in the APP_INIT.js file:
$(document).ready(function(){
//load our sample JSON file
$.getJSON("./js/Spectacles.json", function( data ){
//once loaded, initialize a Spectacles viewer by passing in the div to bind to, the json data,
//and a callback function where we can enable application functionality in nice clean chunks
mySpectacles = new SPECTACLES($("#Spectacles_output"), data, function(app){
//call the UI / functionality modules
app.setBackgroundColor(0xFFFFFF);
//app.userInterface();
//app.openLocalFiles();
//app.sceneUI();
//app.lightingUI();
//app.viewAndSelectionUI();
//app.viewsUI();
//app.layersUI();
});
});
});
Once everything in the html file has downloaded and loaded, the jquery .ready() function is fired. First we parse our Spectacles.json file, and get access to the parsed JSON data in the first callback function. Then we call the SPECTACLES constructor, passing the div to bind to as the first argument (this is we reference the div in the html document with the Spectacles_output id), and the json data as the second.
The third argument is a callback function which is called once Spectacles is up and running. This is where you can enable UI layers, and do things like set the background color. In this case we are just setting the background color - all of the commented out code shows how to enable UI layers.
That's it! Check out the other samples to see how to add UI as needed.
Write me!
Write me!