Is there a way for me to include BufferGeometryUtils.js into three.d.ts declaration file?

I have come across BufferGeometryUtils in the example directory of three.js, which allows for converting existing geometries to buffer geometry without the need to refactor all my code for performance improvement. I am wondering how I can declare this function in three.d.ts file.

/**
    * @author spite / http://www.clicktorelease.com/
    * @author mrdoob / http://mrdoob.com/
    */
    
    THREE.BufferGeometryUtils = {
    
    fromGeometry: function geometryToBufferGeometry( geometry, settings ) {
    
        if ( geometry instanceof THREE.BufferGeometry ) {
    
            return geometry;
    
        }
    
        settings = settings || { 'vertexColors': THREE.NoColors };
    
        var vertices = geometry.vertices;
        var faces = geometry.faces;
        var faceVertexUvs = geometry.faceVertexUvs;
        var vertexColors = settings.vertexColors;
        var hasFaceVertexUv = faceVertexUvs[ 0 ].length > 0;
    
        var bufferGeometry = new THREE.BufferGeometry();
    
        bufferGeometry.attributes = {
    
            position: {
                itemSize: 3,
                array: new Float32Array( faces.length * 3 * 3 )
            },
            normal: {
                itemSize: 3,
                array: new Float32Array( faces.length * 3 * 3 )
            }
    
        }
    
        var positions = bufferGeometry.attributes.position.array;
        var normals = bufferGeometry.attributes.normal.array;
    
        if ( vertexColors !== THREE.NoColors ) {
    
            bufferGeometry.attributes.color = {
                itemSize: 3,
                array: new Float32Array( faces.length * 3 * 3 )
            };
    
            var colors = bufferGeometry.attributes.color.array;
    
        }
    
        if ( hasFaceVertexUv === true ) {
    
            bufferGeometry.attributes.uv = {
                itemSize: 2,
                array: new Float32Array( faces.length * 3 * 2 )
            };
    
            var uvs = bufferGeometry.attributes.uv.array;
    
        }
    
        var i2 = 0, i3 = 0;
    
        for ( var i = 0; i < faces.length; i ++ ) {
    
            var face = faces[ i ];
    
            var a = vertices[ face.a ];
            var b = vertices[ face.b ];
            var c = vertices[ face.c ];
    
            positions[ i3     ] = a.x;
            positions[ i3 + 1 ] = a.y;
            positions[ i3 + 2 ] = a.z;
    
            positions[ i3 + 3 ] = b.x;
            positions[ i3 + 4 ] = b.y;
            positions[ i3 + 5 ] = b.z;
    
            positions[ i3 + 6 ] = c.x;
            positions[ i3 + 7 ] = c.y;
            positions[ i3 + 8 ] = c.z;
    
            var na = face.vertexNormals[ 0 ];
            var nb = face.vertexNormals[ 1 ];
            var nc = face.vertexNormals[ 2 ];
    
            normals[ i3     ] = na.x;
            normals[ i3 + 1 ] = na.y;
            normals[ i3 + 2 ] = na.z;
    
            normals[ i3 + 3 ] = nb.x;
            normals[ i3 + 4 ] = nb.y;
            normals[ i3 + 5 ] = nb.z;
    
            normals[ i3 + 6 ] = nc.x;
            normals[ i3 + 7 ] = nc.y;
            normals[ i3 + 8 ] = nc.z;
    
            if ( vertexColors === THREE.FaceColors ) {
    
                var fc = face.color;
    
                colors[ i3     ] = fc.r;
                colors[ i3 + 1 ] = fc.g;
                colors[ i3 + 2 ] = fc.b;
    
                colors[ i3 + 3 ] = fc.r;
                colors[ i3 + 4 ] = fc.g;
                colors[ i3 + 5 ] = fc.b;
    
                colors[ i3 + 6 ] = fc.r;
                colors[ i3 + 7 ] = fc.g;
                colors[ i3 + 8 ] = fc.b;
    
            } else if ( vertexColors === THREE.VertexColors ) {
    
                var vca = face.vertexColors[ 0 ];
                var vcb = face.vertexColors[ 1 ];
                var vcc = face.vertexColors[ 2 ];
    
                colors[ i3     ] = vca.r;
                colors[ i3 + 1 ] = vca.g;
                colors[ i3 + 2 ] = vca.b;
    
                colors[ i3 + 3 ] = vcb.r;
                colors[ i3 + 4 ] = vcb.g;
                colors[ i3 + 5 ] = vcb.b;
    
                colors[ i3 + 6 ] = vcc.r;
                colors[ i3 + 7 ] = vcc.g;
                colors[ i3 + 8 ] = vcc.b;
    
            }
    
            if ( hasFaceVertexUv === true ) {
    
                var uva = faceVertexUvs[ 0 ][ i ][ 0 ];
                var uvb = faceVertexUvs[ 0 ][ i ][ 1 ];
                var uvc = faceVertexUvs[ 0 ][ i ][ 2 ];
    
                uvs[ i2     ] = uva.x;
                uvs[ i2 + 1 ] = uva.y;
    
                uvs[ i2 + 2 ] = uvb.x;
                uvs[ i2 + 3 ] = uvb.y;
    
                uvs[ i2 + 4 ] = uvc.x;
                uvs[ i2 + 5 ] = uvc.y;
    
            }
    
            i3 += 9;
            i2 += 6;
    
        }
    
        bufferGeometry.computeBoundingSphere();
    
        return bufferGeometry;
    
    }
    
    }
    

Answer №1

If you have the THREE.js definition from Definitely Typed already, you can enhance it by adding the BufferGeometryUtils as shown below:

declare module THREE {
    export class GeometryBufferUtils {
        fromGeometry(geometry, settings) : any;
    }
}

