Show icon snap on Forge Viewer 3D - autodesk-forge

I try to show snap icon (some yellow icon go with cursor appear when make measurement) when the cursor hover on the 3d model. This is my function and it not work for me at all. Do i miss some thing ?
onMouseMove = (event) => {
const snapper = new Autodesk.Viewing.Extensions.Snapping.Snapper(this.viewer);
const worldCoordinate = this.viewer.impl.hitTest(event.clientX, event.clientY);
if (worldCoordinate === null) return;
const hitTestResult = this.viewer.impl.snappingHitTest(
worldCoordinate.x,
worldCoordinate.y,
worldCoordinate.z
);
if (hitTestResult === null) return;
snapper.snapping3D(hitTestResult);
const result = snapper.getSnapResult();
}
I'm also reference some of these topic but not work for me. How to use Forge Viewer Snapper?
How to activate Autodesk Forge Snapper?
https://autodeskviewer.com/viewers/latest/docs/extensions_Measure_Measure.js.html
. Thank in advance !

I would think this issue is caused from the missing of container offset of the viewer. The world coordinates cannot be tested correctly. Please check the code below if it helps.
If I misunderstood the question,could you share a bit more information on what it is not working?
UPDATE:
onMouseMove = (event) => {
const snapper = new Autodesk.Viewing.Extensions.Snapping.Snapper(this.viewer);
const viewer_pos = this.viewer.container.getBoundingClientRect();
const worldCoordinate = this.viewer.impl.hitTest(event.clientX-viewer_pos.x, event.clientY-viewer_pos.y);
if (worldCoordinate === null) return;
// const hitTestResult = this.viewer.impl.snappingHitTest(
// worldCoordinate.point.x,
// worldCoordinate.point.y,
// worldCoordinate.point.z
// );
//if (hitTestResult === null) return;
snapper.snapping3D(worldCoordinate);
const result = snapper.getSnapResult();
snapper.indicator.render()
}

Related

Get:Properties Selection Component. Autodesk Forge

