- Introduction
- Step 1 – Displaying a simple model
- Step 2 – Implementing a basic extension
- Step 3 – Adding a selection handler
- Step 4 – Displaying a panel
- Step 5 (Bonus step) – Moving the camera
- Step 6 – Conclusion and next steps
This tutorial is intended to get you started with the View & Data API – which is a zero-client, WebGL viewer capable of displaying 2D and 3D designs on your webpage.
The tutorial is for people familiar with JavaScript programming and object-oriented programming concepts. You should also be familiar with the Autodesk View & Data technology from a user's point of view. You can play with the technology here – simply Drag and Drop a 2D/3D file, and enjoy the result in your browser with no extension or plug-in installed on your computer or device. Or if you don't have a design file of your own, take a quick look at the live demo on our github.io page.
This tutorial focuses on the View & Data client-side API and uses a local 3D model (included with thie tutorial download). If you prefer to focus on the server-side APIs (accessing files stored on the Autodesk server or uploading and translating your own files), then we recommend you start with this tutorial instead.
(Note – To display a model in the viewer, the original file format it came in must be translated to a special format (based on JSON). Most of the server-side APIs are for creating that translation).
To work through this tutorial, you will need the following:
-
A WebGL-enabled browser.
- For example, Chrome, Firefox, Safari, IE11/Edge.
-
Your favorite JavaScript editor.
- If you don't already have a favorite, you might try Brackets (because its free). Or you can just use a text editor.
-
Your favourite local webserver.
- You need this because the tutorial webpages use resources from external files. If you open the webpage as a file, a security exception will be triggered due to your browser's "same origin policy". The free version of the Mongoose server is pretty much as easy as it gets. (This tutorial assumes you'll be using Mongoose, but its not required).
- Server-side programming.
- This tutorial is intended for people who are excited by client-side programming and view server-side programming as a necessary evil. Although you need to run your webpage from a local webserver, you don't need to know anything about server-side programming to complete this tutorial.
- If you want to dive straight into the server-side APIs, then work through this tutorial instead. As you progress to more complex applications (beyond this tutorial), you will eventually need to implement some server-side code.
- GitHub commands.
- You don't need to understand how to use GitHub – except how to click through this readme and tutorial steps and how to download a zip file (hint – there's a button on GitHub that says 'Download ZIP'). Unlike some of our other tutorials, this tutorial doesn't make use of GitHub commands that you have to run in your terminal/command console. The tutorial steps are all separated into folders – if you don't want to write the code as you go along just launch the index.html file in the root tutorial folder and click on the link to the step you're working on.
- Terminal/Command Console.
- The Mac Unix Terminal is a fantastic tool. But we're not going to use it.
When you finish this tutorial you will be able to:
- Create a dynamic 3D-enabled web application that works in all modern browsers.
- View 2D/3D models in a browser or mobile device without plug-ins or additional software.
- Extend the View & Data API WebGL viewer to interact with the 2D/3D models.
- Identify resources for learning more about the Autodesk View & Data API.
The tutorial guides you through the entire process of building a simple application, including writing and running viewer extensions.
========================= Step 1