Exploring the world of shaders through the lens of Typescript and React three fiber

Looking to implement shaders in React-three-fiber using Typescript. Shader file:

import { ShaderMaterial } from "three"
import { extend } from "react-three-fiber"

class CustomMaterial extends ShaderMaterial {
  constructor() {
    super({
      vertexShader: `...`,
      fragmentShader: `...`,
      uniforms: [...]
    })
  }
}

extend({ CustomMaterial })

and the component file:

<mesh
  key={el.name}
  material={el.material}
  receiveShadow
  castShadow
>
  <bufferGeometry attach="geometry" {...el.geometry} />
  <customMaterial attach="material" />
</mesh>

Encountering an error message:

Property 'customMaterial' does not exist on type 'JSX.IntrinsicElements'.

typescriptreact-three-fiber

Answer №1

Give this a shot:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      customMaterial: ReactThreeFiber.Object3DNode<CustomMaterial, typeof CustomMaterial>
    }
  }
}

Don't forget to include the following in your imports as well:

import { extend } from 'react-three-fiber'
...
extend ({ CustomMaterial })

Answer №2

If you're looking to include something other than a custom material, consider using ReactThreeFiber.Object3DNode.

In my own experience with trying to get OrbitControls to function properly, I found success using the method outlined below:

import { extend } from '@react-three/fiber';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

declare global {
    namespace JSX {
        interface Intrinsicelements {
            orbitControls: ReactThreeFiber.Node<OrbitControls, typeof OrbitControls>;
        }
    }
}

extend({ OrbitControls });

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

What is the best way to retrieve the dataset object from a chart object using chart.js in typescript?

Currently, I am facing a challenge in creating a new custom plugin for chart.js. Specifically, I am encountering a type error while attempting to retrieve the dataset option from the chart object. Below is the code snippet of the plugin: const gaugeNeedle ...

typescriptchart.js

What is the method for storing a JSON object path in a variable for use in a template?

Trying to fetch data from a lengthy path has proven challenging for me. I attempted to store the path in a variable and incorporate it into the template, but encountered some issues. Could someone assist me with this? Here is what I have tried: My store ...

typescriptangular5mustache

How can I display the top 5 data results after subscribing in Nativescript?

Utilizing this function allows me to retrieve all my data from the web service. public data: Data[]; getall() { this.ws.getalldata().subscribe( data=> { this.data= data; } ); } Here is a ...

angulartypescriptfilternativescript

Encountering a Typescript issue with mongoose

Working with node.js and various email addresses, I encountered a compile error: TS2345: Argument of type '(error: any, document: any) => void' is not assignable to parameter of type '(err: any) => void'. This error occurs at ...

node.jsmongodbexpressmongoosetypescript

What is the process for calculating a class property in typescript?

If I were writing this in JavaScript, it would look like: function a(b,c) {this.foo = b; this.bar = c; this.yep = b+c} // undefined b = new a(1,2) // a {foo: 1, bar: 2, yep: 3} However, I've been struggling to achieve the same in TypeScript. None of ...

angularjsangulartypescript

What is the best way to inform TypeScript when my Type has been altered or narrowed down?

In my application, I have a class that contains the API code: export class Api { ... static requestData = async ( abortController: React.MutableRefObject<AbortController | null> ) => { // If previous request exists, cancel it if ...

reactjstypescriptaxios

How should one approach working with libraries that do not have type definitions in TypeScript?

My current situation involves working with libraries that are untyped and resulting in warnings. I am curious about the best approach to address this issue - should I adjust configurations, use tslint ignore on a line-by-line basis, or possibly create du ...

typescripttypescript-typingstypescript2.0

Tips for sending data returned asynchronously from an Observable in Angular from a Child component to its Parent

I am facing a challenge passing Async data from child to parent component. When I try to access console.log(this.values) within the ngAfterViewInit() method in the parent component's HTML page load, it returns an empty value. However, upon clicking th ...

angulartypescriptangular-componentsviewchildasyncdata

Angular Inner Class

As a newcomer to Angular, I have a question about creating nested classes in Angular similar to the .NET class structure. public class BaseResponse<T> { public T Data { get; set; } public int StatusCo ...

javascript.netangulartypescriptclass

Creating a TypeScript class with methods to export as an object

Just dipping my toes into Typescript and I've encountered a bit of a challenge. I have a generic class that looks like this: export class Sample { a: number; b: number; doSomething(): any { // return something } } My issue ari ...

javascripttypescript

The TypeScript script does not qualify as a module

Just starting out with TypeScript and encountering a simple issue. I'm attempting to import a file in order to bring in an interface. Here's an example: Parent: import { User } from "@/Users"; export interface Gift { id: number; ...

javascripttypescript

Angular 4 fetches the number obtained from a GET request

In my spring-boot back-end app, I have defined a query as shown below: @Query("SELECT COUNT(*) " + "FROM Foo " + "WHERE name = :name and surname = :surname ") Integer countByNameAndSurname(@Param("name") String name, @Param("surnam ...

angulartypescriptget

reading an array of objects using typescript

Trying to retrieve an object from an array called pVal. pVal is the array that includes objects. I am attempting to obtain the value of "group" based on the id provided. For instance, if the id is equal to 1, it should display "VKC". Any assistance woul ...

angulartypescript

Angular obscured the referencing pointer

After updating Angular, I encountered issues with my code. Previously, the following code worked fine: @Component({ templateUrl: './some.component.html', styleUrls: ['./some.component.scss'] }) export class SomeComponent { ... p ...

angulartypescriptd3.js

The package.json entry for "abc-domains" is not functioning correctly even though it is set to "latest" version

Unique Scenario Imagine there's a package called xyz-modules that I've developed. The package.json file in my project looks like this: ... "devDependencies": { "@company/xyz-modules": "latest", ... } ... After ...

typescriptnpmvuejs2package.json

Struggling with implementing Angular and TypeScript in this particular method

I'm dealing with a code snippet that looks like this: myMethod(data: any, layerId: string, dataSubstrings): void { someObject.on('click', function(e) { this.api.getSomething(a).subscribe((result: any) => { // ERROR CALL 1. It ...

javascriptangulartypescript

Using Typescript to Integrate node-gtf JavaScript Library into an Express Application

Would like to utilize a Typescript Express Server for integrating GTFS data with the help of the GTFS library (https://github.com/BlinkTagInc/node-gtfs) current version is ("gtfs": "^3.0.4") This is how I am importing the library imp ...

node.jstypescriptexpressgtfs

On MacOS, VSCode encounters an issue with updating TypeScript imports when files are moved

I recently started transitioning a project from a mixed JS/TS setup to fully TypeScript. The project's server is hosted on AWS Lambda, and I have a tsconfig file at the root level as well as one in the /lambdas directory. One issue I've encounte ...

typescriptvisual-studio-code

Is it possible to refresh the component view using the service?

I am interested in developing a NotificationService that will be utilized to showcase a notification from another section. My inquiry is, how can I refresh the view of a component using a service? My ultimate goal is to have the capability to embed a comp ...

angulartypescript

Is there a way to specify this component without it being nested within the parent element?

So I have this component nested within another one const selectColumn = useMemo<ColumnDef<Person>[]>( () => [ { id: "select", header: ({ table }) => ( <IndeterminateCheckbox {.. ...

reactjstypescript