Advanced usage of A360 View and Data API
On Oct 9th 2015, the conference called Autodesk University Japan was held in Tokyo, and Akatuka-san who is working for Mozilla japan and I gave a talk about WoT using A360 View-and-Data-API, which is a Web service by Autodesk.
First of all, I’m gonna explain what View and Data API is. Literally, it consists of 2 features, the temporary file storage and the viewer.
The storage accepts several 3D model file formats, such as CAD format, STL, DXF, OBJ, 3DS, DAE and many others. Then it hosts them.
The viewer can show 3D file which is hosted in the storage. The viewer was built on top of three.js and WebGL, done with 100% web standards technology, and no need any plugins.
Additionally, the storage and viewer are connected through WebSocket which is kinda secure streaming connection. Thanks to the connection, it is possible to show a high-poly 3D model, even under internet connection, and the original model file data can be hidden.
TL;DR, I’ve made a short video and you can just watch it! Most blog posts about the API by Autodesk people are working with Windows, but this time, I will do on Mac book. I hope this could be helpful for you.
Start from View and Data API Beta - Quick Start Guide. Example code is available on github https://github.com/yomotsu/get-started-with-a360-view-api
At that demo what I made for the conference, I added an animation feature which was supposed to sync with a physical clock device. Unfortunately it was not perfect at that time tho. Anyway applying basic animations is possible under the View API version 1.2.16.
Basically, View API is a viewer for high poly 3D models, and not for interactive projects so far I think. However you can handle animations with basic transforms, such as translate, rotate and scale, via three.js way but quite different. To do so, I’m gonna share some tips.
If you would like to apply an animation or even just a transform, your app has to wait for load to complete. To detect the timing, there is an event, called
Use FragProxy feature to get kinda ghost of an actual mesh. Then apply transforms, and update it.
Similar to translate, but a little bit complicated. Because the viewer does not support local coords, and you have to use world coords instead. Plus fragProxy only accepts quaternion to rotate. When you would like to rotate a mesh in the model, follow the steps below.
The model is assumed to contain some meshes,
- Before upload the model to the storage, align all parts (meshes) to center of the bounding box which contain all the model, using your 3D modeler software. Because when the model is loaded into the viewer, the center of the bounding box will be the origin of the world coords. The would X, Y, Z axises will be the axis of rotation.
- And then, after loaded the entire model, just re-arrange each parts to the original position.
- If you would like to apply rotate animation, follow the steps
- Rotate a mesh using quaternion.
- Then move position to whatever you want to place.
e.g. to rotate 60 deg,
Just render every frame like three.js way after you applied transform with above tips.
After you make a viewer instance, set container size immediately.
Set container size and then, execute resize() method.
At the end, I will attach the code for the demo. This is not connected to the clock device and works as a stand alone with animations.
Actually, the code is very similar to the curl command what you saw at the first step, then this will return a token in JSON.