I am trying to generate a list of elements (dbIDs) of a navisworks model that comes from revit and istram IFC files. I have a problem in the selection tree levels since I need the first elements of each object and for revit files I select the body. How can I build this code so that it reads me the components of a higher level?
If someone can help me, I would really appreciate it
constructor(viewer) {
this._modelData = {};
this._viewer = viewer;
}
init(callback) {
var _this = this;
_this.getAllLeafComponents(function (dbIds) {
console.log(dbIds);
var count = dbIds.length;
dbIds.forEach(function (dbId) {
viewer.getProperties(dbId, function (props) {
props.properties.forEach(function (prop) {
if (!isNaN(prop.displayValue)) return; // let's not categorize properties that store numbers
// some adjustments for revit:
prop.displayValue = prop.displayValue.replace('Revit ', ''); // remove this Revit prefix
if (prop.displayValue.indexOf('<') == 0) return; // skip categories that start with <
// ok, now let's organize the data into this hash table
if (_this._modelData[prop.displayName] == null) _this._modelData[prop.displayName] = {};
if (_this._modelData[prop.displayName][prop.displayValue] == null) _this._modelData[prop.displayName][prop.displayValue] = [];
_this._modelData[prop.displayName][prop.displayValue].push(dbId);
})
if ((--count) === 1) callback();
});
})
});

Implementing Three.js SSAOPass in AFrame

I was able to successfully integrate Threejs Effect composer in aframe as a component by exporting everything as THREE.Effectcomposer, THREE.SSAOPass etc. and adding the effect inside a aframe component and i tweaked the AFrame renderer to update the effects in the scene. OutlinePass from threejs worked fine in this code but SSAO is not working and i don't get any errors. Please someone help me figure out the problem. the code for SSAOPass looks like this
AFRAME.registerComponent('ssao', {
init: function () {
this.el.addEventListener('that', evt => this.onEnter());
this.el.addEventListener('mouseleave', evt => this.onLeave());
setTimeout(() => this.el.emit("that"), 2000);
},
onEnter: function () {
const scene = this.el.sceneEl.object3D;
const camera = this.el.sceneEl.camera;
const renderer = this.el.sceneEl.renderer;
const render = renderer.render;
const composer = new THREE.EffectComposer(renderer);
//let renderPass = new THREE.RenderPass(scene, camera);
//let outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
const ssaoPass = new THREE.SSAOPass( scene, camera, window.innerWidth, window.innerHeight );
//composer.addPass(renderPass);
//composer.addPass(outlinePass);
ssaoPass.kernelRadius = 16;
composer.addPass( ssaoPass );
// let objects = [];
// this.el.object3D.traverse(node => {
// if (!node.isMesh) return;
// objects.push(node);
// });
// outlinePass.selectedObjects = objects;
// outlinePass.renderToScreen = true;
// outlinePass.edgeStrength = this.data.strength;
// outlinePass.edgeGlow = this.data.glow;
// outlinePass.visibleEdgeColor.set(this.data.color);
// HACK the AFRAME render method (a bit ugly)
const clock = new THREE.Clock();
this.originalRenderMethod = render;
let calledByComposer = false;
renderer.render = function () {
if (calledByComposer) {
render.apply(renderer, arguments);
} else {
calledByComposer = true;
composer.render(clock.getDelta());
calledByComposer = false;
}
};
},
onLeave: function () {
this.el.sceneEl.renderer.render = this.originalRenderMethod;
},
remove: function () {
this.onLeave();
}
});
I have also created a glitch project which i am sharing here. Please feel free to join and collaborate in my project
Edit link: https://glitch.com/edit/#!/accessible-torpid-partridge
Site link:https://accessible-torpid-partridge.glitch.me
Thanks in advance
The code is correct, all you need is to tweak the exposed SSAOShader uniforms: SSAOPass.kernelRadius, SSAOPass.minDistance, SSAOPass.maxDistance - like in the Three.js example.
Keep in mind - the scale in the example is huge, so the values will need to be different in a default aframe scene.
It's a good idea to be able to dynamically update a component (via setAttribute() if you properly handle updates), so you can see what's going on in realtime. Something like I did here - SSAO in a-frame (also based on Don McCurdys gist.
I've used some basic HTML elements, most threejs examples use dat.GUI - it is made for demo / debug tweaks.

Start model browser in Forge viewer collapsed when loading several models

I have tried to start the model browser with all nodes collapsed when loading several aggregated models, but it do no collapse all nodes. Is there any way to do this?
Try the code below on these model: https://wallabyway.github.io/federatedmodels-v7/
var ext = NOP_VIEWER.getExtension('Autodesk.ModelStructure')
ext._modelstructure.options.startCollapsed = true
Try to use this one instead. The ModelStructralPanel will read options in its constructor only.
var viewer = new Autodesk.Viewing.GuiViewer3D(container, {startCollapsed: true});
var ext = viewer.getExtension('Autodesk.ModelStructure');
// or
// viewer.unloadExtension('Autodesk.ModelStructure');
// var ext = await viewer.loadExtension('Autodesk.ModelStructure', {startCollapsed: true});
Workaround:
Add this code snippet before opening the modelstructure panel.
var ext = viewer.getExtension('Autodesk.ModelStructure');
ext._modelstructure.addVisibilityListener( show => {
if( show && (!ext._modelstructure.uiCreated) ) {
ext._modelstructure.tree.delegates.forEach( d => ext._modelstructure.tree.setAllCollapsed( d, true ) )
}
});
When creating the viewer, pass the following option to it:
var viewer = new Autodesk.Viewing.GuiViewer3D(container, {modelBrowserStartCollapsed: true});
It should cascade until reaching the model browser.
Background
The option "modelBrowserStartCollapsed" is passed on from the Viewer3D constructor up until the ModelStructureExtension, where it changes name to "startCollapsed" as it is passed to the ViewerModelStructurePanel.
proto.restoreDefaultPanel = function () {
var config = this.viewer.config;
var options = {
docStructureConfig: config.docStructureConfig,
hideSearch: (0, _src_compat__WEBPACK_IMPORTED_MODULE_2__.isMobileDevice)(),
excludeRoot: config.modelBrowserExcludeRoot,
startCollapsed: config.modelBrowserStartCollapsed // HERE
};
var modelTitle = config.defaultModelStructureTitle || 'Browser';
var panelInstance = new _src_gui_ViewerModelStructurePanel__WEBPACK_IMPORTED_MODULE_1__.ViewerModelStructurePanel(_objectSpread(_objectSpread({},
options),
(0, _src_gui_ViewerModelStructurePanel__WEBPACK_IMPORTED_MODULE_1__.generateDefaultViewerHandlerOptions)(this.viewer)),
modelTitle);
this.setModelStructurePanel(panelInstance);
};
The source for ViewerModelStructurePanel shows that it takes the option "startCollapsed" as stated, among other options.
function ViewerModelStructurePanel(viewer, userTitle, ops) {
...
options.startCollapsed = options.startCollapsed !== undefined ? options.startCollapsed : false;

Forge Viewer: Properties Window

The Properties window does not populate any properties even though the 2D view has properties info for the selected room
Here is the function that loads the model. what am I missing?
function loadModel() {
var initialViewable = viewables[indexViewable];
var svfUrl = lmvDoc.getViewablePath(initialViewable);
var modelOptions = {
sharedPropertyDbPath: lmvDoc.getFullPath(lmvDoc.getRoot().findPropertyDbPath())
};
viewer.loadModel(svfUrl, modelOptions, onLoadModelSuccess, onLoadModelError);
}
One line missing in your code, please try the following instead:
var sharedDbPath = initialViewable.findPropertyDbPath();
sharedDbPath = lmvDoc.getFullPath( sharedDbPath );
var modelOptions = {
sharedPropertyDbPath: sharedDbPath
};
However, you should not need to specify the sharedPropertyDbPath manually now. You can take advantage of the Viewer3D#loadDocumentNode to load the model directly. It will automatically determine the path for you. (started from v7 viewer)
const initialViewable = viewables[0];
viewer.loadDocumentNode( lmvDoc, initialViewable, loadOptions )
.then( onLoadModelSuccess )
.catch( onLoadModelError );

How to include different images in my autodesk forge viewer floorplan

Im currently working on a project with the autodesk forge viewer. My viewer is showing an uploaded and converted floorplan. In this plan I would like to show different logos for my rooms from a database. I have made multiple extensions for my viewer already but I have not discovered any possibility for my logo project so far. Maybe you have any ideas for implementing.
Thx,
JT
The easiest way that comes to mind is to append an element containing your logos to the canvas - see this blog here to get started.
Basically you'd need to attach images to the rooms' locations hovering over the canvas and subscribe to the camera change event to adjust their locations/coordinates per camera movement. You can retrieve the coordinates of your room by calculating their bounding boxes with their dbid with:
function get2DBounds(dbId, model){
const find2DBounds = function(fragList, fragId, dbId, bc) {
const mesh = fragList.getVizmesh( fragId );
const vbr = new Autodesk.Viewing.Private.VertexBufferReader( mesh.geometry );
vbr.enumGeomsForObject( dbId, bc );
}
const it = model.getData().instanceTree;
const fragList = model.getFragmentList();
let bounds = new THREE.Box3();
let bc = new Autodesk.Viewing.Private.BoundsCallback( bounds );
const dbId2fragId = model.getData().fragments.dbId2fragId;
const fragIds = dbId2fragId[dbId];
if( Array.isArray( fragIds ) ) {
for( let i = 0; i < fragIds.length; i++ ) {
find2DBounds( fragList, fragIds[i], dbId, bc );
}
} else if( typeof fragIds === 'number' ) {
find2DBounds( fragList, fragIds, dbId, bc );
}
return bc.bounds;
}
const boundingBox = get2DBounds( dbId, viewer.model );
const position = boundingBox.center()