Issues with data texture rendering in the most recent iteration of the third version

I am experiencing a problem with my code that renders a static bitmap in three js. It was working fine in version 110 but stopped working in version 147. I have checked the changelog to see if there were any differences but couldn't find anything.

The data I am passing to the method is a simple array of integer values representing grey-scale bitmap pixels:

data.length === width*height and 0 < data[i] < 255

renderBitmap(data: Uint8Array, width: number, height: number): void {

    const camera = new PerspectiveCamera(45, width / height, 0.1, 10000);

    const texture = new DataTexture(data, width, height, LuminanceFormat);
    texture.flipY = true;

    const material = new MeshBasicMaterial({ map: texture });
    const geometry = new PlaneGeometry(width, height);
    const plane = new Mesh(geometry, material);

    this._dispose(ImageDataIdentifier.BITMAP);
    this.scene.add(plane);

    camera.position.z = width / (2 * Math.tan(MathUtils.degToRad(camera.fov / 2))) / camera.aspect;

    this.renderer.setSize(width, height);
    this.renderer.render(this.scene, camera);
  }

Answer №1

Your code is facing two important issues:

  • It's crucial to make sure that the needsUpdate is set to true once the DataTexture has been established, as pointed out by @prisoner849 in the comments.
  • Additionally, it's not possible to utilize THREE.LuminanceFormat with WebGL 2. If you require a grayscale texture, you must either expand your data to RGBA or opt for using THREE.RedFormat and only sample the red channel within the shader. The latter solution may not be ideal for your situation since you are utilizing MeshBasicMaterial rather than a customized shader.

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

Adding a Unique Variant to Material-UI Component in React/ Typescript

I am currently working on creating a customized component inspired by Material-ui components but with unique styles added. For instance, the Tab component offers variants such as ["standard","scrollable","fullWidth"], and I want to include 'outline ...

Retrieve an enumeration from a value within an enumeration

In my coding project, I have an enum called Animals and I've been working on a function that should return the value as an enum if it is valid. enum Animals { WOLF = 'wolf', BADGER = 'badger', CAT = 'cat', } cons ...

Efficiently sending data to Service Bus from an HTTP-triggered function

How can I link the output to service bus? I've configured an out binding in my Azure function: { "queueName": "testqueue", "connection": "MyServiceBusConnection", "name": "myQueueItem", "type": "serviceBus", "direction": "out" } I started ...

Angular fails to include the values of request headers in its requests

Using Django REST framework for the backend, I am attempting to authenticate requests in Angular by including a token in the request headers. However, Angular does not seem to be sending any header values. Despite trying various methods to add headers to ...

Utilize Knex to retrieve data from the req.query

express and knex have been giving me some trouble; I am struggling to get this endpoint working using req.querys (response from express), even though it worked fine when I used req.params. Express: app.get(`/actor`, async (req: Request, res: Response) =&g ...

Allow users to access the right-click menu even when utilizing OrbitControls

When working with Three.js, my goal is to allow the user to save the canvas by enabling the context menu when they right-click on the image, all while using OrbitControls. Turning off OrbitControls with controls.enabled = false; brings back the right-clic ...

In TypeScript, what is the format in which the final type result of a generic utility type is shown?

After utilizing the provided code, I have encountered an issue with retrieving the ultimate type of type A in the editor. Despite my efforts, the editor persistently showcases the composite form of the generic utility, complicating the process of verifyi ...

Connecting a hybrid/web client application to established remote web services outlined through a set of WSDL specifications

Summarizing the Problem I am faced with the task of integrating a mobile hybrid application, likely built on Ionic, that will need to indirectly consume several SOAP web services. My goal is for the TypeScript client in the mobile app to have knowledge of ...

Typesafe-actions for defining typings of async actions reducers

I'm currently facing a minor issue while using createAsyncAction from the library typesafe-actions (Typesafe Actions) and correctly typing them for my reducer function Below is an example of the action being created: export const login = createAsync ...

What are the steps to integrate TypeScript into JavaScript code?

How can I import a TypeScript class in a Node CommonJS JavaScript file? When using mongoose in my TypeScript code, I typically do the following: // user.model.ts export const UserModel = model<User>('User', schema); In my JavaScript code: ...

Leverage the variable from one function in a different function within Three.js using Javascript

After loading an obj file using three.js, I attempted to obtain the 'X' position of its vertices and save it in a variable named 'pos' inside the objloader function within the init() function. My goal was to access this variable's ...

Encountering Problem **Issue: Invalid hook call. Hooks are intended to be used only within the body of a function component. **

i am facing an issue with Material UI in my ReactJS app. Without the below code (Component), my app works fine, but when I try to use it, I encounter an error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component.. ...

Steps for linking a three-dimensional line to the boundary of a character illustration

In my 3-D scene, I have a Sprite that displays text. Currently, there is a 3-D Line connecting the sprite to a point on the model. The end of the line touching the sprite has the same coordinates as the sprite itself and touches the center of the sprite. ...

module 'next/router' cannot be located or its associated type declarations are missing

Running into some issues with my NextJS application. An unusual error message is appearing, even though my code is functioning smoothly without any errors. import { useRouter } from 'next/router'; // Cannot find module 'next/router' or ...

What causes TypeScript to malfunction when using spread in components?

What is the reason for typescript breaking when props are sent to a component using a spread statement? Here's an example code snippet: type SomeComponentProps = Readonly<{ someTitle: string }> const SomeComponent = ({ someTitle }: SomeCompo ...

The attribute 'limitTags' is not present in the type 'IntrinsicAttributes & AutocompleteProps'

The Versions of Material UI and Lab I am Utilizing "@material-ui/core": "^4.8.3", "@material-ui/lab": "^4.0.0-alpha.44", Visit the component here Snippet of My Code <Autocomplete multiple limitTags={2} id="multiple-limit-tags" ...

Transform JSON into a TypeScript interface with a specialized Date method

Within my Angular 7 project, there is a Post Model defined as follows: export interface PostModel { id: number; created: Date; published: boolean; title: string; } I have implemented an Angular service method aimed at retrieving posts: public g ...

Can TypeScript convert JavaScript files automatically using a compiler?

Is there a way to use TypeScript files like this? <script type="text/typescript"> // ... </script> I came across https://www.typescriptlang.org/play/index.html, which can compile TypeScript. What compiler does this website use? I tried ...

Instructions for designing a Loading Indicator or Progress Bar within the App Directory of NextJS

Having built a substantial web application using NextJS 13, I initially utilized the Pages Router. However, as I neared completion of the website, I decided to make the switch to the App Directory. The primary motivation behind this migration was not just ...

The type 'Readonly<Ref<Readonly<any>>>' does not have the property 'forEach' available

Having an issue with state management in Vue3 (Pinia) using the Composition API. I successfully retrieved an array called countryCodes and now I want to copy all items from this array into another array called countries defined in the state. However, whe ...