How to write Javascript code for model browser while using autodesk-forge-viewer API - autodesk-forge

I am trying to replicate a part of demo shown here using autodesk-forge-viewer api. Particularly, I am not able to find code snippet around how can I do navigation for a particular area of 3D model. For example, if render 3D model is house, I require that If a click on "Bed Room" which is a link somewhere in browser, 3D rendered model should show me that "Bed Room". In sample app shown, they are providing the same as a feature of "Model Browser".
Could anyone please help me with that?

You first need to know the dbId's of the nodes you are interested in, most viewer API methods take dbIds as input. You get those either by listening to selection events, see that post, or by parsing the instance tree and checking the properties of the nodes to see if those are the ones you looking for.
You can then use methods such as viewer.fitToView([dbIds]), viewer.hide([dbIds]), viewer.show([dbIds]) ... Here is another article that might be useful: Hidding completely viewer nodes (no ghosting).
Hope that helps.

Related

Mouse click vs viewer.select function selection behave differently in Autodesk Forge multi models viewer

I have been working on multi-model from the last couple of weeks and found that selection of a model object using mouse click vs viewer select function behave differently.
I have two models one architectural and another mechanical. When I select a wall or room on the architectural model using mouse click, Object select with overlay without having any problem but when I try using viewer select function with same object, it hides behind the wall and overlay doesn't work. It is only happening with the architectural model and working fine with the mechanical model.
Please suggest me if I am doing something wrong with multi-model.
To programmatically select components when working with multiple models use viewer.select(dbid, model):
let model = viewer.impl.modelQueue().getModels()[index] or viewer.impl.findModel(modelId);
viewer.select(dbid, model)
And to get selected dbids use viewer.getAggregateSelection (see doc here) the event to subscribe to AGGREGATE_SELECTION_CHANGED_EVENT (doc here) to track selection changes:
If the issue persists can you send some screenshots and your models (links via a sharing service like weTransfer/Dropbox) for further investigation over to forge.help#autodesk.com?

Forge viewer: Auto-start animation

We would like to trigger/auto-start an animation/simulation of a specific object (Revit ElementID) when the model loads in the Forge viewer. The goal would be to move a cube (Revit ElementID) back and forth on the floor in a repeating loop. Would this be possible using any relevant extension or code?
Yes it is possible but there is no built-in extension you can use out of the box. The animation logic has to be a custom implementation.
From a given ElementId/UniqueId you need to find the corresponding dbId, see that reply for a starting point on how to do that.
From a given dbId, you can obtain fragmentIds and use those to apply transforms to the components in the viewer. The animation logic has to be by your own application. You can refer to that article How to create animations in the viewer? or one of the several demos I wrote performing animations:
Kinematics - source
Physics - source
You can use the Autodesk.Viewing.GEOMETRY_LOADED_EVENT and Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT to trigger the animation logic, so you can make sure the model is fully loaded. See also that article: Asynchronous viewer events notification.
Hope that helps.

Changing materials in Forge

