The error message "Property 'DecalGeometry' is not found in the type 'typeof "..node_modules/@types/three/index"'."

Within my Angular6 application, I am utilizing 'three.js' and 'three-decal-geometry'. Here is a snippet of the necessary imports:

import * as THREE from 'three';
import * as OBJLoader from 'three-obj-loader';
import * as DecalGeometry from 'three-decal-geometry';
OBJLoader(THREE);

However, when attempting to access THREE.DecalGeometry, an error is thrown with the message:

Property 'DecalGeometry' does not exist on type 'typeof "..node_modules/@types/three/index"'. 
Did you mean 'DirectGeometry'?

Reviewing my package.json file shows the installed dependencies:

"dependencies": {
    "@angular/cdk": "^6.2.0",
    "three": "^0.84.0",
    "three-decal-geometry": "^1.0.0",
    "three-obj-loader": "^1.1.3"
}

"devDependencies": {
   "@types/three": "^0.92.15",
   "@angular/cli": "~6.0.7",
}

Despite including 'three-decal-geometry' via npm, attempts to utilize DecalGeometry library have been unsuccessful. I even tried adding 

<script src="THREE.DecalGeometry.js" ></script>

in index.html following directions in https://www.npmjs.com/package/three-decal-geometry

typescriptthree.jstypescript-typings

Answer №1

This seems to be more of an issue related to TypeScript rather than Three.js. It appears that you're working with TypeScript and encountering a problem with an external script that is not part of the core three.js library.

By including "@types/three" in your dev dependencies, you are only getting TypeScript definitions for the core three.js library. Therefore, when you attempt to use THREE.DecalGeometry, the compiler will flag it as an error because DecalGeometry is not part of THREE by default.

A quick workaround is to cast the type to any. This approach bypasses type-checking, but may not catch potential errors:

let decal = new (<any>THREE).DecalGeometry(); // <any> type disables type-checking
decal.doWhatever();
decal.nothingMatters(true);

An alternative solution would involve creating your own DecalGeometry.d.ts TypeScript Declaration file that defines all the properties and methods for DecalGeometry.

Update: I've drafted a basic declaration file. Save it in your app as typings/threeExtras.d.ts, restart your app, and the compiler should recognize it:

declare namespace THREE{
    export class DecalGeometry extends Geometry{
        constructor(meshToIntersect: Geometry, position: Vector3, direction: Vector3, dimensions: Vector3, check?: Vector3);
    }
}

Answer №2

Having encountered difficulties with the DecalGeometry library, I found a quick workaround by utilizing 'require' and type casting to any. Please refer to the following solution:

declare var require: any
const THREE = require('three');
const OBJLoader = require('three-obj-loader');
const DecalGeometry = require('three-decal-geometry')(THREE);
OBJLoader(THREE);

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

Navigating a relative path import to the correct `@types` in Typescript

When the browser runs, I require import * as d3 from '../lib/d3.js'; for d3 to be fetched correctly. I have confirmed that this does work as intended. However, the file that contains the above code, let's call it main.js, is generated from ...

typescriptd3.jses6-modules

Creating Instances of Variables Within a Class

Currently, I am working on a project using Ionic and Angular. I have come across various ways of instantiating variables and I'm unsure about the implications of each method. Here are three scenarios that confuse me: export class someClass { myVaria ...

angulartypescriptionic-framework

Unable to import the Node.js array in the import() file

I have encountered an issue while building an array path for the Router.group function. The parameter passed to Router.group is added to the end of the this.groupPath array, but when I check the array data within an import(), it appears to be empty. What c ...

javascriptarraysnode.jstypescript

Implementing type inference for response.locals in Express with TypeScript

I need to define types for my response.locals in order to add data to the request-response cycle. This is what I attempted: // ./types/express/index.d.ts declare global { declare namespace Express { interface Response { locals: { ...

node.jstypescriptexpress

Tips for mocking a module with a slash character in its name?

When it comes to mocking a standard npm project, the process is simple. Just create a __mocks__ folder next to the node_modules folder, then name the file after the package and insert the mock contents. For example: /__mocks__/axios.ts However, I encount ...

typescriptjestjsmockingts-jest

Discover the power of debugging Typescript in Visual Studio Code with Gulp integration

I've been working on setting up an express/typescript/gulp application, and while it's functional, I'm struggling to debug it using source-maps. Here is how I've set it up: Gulp File var gulp = require('gulp'), nodemon ...