var bufferUtils = new THREE.GeometryBufferUtils();
var example = bufferUti

In this instance, I've expanded the existing THREE module declaration with a new class called GeometryBufferUtils. You can then define each method - including any pertinent type information.

I can't include the entire definition due to character constraints, but you can use this as a starting point and customize it as needed. You can also refine the definitions for tighter control (e.g., specifying types for parameters like this:

fromGeometry(geometry: THREE.BufferGeometry, settings) : THREE.BufferGeometry;

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

Acquiring the class function from a service which yields a model

Within my class called userName, I have defined properties that form a model when casting from json. Additionally, this class includes a simple function that returns the full Name: export class userName { firstName: string; lastName: string; g ...

Are auto-properties supported in TypeScript yet?

I've heard that properties in Typescript can be defined like they are in C# with automatic setters and getters. However, I have found it difficult to implement properties this way as the intellisense does not support such syntax in Typescript. I tried ...

Changing icons within an ngFor loop in Angular 2

Looking for a solution: How can I toggle icons using ngFor? Situation: I am using *ngFor to iterate through an array and display category names. When a day is clicked, I want to open an accordion and show category details (which I have already managed). O ...

Sort through the files for translation by utilizing a feature within Typewriter

I am looking to implement Typewriter in a project that involves translating many C# files into TypeScript using WebEssentials. Is there a way to configure the template so that only class files containing a specific attribute are translated in this mann ...

Change object values to capital letters

Upon retrieving myObject with JSON.stringify, I am now looking to convert all the values (excluding keys) to uppercase. In TypeScript, what would be the best way to accomplish this? myObj = { "name":"John", "age":30, "cars": [ { "name":"Ford", ...

Error in Angular compiler-cli: The namespace 'ts' does not contain the exported member 'ResolutionMode'

Currently working on a web application using Angular 16 in Webstorm. The application is still in the pre-release stage, with only minimal functionality completed so far. While editing with ng serve running to test changes as they were made, encountered an ...

Exploring the Power of Vercel Deployment: Crafting a Custom CORS Middleware for Your API

Recently, I have been testing different methods to avoid a CORS error in my upcoming app deployed on Vercel. The only solution that worked for me was manually setting the headers for each API request, as shown below: export default async function handler( ...

Retrieving information from a data file by implementing a GraphQL Apollo Server within a NextJS application route

Currently working with Next.js 14 (app route), React, and the GraphQL Apollo framework. I have a JSON file containing data saved locally that I'd like to display using the server API. How can I make this happen? Below is the JSON structure I need to r ...

Can someone please explain how to display a specific element from a JSON Array?

Is there a way to display only this specific part? /db/User_DataDb/61500546-4e63-42fd-9d54-b92d0f7b9be1 from the entirety of this Object obj.sel_an: [ { "__zone_symbol__state":true, "__zone_symbol__value":"/db/User_DataDb/61500546-4 ...

Ensuring type safety for functions with multiple definitions in TypeScript

The code provided above is prone to failure. TypeScript may mistakenly infer the return type as `string`, allowing you to use the `charAt` method on it even though the actual type is `number`. Is there a solution to enhance the code in a way that TypeScri ...

How can you make an IonPopover dynamically appear from a button with the perfect positioning?

I want to display a popover below a button when the button is clicked, similar to the example on the Ion docs page. However, I am having trouble implementing this in React as the code provided is only for Angular. Here is my current code: ... <IonButt ...

The object's key values were unexpectedly empty despite containing data

There's an issue with my object - it initially gets key values, but then suddenly loses them all. All the key values become empty and a message appears in the console for the object: "this value was evaluated upon first expanding. it may have ch ...

Should private members be kept confidential during program execution?

While Typescript's "private" members may not be truly private at runtime, traditional closures maintain the privacy of their members. Is there value in ensuring that private members remain private during runtime? ...

Looking for a JavaScript (Angular) event listener to trigger when closing pages and tabs

I am looking for an event that will only work when closing a page or tab, but should not be triggered when the page is refreshed. I am aware of the "beforeunload" event, but it also gets activated on page refresh. Below is the code snippet I am currently ...

Tips for extracting a keyword or parameters from a URL

I'm in the process of creating my personal website and I am interested in extracting keywords or parameters from the URL. As an illustration, if I were to search for "Nike" on my website, the URL would transform into http://localhost:3000/searched/Nik ...

Tips for incorporating a versatile arrow function as an interface property in Typescript within React JSX

I'm in the process of creating an interface PromptInput { key: string, title: string, customInput?: <T>(value: T, onChange: (newValue: T) => void) => React.ReactNode; } I need the types of value and newValue to match, but they can b ...

Incorporating Moralis into Ionic Angular with TypeScript

I'm currently developing an app using Ionic Angular (TypeScript) that will be compatible with both Android and iOS devices. I've decided to incorporate the Moralis SDK to establish a connection with the Metamask wallet. Here's a summary of ...

Employing ngModel in an option dropdown

I am having trouble passing an attribute from an API call to a submit function. I suspect it might have something to do with either the option select or how the input is being formatted. Encountering the error Error: No value accessor for form control wit ...

Having trouble getting collision events to trigger in ThreeJS when using the PhysiJS physics engine?

When an object falls and collides with the ground, an alert box should pop up displaying the message "Box just hit the ground". However, there seems to be an issue as the alert box is not being created upon collision. Additionally, no relevant JavaScript ...

Guide to developing a private shared Node.js module using TypeScript

I have a unique idea for a nodejs server service, consisting of: a REST API, and various asynchronous workers. My vision is to separate these components into different subnets and git repositories while still enabling them to access the same database en ...