Tips for incorporating a mesh into Forge Viewer v6 with Typescript

Is there a way to add meshes to Forge Viewer v6 using Type script?

I've tried various methods that worked with v4, but I'm encountering issues now.


        private wallGeometry: THREE.BoxBufferGeometry;
        
        drawWalls() {
            
            this.wallGeometry = new THREE.BoxBufferGeometry(4000, 4000, 100, 1, 1, 1);
            
            console.log('creating wall geometry');
            
            this.wallGeometry = new THREE.BoxBufferGeometry(4000, 4000, 100, 1, 1, 1);
            
            console.log('creating wall material');
            
            let wallMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
            
            console.log('register wall material');
            
            this.viewer.impl.matman().addMaterial(
                'dasher-material-vertex',
                wallMaterial,
                true);
                
            console.log('create Overlay Scene');
            
            this.viewer.impl.createOverlayScene(this._overlayScene, wallMaterial);
            
            console.log('wall mesh');
            
            this.wall = new THREE.Mesh(this.wallGeometry, wallMaterial);
            this.wall.position.set(0, -1000, -2000);
            
            console.log('add overlay to scene');
            
            this.addToScene(this.wall);
        }
        
        private addToScene(obj: THREE.Object3D) {
            this.viewer.impl.addOverlay(this._overlayScene, obj);
            this.viewer.impl.invalidate(false, false, true);
        }
    

After running the code above, I encountered the following error message:

THREE.Object3D.add: object not an instance of THREE.Object3D.
(additional details snippet here)proto: $n

Any suggestions on how to resolve this issue?

Edit: Here is a snapshot from my DevTools: https://i.sstatic.net/E0dsI.png

Answer №1

Based on the three.js v71 documentation, this issue arises when the inserted object is missing a crucial property called isObject3D. It's uncertain whether Forge Viewer could be causing this lack of property. To troubleshoot, try setting a breakpoint just before calling addToScene to verify that the isObject3D property exists.

Furthermore, since this error occurs during runtime, it is unlikely to be TypeScript-related.

Answer №2

After running a quick check on the console, I discovered that the Three.js version is actually 71!

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

Modify visibility within a subclass

Is there a way to modify property visibility in a child class from protected to public? Consider the following code snippet: class BaseFoo { protected foo; } class Foo extends BaseFoo { foo = 1; } new Foo().foo; It seems that this change is pos ...

Scrolling through a list in Angular using cdk-virtual-scroll-viewport while selecting items via keyboard input

Looking to implement a customized Autocomplete feature. As the user begins typing, a small window should appear with selectable options. I want users to have the ability to navigate and select an option using their keyboard. For instance: - User types "H ...

Exploring TypeScript and React: Redefining Type Definitions for Libraries

As I transition from JSX to TSX, a challenge has arisen: My use of a third-party library (React-Filepond) This library has multiple prop types The provided types for this library were created by an individual not affiliated with the original library (@ty ...

In React-Native, implement a function that updates one state based on changes in another state

I need to trigger a function when a specific state changes. However, I encountered the error 'maximum update depth reached'. This seems illogical as the function should only respond to changes from stateA to update stateB. I attempted using setSt ...

Using a Typescript enum as a parameter type can lead to accepting incorrect values

When working with TypeScript, I have defined an enum, and now I want to create a function that accepts a parameter whose value is one of the enum's values. However, TypeScript does not validate the value against the enum, allowing values outside of th ...

Using path aliases in a Typescript project with Typescript + Jest is not a viable option

Note I am able to use aliases in my TypeScript file. Unfortunately, I cannot use aliases in my test files (*.test.ts). My Configuration 1. Jest.config.ts import type { Config } from '@jest/types'; const config: Config.InitialOptions = { ve ...

Issue: Module "mongodb" could not be found when using webpack and typescript

I am encountering an issue while trying to use mongoose with webpack. Even though I have installed it as a dependency, when attempting to utilize the mongoose object and execute commands, it gives me an error stating that it cannot find the "." Module. Thi ...

Since transitioning my project from Angular 7.2 to Angular 8, I noticed a significant threefold increase in compile time. How can I go about resolving this issue

After upgrading my project to Angular 8, I noticed a significant increase in compile time without encountering any errors during the upgrade process. Is there a way to restore the previous compile time efficiency? **Update: A bug has been identified as th ...

Is it possible to combine TypeScript modules into a single JavaScript file?

Hey there, I'm feeling completely lost with this. I've just started diving into Typescript with Grunt JS and I could really use some assistance. I already have a Grunt file set up that runs my TS files through an uglify process for preparing the ...

RectAreaLight in Three js does not produce any light reflection when used with MeshPhongMaterial due to lack of support for OES_texture_half

After trying to incorporate a RectAreaLight into my three.js scene where I have objects with MeshPhongMaterial, I noticed that there is no light reflection on the objects. A useful example can be found here: Link If you open the developer tools, you can s ...

Angular 6: The Promise<any> is incompatible with the LeagueTable type

Recently delving into Angular and attempting to retrieve JSON League Table data from the API, I encountered an error message stating Type 'Promise' is not assignable to type 'LeagueTable'. leaguetable.service.ts import { Injectable } ...

Prisma atomic operations encounter errors when attempting to update undefined values

According to the Prisma Typescript definition for atomic operations, we have: export type IntFieldUpdateOperationsInput = { set?: number increment?: number decrement?: number multiply?: number divide?: number } Let's take a look at the Pris ...

Form submission returns JSON data with an undefined value from the server

I've been following a tutorial here but ran into some issues due to using newer versions of Angular and Ionic. This is an excerpt from my code: createReview(review){ let headers = new HttpHeaders(); headers.append('Content-Type&apo ...

The fusion of Typescript with Node.js

Currently, I am delving into learning typescript and exploring how to integrate it with Node.js. After watching multiple educational videos, I came across two distinct methods for linking typescript with Node.js. The first method involves using decorators, ...

Encountering a type error with mongoose's pre-save method while using Express with TypeScript

Currently, my tech stack consists of Express.js in TypeScript with Mongoose. Here is the model I am working with: import mongoose, { Schema, Document, Model } from 'mongoose'; import crypto from 'crypto'; import validator from 'val ...

Most effective methods for validating API data

Currently, I am working on developing an api using nestjs. However, I am facing some confusion when it comes to data validation due to the plethora of options available. For instance, should I validate data at the route level using schema validation (like ...

What causes the discrepancy in errors when dealing with subtype versus regular assignments?

Below is a sample code that has been checked by TypeScript playground https://www.typescriptlang.org/play/ interface PartialCustomData { option?: number; } interface A { [key: string]: string | PartialCustomData; } interface B extends A { [k ...

The member 'pipe' is not found within the 'AngularFireObject<{}>' type

As someone new to Angular, I've been following a tutorial by Mosh Hamedani on version 6 of Angular, but unfortunately the tutorial is based on version 4. Currently, I'm working on an e-commerce project that involves implementing an AddToCart butt ...

The Vue Prop does not have an initializer and is not explicitly assigned in the constructor

Currently, I am utilizing props in Vue Class components. Within the constructor, I have defined the props without a value. This setup compiles and operates smoothly, except after the most recent VS Code / TSLint update, a warning message emerges: The pr ...

Tips for eliminating unnecessary module js calls in Angular 9

https://i.sstatic.net/3R7sr.png Utilizing a lazy loading module has been efficient, but encountering challenges with certain modules like all-access-pass and page not found as shown in the image above. Is there a way to effectively remove unused module J ...