Search code examples
autodesk-forgeautodesk-viewer

How to set occlusion of div element

I am creating a viewer in forge where I show the view and the points of view where errors are found (this._issues).

         this._issues.forEach (issue => {
            
            let viewport = document.getElementById ('MyViewerDiv');
            let modelPoint = JSON.parse (issue.viewer_point);
            let position = this.viewer.worldToClient (new THREE.Vector3 (modelPoint.x, modelPoint.y, modelPoint.z));

            modelIssue = document.createElement ('div');         
            modelIssue.style.left = `$ {position.x} px`;
            modelIssue.style.top = `$ {position.y} px`;
            modelIssue.className = 'ie-markup';

            viewport.appendChild (modelIssue);
        });

enter image description here My problem happens that all issues are shown, even those that are covered by the walls. I would like to have an operation like this example (https://forge-rcdb.autodesk.io/database?id=583ec7efebfb320e3cef26a5) where it is automatically hidden when the issue is behind the viewfinder elements.

Solution

  • I'd suggest to try the markup3d plugin that's used to create the markups for page you quoted, you may find its code here ...

    You can try the samples below: