Custom model positioning capabilities in Autodesk Forge are highly dynamic and versatile

I am looking to create a viewer forge that can be linked to BIM 360. I want to incorporate a new feature using THREE.js where an object can dynamically follow GPS coordinates for model positioning. I have successfully integrated it into the FORGE viewer, but I'm unsure of which method to use to display the custom model:

  1. viewer.impl.scene.add(model)
  2. viewer.overlays.addMesh(model)
  3. modelBuilder.addMesh(model)

Could you advise on the best approach for this scenario?

Additionally, I encountered an issue when trying to group the mesh with the sceneBuilder. It didn't work as expected, but when I utilized overlays, it worked seamlessly.

  this.viewer.loadExtension("Autodesk.Viewing.SceneBuilder").then(() => {
  this.sceneBuilder = this.viewer.getExtension(
    "Autodesk.Viewing.SceneBuilder"
  );
  this.sceneBuilder.addNewModel({}).then((modelBuilder) => {
    this.modelBuilder = modelBuilder;
    window.modelBuilder = modelBuilder;

    const geometry = new THREE.BufferGeometry().fromGeometry(
      new THREE.SphereGeometry(5, 8, 8)
    );
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

    const head = new THREE.Mesh(geometry, material);
    mesh.matrix = new THREE.Matrix4().compose(
      new THREE.Vector3(0, 0, 5),
      new THREE.Quaternion(0, 0, 0, 1),
      new THREE.Vector3(1, 1, 2)
    );
    const body = new THREE.Mesh(geometry, material);
    body.matrix = new THREE.Matrix4().compose(
      new THREE.Vector3(0, 0, 0),
      new THREE.Quaternion(0, 0, 0, 1),
      new THREE.Vector3(1, 1, 2)
    );

    const human = new THREE.Group();
    human.add(head);
    human.add(body);

    human.dbId = 100; // Set the database id for the mesh
    modelBuilder.addMesh(human);
  });
});

Answer №1

To ensure that your custom three.js object behaves like other Forge models, it is generally advised to opt for option 3, utilizing SceneBuilder. This approach allows the object to be hoverable, selectable, and more. On the other hand, option 2 (employing viewer.overlays) is suitable for other scenarios. Based on your requirements, if selectability or a dbID for the human model is unnecessary, using viewer.overlays.addMesh should suffice.

If you intend to work with groups rather than individual "leaf" objects, keep in mind that ModelBuilder.addMesh method only supports singular objects. In such cases, leveraging viewer.overlays would be the recommended course of action.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

swap out a method within a publicly available npm module

Currently, I am using an API wrapper package that utilizes the request module for making API requests. While this setup works well in most cases, I am facing a situation where I need to use this package in a node-webkit environment and replace the request ...

In angular, concealing the pagination bar can be achieved when the quantity of pages is lower than the items per page count. Let's delve into

I am facing an issue where I need to hide the pagination bar if the number of pages being rendered is less than the items per page. I attempted to use ng-show but it was not successful. <tr ng-repeat="row in allItems"> ...

Overlap and cover additional elements within a DIV

I am looking to create a versatile function that can effortlessly overlay various elements such as selects, textfields, inputs, divs, tables, and more with a partially transparent div matching their exact height and width. I have managed to obtain the pos ...

What is the best way to prevent labels from floating to the top when in focus?

How can I prevent the label from floating on top when focusing on a date picker using Material UI? I have tried several methods but nothing seems to work. I attempted using InputLabelProps={{ shrink: false }} but it did not resolve the issue. Here is a li ...

Utilize Vue.js methods to reverse the string within a paragraph using the appropriate function

Hello everyone, I've been attempting to implement a function to reverse a string within a paragraph text in vue.js. I've created a method called reverseword to reverse the words and added it to a card using :rule="reverseword()", but un ...

Error in Safari Browser: Unexpected token ':' found in AngularJS syntax

When using Chrome, my website works perfectly without any errors. However, when I try to access it on Safari, most of the pages fail to load. The specific error message that appears is: [Error] SyntaxError: Unexpected token ':' (angular.min.js.m ...

Performing additions on two-dimensional arrays using Angular/JavaScript

Currently, I am in the process of learning basic JavaScript and could use some assistance. My task involves working with two-dimensional arrays where the 0th index will always represent a date and the 1st index will always be an integer in the array. My go ...

Warning: Fastclick alerting about an ignored touchstart cancellation

Having an issue with a double popup situation where the second popup contains selectable fields. Below is the code snippet I am using to display the second popup: $("#select1").click(function(e) { e.stopPropagation(); var tmplData = { string:[& ...

Display the Astro component based on the query of the current page's type

I am using Astro, GraphQL (Apollo Client), Typescript and React. Within my dynamic route: [...slug].astro file, I have a requirement to conditionally display a specific Astro component. I was able to achieve this using the following logic: {data.page.ty ...

Retrieving information repeatedly through an Axios promise loop

I am faced with the task of comparing a large amount of data with remote data and then saving it. To illustrate this concept, consider the following... Data Array: [ { "title" : "My title", "key": 12345 }, { "title" : "Some other title ...

Creating a dual-column checkbox design with CSS only

I'm working with a dynamically generated form element that can only be styled using CSS. I need help achieving a specific layout without making any HTML changes, except for the classes. The "element" and "formField" classes are common and cannot be mo ...

Facing difficulties in Angular 8 while trying to import firestore and firebase for an authentication system

While attempting to implement Firestore/Firebase functionalities for Google OAuth signin, I encountered an error indicating that Firebase is not imported: https://i.sstatic.net/oL4rY.png CODE: ERROR in node_modules/@angular/fire/auth/auth.d.ts:4:28 - er ...

Determining the position of a v-for element in Vue.js when making an HTTP request

I'm faced with a challenge involving an array of posts with comments, each post having an input for creating a new comment. The posts array contains the id of each post as a prop, but I'm unsure how to select the specific post for which I want to ...

Utilize styled-components in next.js to import and resize .svg files seamlessly

I have been attempting to import .svg files into my next.js project, but I have not had any success. I tried importing the .svg files the same way as in my React project by creating a typing.d.ts file and importing the svg as a component. However, it did ...

Sending variable from JavaScript via AJAX to PHP results in an undefined variable

My goal is to pass the variable rating_index to my PHP code and then send it to the database. Although the actual code for rating_index is quite long, I can confirm that right before the AJAX call, I console.log(rating_index) and it displays an integer val ...

Is there a way to access the rear camera on a mobile device using webcam.js?

Currently, I am utilizing webcam.js from the following link: https://github.com/jhuckaby/webcamjs. When accessing the website on mobile devices, the front camera tends to open by default. My objective is to switch this default setting to access the rear ...

What is the best way to keep a header row in place while scrolling?

I am looking to keep the "top" row of the header fixed or stuck during page scrolling, while excluding the middle and bottom rows. I have already created a separate class for the top row in my header code: view image description ...

Leverage an entity's material definition in a custom A-Frame component created by the user

I have created a custom A-Frame component (simplified for this question). I want my component to be able to retrieve the material information from the parent entity. <!DOCTYPE html> <html> <head> <title>Testing Component</ti ...

State values in React are found to be empty when accessed within a callback function triggered by

I have the following component structure: const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleUserKeyPress = useCallback((event) => { if (event.keyCode === 13) { doLogin( ...

What is the best way to assign an ID to a specific HTML element within NetSuite's Document Object Model

Attempting to utilize jQuery in NetSuite to assign a value to an element for testing purposes, but struggling to locate the HTML DOM ID of certain custom drop-down lists. It's not the internal ID. For example: <input type="text" id="soid"> Wh ...