Viewing a 3D model on a webpage or in a mobile app is really cool, but visualizing design data isn’t just about meshes and textures. In this class Philippe Leefsma of Autodesk will show you how the Forge Model Derivative API and JavaScript viewer give you access to the valuable data associated with each model component that is extracted from the original design file. We will take that a step further and connect those models to an external database to add even richer data. Finally, we will stylize the model to turn a model into a powerful, intuitive reporting tool.

1. VISUAL REPORTS
WITH CONNECTED DATA
/
Forge Partner Development
Philippe Leefsma @F3lipek

2. AGENDA
1. Accessing Design Data
2. UI Customization &
Overrides
3. Connecting External Data
Sources

3. Part I - ACCESSING DESIGN DATA

4. ▴
w v A f ▴
d ▴
o x e C r n i

6. Accessing the APIhtml:
<div id="viewer"> </div>
js:
function load (urn) {
initializationStuff(urn, ..., function(svf) {
var viewerContainer = document.getElementById('viewer')
var viewer = new Autodesk.Viewing.Viewer3D(viewerContainer)
viewer.loadModel(getViewablePath(svf))
// call API's
viewer.setBackgroundColor( ... )

7. VIEWER COMPONENT MODEL
{
name: 'chassis' //display name of the component
dbId: 53 //unique id for the component in the model
fragIds: [38, 39] //reference the three.js meshes
parent: 37 //dbId of the parent node
children: [65, 113, 146] //array of children nodes ids
}

8. MODEL STRUCTURE (1)
function buildModelTree (model) {
var instanceTree = model.getData().instanceTree
var rootId = instanceTree.getRootId()
var rootNode = {
dbId: rootId,
name: instanceTree.getNodeName(rootId)
}
buildModelTreeRec(rootNode)
return rootNode
}

9. MODEL STRUCTURE (2)function buildModelTreeRec (node) {
instanceTree.enumNodeChildren (node.dbId, function (childId) {
node.children = node.children || []
var childNode = {
dbId: childId,
name: instanceTree.getNodeName(childId)
}
node.children.push(childNode)
buildModelTreeRec(childNode)
})
}

10. NODE FRAGMENTS
var instanceTree = model.getData().instanceTree
var fragIds = []
instanceTree.enumNodeFragments(dbId, function (fragId) {
fragIds.push(fragId)
})
MODEL STRUCTURE (3)

11. function buildModelTreeRec (node) {
node.fragIds = []
instanceTree.enumNodeFragments(dbId, function (fragId) {
node.fragIds.push(fragId)
})
instanceTree.enumNodeChildren (node.dbId, function (childId) {
node.children = node.children || []
var childNode = {
dbId: childId,
name: instanceTree.getNodeName(childId)
}
COMPONENT PROPERTIES

12. model.getProperties(dbId, function(result) {
if (result.properties){
result.properties.forEach( function (prop) {
console.log(prop)
})
}
}

14. Part II - UI CUSTOMIZATION
& OVERRIDES

15. 2D OVERLAYS

16. Docking Panel
class CustomPanel extends Autodesk.Viewing.UI.DockingPanel {
constructor(container, title, options = {}) {
super(container, panelId, title, options)
this.container.appendChild(...)
}
}

17. Property Panel
class CustomPropertyPanel extends Autodesk.Viewing.UI.ViewerPropertyPanel {
constructor(viewer) {
super(viewer)
}
setProperties (properties) {
properties.push({ ... custom property ... })
super.setProperties(properties)
}
}

18. ▴
w v A f ▴
d ▴
o x e C r n i  

19. FRAGMENT OVERRIDES
Material//current model
var model = viewer.model
//create custom material
var material = new THREE.MeshPhongMaterial({
color: '#F43BC1'
//... other properties
})
//set material on specific fragId
model.getFragmentList().setMaterial(
fragId, material)
//force viewer to update scene
viewer.impl.invalidate(true)

20. Overlay//access render proxy
var renderProxy = viewer.impl.getRenderProxy(
model, fragId)
//clone geometry
var meshProxy = new THREE.Mesh(
renderProxy.geometry)
meshProxy.matrix.copy(
renderProxy.matrixWorld)
//create 3d overlay
viewer.impl.addOverlay(
materialName, meshProxy)
// force update
viewer.impl.invalidate(true)

21. Transform// access fragment proxy i.e. THREE.Mesh
var fragProxy = viewer.impl.getFragmentProxy(
model, fragId)
fragProxy.getAnimTransform()
fragProxy.position = new THREE.Vector3(x, y, z)
//Not a standard three.js quaternion
fragProxy.quaternion._x = qx;
fragProxy.quaternion._y = qy;
fragProxy.quaternion._z = qz;
fragProxy.quaternion._w = qw;
fragProxy.updateAnimTransform()
viewer.impl.invalidate(true)

22. PLAYING WITH SVG
(source: Mozilla Developer Network)
Scalable Vector Graphics (SVG) is an XML-based markup
language for describing two-dimensional vector graphics.
SVG is essentially to graphics what HTML is to text.

24. PERCENT: 65
RUN
65%
R:
G:
B:

25. ▴
w v A f ▴
d ▴
o x e C r n i   

26. Coordinates Conversion
2D > 3Dfunction screenToWorld (screenPoint) {
var viewport = viewer.navigation.getScreenViewport()
var n = {
x: (screenPoint.x - viewport.left) / viewport.width,
y: (screenPoint.y - viewport.top) / viewport.height
}
var worldPoint = viewer.utilities.getHitPoint(n.x, n.y)
return worldPoint
}

27. 3D > 2D
function worldToScreen(worldPoint) {
var p = new THREE.Vector4()
p.x = worldPoint.x
p.y = worldPoint.y
p.z = worldPoint.z
p.w = 1
var camera = viewer.navigation.getCamera()
p.applyMatrix4(camera.matrixWorldInverse)
p.applyMatrix4(camera.projectionMatrix)
var screenPoint = viewer.impl.viewportToClient(p.x, p.y)
//snap pixel centre
screenPoint.x = Math.floor(screenPoint.x) + 0.5

28. 3D OVERLAYS

29. Simulation Gallery
Search and copy from number of ready‐to‐use simula on.
Search simulation 
281 Views
External ow simulation in township planning
Wind is an important environmental factor that influences comfort & safety. This
simula on es mated air flow pa ern around a highrise structure of the city.
54 Likes  221 Views
Stop valve with a bend
A valve that can be opened or closed to regulate or stop the flow of fluid in a
pipe. In this simula on, pressure drop is es mated for stop valve with a bend.
10 Likes 
BETA SIGN IN SIGN UPSIMULATION GALLERY  

30. Max Particles 10
Particle Types 50
PARTICLE CONTROLS
Particle System Properties
▴
w v A f ▴
d ▴
o x e C r n i
0.0FPS
0.0Desintegrations

31. Custom Meshes
var geometry = new THREE.SphereGeometry(size, 4, 4)
var mesh = new THREE.Mesh(
geometry,
material)
mesh.position.set(x, y, z)
viewer.impl.scene.add(mesh)
Pier 9 IoT Viewer

32. f ▴
w v A ▴
d ▴
o x e C r n i

33. ▴
w v A f ▴
d ▴
o x e C r n i

34. CSS3DRenderer / CSS3DObject
var cssRenderer = new THREE.CSS3DRenderer()
viewer.container.appendChild(
cssRenderer.domElement)
var glScene = new THREE.Scene()
var iFrame = document.createElement('iframe')
var cssObj = new THREE.CSS3DObject(iFrame)
cssObj.position.set(x, y, z)
cssObj.scale.set(sx, sy, sz)
glScene.add(cssObj)

35. Part III - CONNECTING EXTERNAL DATA
SOURCES

38. REST / JSON
var router = express.Router()
router.get('/items/:id', function (req, res) {
var item = getItemFromDatabase(id)
res.json(item)
})
var app = express()
app.use('/api', router)
app.listen(process.env.PORT)

39. fetch vs XMLHttpRequest
function getItem(id, onSuccess, onError) {
fetch('/api/items/' + id).then(function (response) {
response.json(function (item) {
onSuccess(item)
})
}, function (error) {
onError(error)
})
}

40. Promises + async / awaitfunction getItem (id) {
return new Promise( async function (resolve, reject) {
try {
var response = await fetch('/api/items/' + id)
var item = await response.json()
return resolve(item)
}
catch(ex) {
return reject(ex)
}
})
}

42. RESOURCES
. . .
https://github.com/leefsmp/forge-connected-data
https://github.com/Developer-Autodesk
library-javascript-viewer-extensions
view.and.data-nodejs-mongo.sample
https://d3js.org
LmvNavTest

43. VISUAL REPORTS
WITH CONNECTED DATA
Q & A
/
Forge Partner Development
Philippe Leefsma @F3lipek