I've started trying the autodesk-forge samples and I would like to customize how elements show up on the viewer.
So my question is: Is it possible to show the plan elements' dimensions (as shown in the picture below) with Autodesk-viewer?
I can see this dimensions if I click on an element, but I'm trying to get something like this when the viewer starts:
Thanks in advance.
There is no API to create dimensions at the moment, but you can use custom implementation to add Three.js lines like the dimension command is doing. You can basically add any 2D/3D custom graphic element to the viewer scene.
Unfortunately we have no sample that illustrates how to achieve that, you may take a look at the code of the Measure Extension, see line#60358 in viewer3D.js, but there is quite a bit of work to achieve...
Hope that helps.
Related
We currently use the model derivatives API to upload 3D models and later visualize them in a browser with the Autodesk Viewer v7 (previously Forge Viewer).
For different reasons we have been trying to hide and show parts of the model, but to do so in some cases we need to be able to hide geometric pieces of some elements while still being able to see the rest. For example if we had an element in gray (see image below) we would like to make the part of the element in red transparent.
I have looked into the Viewer API docs and there are functions that allow showing and hiding complete elements, but not cutting elements along a custom path.
While the docs mention the overlay functionality which enables us to add custom geometries by interacting with the THREE library that the Viewer runs on, drawing a copy of the whole model seems inefficient and prone to giving bad results.
Searching in SO I found that the THREE v71 library (which is the version the Viewer uses) has the possibility of occluding elements with the colorWrite option. See these links for reference:
three.js transparent object occlusion
Occlusion of real-world objects using three.js
I tried implementing something similar by using the colorWrite key when creating a new Three Material in an overlay, but nothing happens. This makes me think that either the Autodesk Viewer overwrites the render order (which makes sense) or openly ignores the colorWrite option. Does anyone know why and if there is a workaround for this? Or does anyone know if there is another way to cut an element that I'm not considering?
Please note that we have to do this with multiple elements at the same time and that reuploading the model periodically is not an option for us.
I got the following feedback:
The approach linked in the SO thread doesn't work, because we ignore both the colorWrite material property and the renderOrder mesh property. I also think that the approach would not work as expected in general, because using an invisible object to occlude a part of another object would always be view-dependent, and also occlude other objects in the background (so it wouldn't just 'cut out' a part of a single object).
Generally, this is not really a use-case for LMV, because it's a viewing tool, not a solid modelling tool.
Cut planes might help to get some of what you want, but they also have limitations:
It's possible to define multiple section planes to construct a 'shape' (that's also what the section box does internally). But since they are infinite, you wouldn't be able to cut away parts of one object, but not other objects (or other parts of the same object that intersect the cutplane). They're also designed to be 'outward' facing. The section box, for example, can only be used to narrow the scene down to some elements of interest. It's not possible to do the opposite, i.e. cut out some inner part of the design and keep everything around it.
This is what the section box could offer:
I am brand new to Forge and making my way through some documentation but it seems quite hard to get some of the older examples working (pages don't load correctly etc) and I am currently using version 6, which seems newer than many examples too.
Is it possible in client-side code to take in some user data and generate a heatmap (overlayed ontop of the floor of a house) based on that data (i.e. different blocks of colour, it can be quite rudimentary).
This is using a Revvitt model uploaded to Forge and shown in the Viewer.
I have no experience with Three.JS but if anyone could point me in the right direction, show me a working example, or at least tell me if its possible I would greatly appreciate it!
There are a couple of options, with different levels of complexity:
You could use the official viewer APIs such as setThemingColor and clearThemingColors to add a semi-transparent color tint to selected objects.
If you need to overlay scene elements with anything more sophisticated, you could replace their original material with a custom THREE.ShaderMaterial. Just be sure to follow the documentation of three.js version 71 which is used by Forge Viewer. The process of adding new materials to Forge Viewer, and assigning them to specific objects is explained in https://forge.autodesk.com/blog/forge-viewer-custom-shaders-part-1. The article is a bit old, but I think the relevant parts of it (mainly the createShaderMaterial and selectionHandler functions) can be reused.
I'm using ForgeViewer to display both IFC models and custom geometry (point clouds and meshes using THREE.js directly), and I'm using the Section tool to cut away parts of the model.
Is there anyway I can set the size of the planes in the UI. I want the arrows and planes to be centered around specific models making them easier to use. Also, it would be nice to be able to set the default size and position of the cutting box.
The size of the cutting plane/box as well as the position of the manipulating gizmo are estimated by the section tool based on the bounding box of all visible objects. There's no UI to change that behavior, but you might be able to reverse engineer the official Section tool and perhaps modify it to your needs.
Edit: alternatively, you could retrieve the THREE.js geometry representing the cutting plane after it's been created by the Section tool (and placed into viewer.impl.sceneAfter) and customize it as needed.
Adding to Petr's answer...
Use the 'box section' tool (see screenshot) and manually adjust the box size by clicking on each of the box faces to adjust.
Then use Augusto's blog post (below) to programmatically capture (using viewer.getState();) and replay your box section (viewer.setCutPlanes(planes);).
https://forge.autodesk.com/blog/viewer-setcutplanes
We are implementing the 2D line style solution shown in the article https://forge.autodesk.com/blog/how-get-2d-line-style-view-3d-models
Once the styling is applied calling the viewer.getScreenshot() method the screenshot still displays the model in full colour.
Is there a parameter or setting needed to enable the screenshots to display with the styling currently in the viewer?
Thanks
our engineer team replied this looks like a limitation on the screenshot api, which doesn't take into consideration the NPR effects. We logged this with #LMV-3905.
With my experience, some 3rd party library might help to take snapshot of HTML DOM, one of which is http://html2canvas.hertzen.com/ . The usage is straightforward. The picture below is what I tested. I am not clear where those three shadows come from, just for your reference. you might need to check with html2canvas.
html2canvas(Viewer.container).then(canvas => {
document.body.appendChild(canvas)
});
Starting out with a given image, I would like to be able to trace polygons on the image and then export the result as an HTML image map.
What would also be nice is to be able change the scale of an existing image map, thereby changing the size of the polygons and shapes.
Is there a program that anyone knows of that has these features?
Many program do this. It is to time consuming doing complicated maps manually.
I know coffeecup is a used tool for this.
What would also be nice is to be able change the scale of an existing image map ..
I wrote a Javascript image map resizer, it's here. Just paste in your HTML and it will return the scaled image map. You must include "height" and "width" attributes for the original image in the HTML. (This is a quick and dirty tool, it doesn't actually do anything other than parse the HTML you've pasted in. It uses those attributes as the base of calculations).
You may also be interested in my jQuery plugin ImageMapster which can resize image maps dynamically among other things.
I use this site it's fairly good for quickly making image-maps
I use this site https://www.image-map.net/ to trace polygons on the image and then export the result as an HTML image map.