node.jsexpresstypescriptgulpgulp-sourcemaps

When attempting to use the 'orderBy' pipe in conjunction with async functions, an error is thrown indicating that the pipe cannot be found

When trying to implement the orderBy pipe in ngFor along with async pipe, I encountered an error as follows: ERROR Error: Uncaught (in promise): Error: Template parse errors: The pipe 'orderBy' could not be found (" </div> ...

angulartypescriptrxjsangular6observable

What is the proper way to create an array of dynamically nested objects in TypeScript?

Consider the structure of an array : [ branch_a: { holidays: [] }, branch_b: { holidays: [] }, ] In this structure, branch_a, branch_b, and ... represent dynamic keys. How can this be properly declared in typescript? Here is an attempt: ty ...

typescript

Tips for customizing Material UI CSS default properties in React

I'm currently working on a React project and utilizing the 'Table' component from Material UI. The default CSS properties of this table, along with its components like TableHead, TableCell, and TableRow, are proving difficult to override whi ...

reactjstypescriptmaterial-uiviteswc

How can I combine an ordinary image and a CSS2D image in THREE.js CSS2DRenderer and save them together as a single .jpg file?

After implementing the following code... (1) I successfully saved regular rendered THREE.js scenes as .jpg files; (2) Additionally, I managed to utilize CSS2DRenderer to display CSS2D labels on top of the canvas; (3) Now, my goal is to save the image wi ...

javascriptcssthree.js

Encountering a "Missing Access" error on the Discord.js API when trying to register my slash commands

Three years ago, I created a small Discord bot in Typescript that is now present on over 80 guilds. Recently, I made the decision to update it from discord.js-v12.3.1-dev to discord.js-v13.6, while also integrating the popular slash commands feature. Howe ...

typescriptdiscorddiscord.js

When trying to use the `map: texture` with a new `THREE.Texture(canvas)

i'm trying to apply the texture from new THREE.Texture(canvas) to the PointsMaterial, but it's not working as expected. The canvas appears on the top right corner, however, only white points are visible in the CubeGeometry. var texture = new ...

javascriptcanvasthree.js

Update gulp configuration to integrate TypeScript into the build process

In the process of updating the build system for my Angular 1.5.8 application to support Typescript development, I encountered some challenges. After a complex experience with Grunt, I simplified the build process to only use Gulp and Browserify to generat ...

angularjstypescriptgulptsctypescript2.0

Customizing the initial page layout in Elm

I am new to Elm and I need help with a particular issue. Can someone provide guidance or direct me to a useful resource for solving this problem? The challenge I’m facing involves editing the start page of a website by removing specific elements, as list ...

javascripthtmltypescriptsasselm

Why does the request body show as null even after passing body data in Prisma?

My application uses Prisma for database storage with MySQL. It is built using Next.js and TypeScript. I have set up the API and it is functioning properly. However, when I try to save data sent through the API, the `request.body` is null. Interestingly, wh ...

reactjstypescriptnext.jsprisma

Angular Appreciation Meter

Looking to create a rating system using Angular. The square should turn green if there are more likes than dislikes, and red vice versa (check out the stackblitz link for reference). Check it out here: View demo I've tried debugging my code with con ...

htmlangulartypescript

What is the proper way to implement a class decorator in TypeScript?

How can a class decorator be implemented to accept only specific classes? A attempted solution is as follows: class Component { age: number; } function registerComponent(name: string) { return <T extends Component>(constructor: T): T => { ...

typescript

The 'authorization' property is not available on the 'Request' object

Here is a code snippet to consider: setContext(async (req, { headers }) => { const token = await getToken(config.resources.gatewayApi.scopes) const completeHeader = { headers: { ...headers, authorization: token ...

javascripttypescriptexpress

utilize a modal button in Angular to showcase images

I am working on a project where I want to display images upon clicking a button. How can I set up the openModal() method to achieve this functionality? The images will be fetched from the assets directory and will change depending on the choice made (B1, ...

htmlangulartypescriptmodal-dialogassets

Tips for Preserving Texture Resolution in Three.js While Adjusting Mesh Scale

I'm currently immersed in a Three.js project that involves a mesh object adorned with a texture from a 64x64 PNG file. Dilemma: Whenever the dimensions of the mesh object are modified, the texture ends up being stretched in both height and width, re ...

imagethree.js2dmeshtexture-mapping