Creating personalized features on Three.js models: Geometry's custom attributes

Question

Creating personalized features on Three.js models: Geometry's custom attributes

I have been grappling with an issue while using Three.js. I am trying to pass a custom attribute to my shader, which needs frequent updates. The shader is set as a ShaderMaterial for my mesh. However, the problem I am facing is that Three.js has recently changed how it handles attributes. Instead of being in the material, they are now linked to the geometry. Unfortunately, it seems that a standard geometry cannot accommodate custom attributes, leaving me in a bit of a predicament as I had been relying on its convenience. While attempting to use BufferGeometry, I encountered confusion and frustration when trying to correctly map my constantly updating UVs. Is there an alternative approach to BufferGeometry for implementing custom attributes? Or perhaps a less preferable method to accurately apply my UVs? And why can't a regular geometry support custom attributes?

javascript three.js shader

Answer 1

Answer №1

If you convert your geometry to a buffer geometry, you can easily set custom attributes while still benefitting from the advantages of both options. This approach will eliminate any hassle of dealing with buffergeometry uvs, as it seems to be what you are inquiring about. The uvs can simply be passed over.

For example:


var bufferGeometry = new THREE.BufferGeometry().fromGeometry( originalGeometry );

Answer 2

If you convert your geometry to a buffer geometry, you can easily set custom attributes while still benefitting from the advantages of both options. This approach will eliminate any hassle of dealing with buffergeometry uvs, as it seems to be what you are inquiring about. The uvs can simply be passed over.

For example:


var bufferGeometry = new THREE.BufferGeometry().fromGeometry( originalGeometry );

Creating personalized features on Three.js models: Geometry's custom attributes

Answer №1

Similar questions

Getting parameter names (or retrieving arguments as an object) within a method decorator in TypeScript: What you need to know

What is the best way to store JSON data in the state of a ReactJS application?

Jquery failing to append existing values into the DOM

tips for choosing an element using getByTestId that matches a particular value in react-testing-library

Concealing a message within a section that has been minimized to a width of 0

Is there a way to automatically populate an AngularJS input field?

Checking for valid zip code using a regular expression in JavaScript

Guide on organizing an array of objects by the sub-part of their property values

The JSON data rendered by Angular is causing disturbance

Error in Angular Universal: KeyboardEvent is not defined

Guide to incorporating a jade file into a node.js application after executing an Ajax request

Should code in Vuejs be spread out among multiple components or consolidated into a single component?

Exploring JS Pattern Matching across Two Distinct Data Sources

Using the ng-repeat directive along with the string replace expression allows for dynamically

Meteor: Incorporating New Fields when Creating an Account

I am unsure of the timestamp format for the value 1522899000000. Can it be used in both Ionic and AngularJS? And how would one go

Building a Loading Bar with Two Images Using JavaScript and CSS

I encountered a NextJS error while trying to implement getStaticProps(). Can someone help identify the issue at hand?

The Lightgallery plugin is creating three duplicates of the slides

Searching with jQuery UI Autocomplete