Live example here.
In this tutorial we will explore Viewer's navigation, clipping and hiding. This should be enough to enable user to inspect the building inside out with all the zooming, panning, orbiting and hiding of possible obstacles. You can see full live example here.
You will often need to focus on a specific element. The easiest option is just to call
<div class="viewer-control"> Zoom to: <button onclick="if (viewer) viewer.zoomTo(pickedId)">Picked element</button> <button onclick="if (viewer) viewer.zoomTo()">Full extent</button> </div>
It is always important to be able to show default axis aligned views to the model or it's parts. This is built-in
functionality of the
<button onclick="if (viewer) viewer.show('front');">Front</button> <button onclick="if (viewer) viewer.show('back');">Back</button> <button onclick="if (viewer) viewer.show('top');">Top</button> <button onclick="if (viewer) viewer.show('bottom');">Bottom</button> <button onclick="if (viewer) viewer.show('left');">Left</button> <button onclick="if (viewer) viewer.show('right');">Right</button>
Since the first tutorial we were only using default navigation features of the viewer which are orbiting on left mouse button, panning on middle (or right) button and zooming on scroll button. This should be intuitive. Just note that the best practise for the viewer is to have it on a single page with no vertical scroll bar. Zooming is hard otherwise because it zooms the model and scrolls the site at the same time. It is possible to change the default behavior of the left button with the following code should you wish to do that:
<button onclick="if (viewer) viewer.navigationMode = 'orbit';">Orbit</button> <button onclick="if (viewer) viewer.navigationMode = 'free-orbit';">Free orbit</button> <button onclick="if (viewer) viewer.navigationMode = 'pan';">Pan</button> <button onclick="if (viewer) viewer.navigationMode = 'zoom';">Zoom</button> <button onclick="if (viewer) viewer.navigationMode = 'none';">Disable default navigation completely</button>
Default orbit mode is fixed orbit when model rotates around it's Z axis. You can also use free orbit which rotates model around actual axes and is therefore more free. You can use this to have a look on the model from unusual angles.
You can also disable the default navigation completely as you can see on the last line of the example and implement different navigation yourself.
It happens quite often that user wants to see something deep inside the building. Navigation inside of the building might
get complicated quite easily but if you can cut the building and see inside it makes user's life much easier. This is also built in
the viewer by default. You can set the clipping plane with
clip() method if you
pass point on the plane and normal of the plane. There is also a plugin which makes it possible to define the free clipping plane interactively.
unclip() method to discard any clipping entirely.
Right, so we can clip the model and see it's internals. That's impressive isn't it? But sometimes you also need
to hide only one element or one type of elements, let's say all walls. This is possible by setting state of the
setState() method. Use
to reset all states to default. This method has an optional parameter which you can use to also show spaces. These
are hidden by default unless you show them manualy.
You have probably noticed there is one more option and that is Highlight. Highlighting is built in core
of the engine and it is very useful if you need to visually highlight or isolate some objects in your model.
It is particularly useful in combination with x-ray rendering mode where everything is rendered in semitransparent
light blue except for the products which has a state State.HIGHLIGHTED or State.XRAYVISIBLE. To switch
between normal and x-ray rendering mode just set
renderingMode property of the
And this is the end of this tutorial. I bet you have lots of ideas how to create slick user interface to make use of all these features. So, go on. If you still have a stamina to learn something more you can also have a look on the next tutorial called Colourful building which will rescribe restyling of the model which you can use to visualize results of the analyses as well as just for fun.