We are currently making the client retrieve the object states when the page loads (which will cause the 'pending' objects in the model to turn into different colors). Then we poll for changes to update the coloring (Firstly: pending object gets colored when the viewer loads, and then we keep polling to check and change state again, to make Forge render those in a different color and store their old color/material. When the polling received a change that an object should no longer be colored, it tells Forge to use the old color/material again.
The problem:
We've found out what the problem is, but we couldn't find out how to fix it. The problem is that changing materials in Forge doesn't work after startup anymore, it only works in the first ~3 seconds or so (the materials were used to show the colors).
However, setting overlays works even after the first ~3 seconds, (showing overlays instead of materials to show the colors).
This is not what we want to achieve. This looks unoptimized, because overlays will be shown through everything.
The materials, however, seem to be 'locked', as in, they cannot be changed anymore after the first ~3 seconds. It seems like they aren't refreshed or something
In the examples, we found they used viewer.impl.invalidate(true) to refresh the Forge viewer, but that doesn't do anything after ~3 seconds.
We've also tried every combination of viewer.impl.invalidate(true, true, true) as well as setting material.needsUpdate to true, as well as trying to re-render the entire scene.
We also found this: https://github.com/mrdoob/three.js/issues/790, but we couldn't find a good way to do that in Forge, we tried viewer.requestSilentRender() but that didn't do anything either.
Anyway, we've tried everything we could come up with and could find online to make the materials work, but nothing made a difference.
We are looking to find someone that's more experienced with how Forge works that can see what the material code is doing wrong.
As for the content, here is all the code you will need to understand what is happening:
DROPBOX LINK
And here is a small part of the "index.html" file that sets the color:
try
{
viewer.restoreAllColorOverlays(); //for materials instead of overlays: viewer.restoreAllColorMaterials();
$.each(colors, function(color, selectionIds)
{
viewer.setColorOverlay(selectionIds, color); //for materials instead of overlays: viewer.setColorMaterial(selectionIds, color);
});
}
catch(error)
{
console.error(error);
}
I have no idea how you implement your app, so I only tell what I found in your codes. If you want to resolve the issue you addressed, you can consider providing a reproducible case demonstrating that, I will gladly pass it to our dev team. Those following items should be in the reproducible case:
A short exact description of what you are trying to achieve. The behavior you observe versus what you expect, and why this is a problem.
A complete yet minimal sample source model to run a test in.
A complete yet minimal Forge app that can be run and debugged with a simple procedure to analyze its behavior lives in the sample model.
A complete yet minimal pure three.js app that can be run and demonstrated the shader effect you want. Note. Forge Viewer is using r71 three.js.
Detailed step-by-step instructions for reproducing the issue, e.g. which element to pick, what command to launch etc.
If your reproducible case could not be posted here publicly, please send it to the forge.help#autodesk.com and remove sensitive data or information before you send.
=== Something I found in your codes:
I found here are some wrong types and missing actions in your ColorMaterial extension. The color property of an material should the a type of the THREE.Color. Here is my modification:
Autodesk.Viewing.Viewer3D.prototype.setColorMaterial = function(objectIds, color)
{
if( !(color instanceof THREE.Color) ) throw 'Invalid argument: Color';
var material = new THREE.MeshPhongMaterial
({
color: color,
opacity: 0.8,
transparent: true
});
viewer.impl.matman().addMaterial( 'ColorMaterial-' + new Date().getTime(), material, true );
// ...........
};
Its' result is here:
In the ColorOverlay extension, The type of material color property is also wrong, it should be a type of THREE.Color, too. Changing it into THREE.Color should work fine. In addition, overlay is covers on 3D objects, so you should call viewer.hide() with your setColorOverlay() together. Otherwise, it won't look like a transparent object.
Without hidding 3D object of the wall:
hide 3D object of the wall:

Binding a Backbone Collection to DOM element using rivets without extending backbone view

I'm new to html5. I want to bind backbone collection to DOM element using rivets without extending backbone view. I got code snippets like extending adapter, using rivets.bind but i dont know how to organize everything. Can someone explain me how to achieve this in steps?
Thanks in Advance
Update: We can do this if we follow the example provided in the link of the accepted answer.
what you want to bind is the View, not the collection. The Collection is just data, an array of models if you wish. The View is what responds to user interaction, and that's where your rivets binding will be handled.
Check out Backbone.Marionette framework as its specialized CollectionView simplifies this even further, although you may go with a standard Backbone.View too.

Google Maps IOS SDK 1.2 need snapshot of map view

In 1.1, the GMSScreenshot class provided a rudimentary way to get a snapshot of the entire screen into a UIImage. In 1.2, the class is missing, and in the release notes, it says this:
Calling renderInContext: on the GMSMapView layer now renders correctly;
this allows for snapshots and UI effects
Unfortunately, I'm not finding this to be the case. Typically renderInContext: does not work on Open GL drawing, but I figured I'd take a shot anyway (it didn't work). Has anyone been successful in getting a (preferred) view or screen snapshot?
I am able to take a screenshot. Here is the code I use:
UIGraphicsBeginImageContext(mapView_.frame.size);
[mapView_.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *screenShotImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
I do not call this straight after I create the map as it can take some frames for the map to render.