mnp1208/viewer-javascript-tutorial

A quickstart tutorial demonstrating how to set up a Node.js server and client-side JavaScript code to display and interact with a 3D model using the Autodesk Viewer & Model Derivative API

Autodesk Forge Viewer – Getting Started Tutorial

• Introduction

  • Audience
  • What do you need for your project?
  • What are you going to achieve in this workshop?

• Prerequisites

  • Familiar with git?
  • Install Node.js
  • Install a code editor
  • Get the sources

• Chapter 1 – Get ready with the Model Derivative API

  • Create an App
  • Prepare a model
  • Create your web server

• Chapter 2 – (Optional) Extend your web server to support upload/translation

  • Choose your option
  • Translating from the client
  • Translating from the server

• Chapter 3 – Customize the Viewer Behavior

  • Step 1 – Creating a basic extension
  • Step 2 – Reference the extension script
  • Step 3 – Load the extension in the viewer
  • Step 4 – Testing the extension
  • Step 5 – Adding a selection handler
  • Step 6 – Displaying a panel
  • Step 7 (Bonus step) – Moving the camera
  • Even more bonus steps

• Appendix A – More sample and demos

• Appendix B – Review of the node.js code

• Appendix C – Deploy on the web with Heroku

• Appendix D – Automatic deployment on the web with Heroku

• Appendix E – Troubleshooting

Audience

This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. You should also be familiar with the Autodesk Viewer and Model Derivative technology from a user's point of view. You can play with the technology here – simply Drag 'n Drop a 2D/3D file, and enjoy the result in your browser with no extension or plug-in installed on your computer or device.

This conceptual documentation is designed to let you quickly start exploring and developing applications with the Autodesk Viewer and Model Derivative API.

What do you need for your project?

The Autodesk Viewer and Model Derivative API web service consists of two APIs. The first API (Model Derivative API) is a REST API which enables users to represent and share their designs in different formats, as well as extract valuable metadata. The Second API (Viewer) – is a WebGL-based, JavaScript library for 3D and 2D model rendering. 3D and 2D model data may come from a wide array of applications, such as AutoCAD, Fusion 360, Revit, and many more.

Depending on your needs, you may prefer to write a server or a desktop application to consume the REST API. Your choice will be mainly based on how many files you need to translate, and the frequency:

• If you need to translate only one (or very few) of your own models to be viewed by other people, then you may prefer to use a desktop application to do this, or one of our demo pages.

• If you need to translate multiple models in a batch process or allow other users to upload their own files, then a web server implementation will be needed.

Later in this workshop, you will need to decide which routes you want to go with depending on your needs.

What are you going to achieve in this workshop?

When you finish the workshop you will be able to:

• Create a dynamic application that works in all modern browsers.
• View 2D/3D models in a browser or device without plug-in or additional software.
• Create and run Node.js application .
• Extend Autodesk WEBGL viewer to interact with the 2D/3D models.
• Identify resources for learning more about the Autodesk Viewer and Model Derivative API.

The tutorial guides you through the entire process of building a simple application, including writing and running viewer extensions. Experiments at the end of each step provide suggestions for you to learn more about the Autodesk View & Data API and the application you are building.

========================= Start