"Distort" the Surface of Points Mesh in Three.js

After importing a Mesh from a JSON File, I am showcasing my latest progress:

Take a look at my Project here

The object was originally exported from Blender as JSON, and I utilized its vertices to generate a geometry of Points (THREE.Points) (which significantly enhances its visual appeal)

Currently, I am exploring ways to add movement to the Points in order to make the "surface" appear more dynamic and alive. Ideally, it should have some subtle animation or motion like this example (excluding rotation):

Check out this animated Gif for reference

I have dismissed using displacementMap since it doesn't seem compatible with PointsMaterial (unless someone knows a workaround?).

Any suggestions or insights on how to achieve this effect? One thought I had was possibly morphing 2-3 objects, though unsure if this would be effective for a points mesh.

javascript three.js 3d effects

Answer №1

If you're looking to achieve a specific effect, consider using morph target animation, also known as vertex morphing. Check out this example in three.js that demonstrates how morph target animations can be implemented with points.

For more information and resources on vertex morphing, there is plenty of literature available to help you grasp the technique. I recommend creating your animations in Blender, exporting the model to glTF, and then loading the file using GLTFLoader in your application, similar to how it's done in the provided example.

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 reason for WordPress theme CSS and JS files loading after the head tag?

I'm experiencing an issue where my Wordpress theme's CSS and JS files are loading after the head tag. Additionally, when I view the source in Firefox, they are showing up in red, indicating incorrect markup. Can anyone help me figure out what&ap ...

javascript css wordpress linker-errors

Troubleshooting Problem in Coursera's AngularJS Week 3 Exercise 4

Here's the issue I'm facing: After launching the index page with 'gulp watch', there's nothing visible on the screen. An error appears: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.12/$injector/modulerr?p ...

javascript html angularjs

How can you select a variable using Jquery?

$.get('sampleurl.com',function(result){ target = $(result #specificID).attr("href") // Can someone help me with this??? }) I fetch content from an external website using $.get and store it in the result variable, now I'm trying to figure ou ...

javascript jquery ajax

Update DataTable 1.9 while preserving existing rows

I'm currently using dataTables js version 1.9 Periodically, an ajax call is made to the server to retrieve information that should be displayed in a table every 60 seconds or so. Although I can easily clear and repopulate the table like this: $(id) ...

javascript jquery ajax datatable

I'm looking to use JavaScript to dynamically generate multiple tabs based on the selected option in a dropdown menu

I'm reaching out with this question because my search for a clear answer or method has come up empty. Here's what I need help with: I've set up a dropdown titled 'Number of Chassis'. Depending on the selection made in this dropdown ...

javascript html css

What are the best techniques for distinguishing the selected selector in jQuery?

$('#select_id1, #select_id2, #select_id3').change(function() { // Depending on which select element has changed, 'str' should be set accordingly. // For '#select_id1', 'str' should be equal to 'select_id ...

javascript jquery

Is it possible to retrieve local variable JSON arrays using ajax/getJson()?

When starting a project without a database or data source, I often create json arrays in a *.js file to populate screens until the data modeling or database creation is complete. I am trying to figure out how to write an ajax/getJson() function to access ...

javascript jquery ajax

Combine similar JSON objects into arrays

I'm working with a dataset returned by a library, and it's structured like this: var givenData = [{"fName": "john"}, {"fName": "mike"}, {"country": "USA"}] My goal is to group the "fName" values together and add '[]' to achieve the fo ...

javascript angularjs

Express Module Paths Failing to Function Properly

When I first started building my routes, I had everything in one api.js file. However, I realized there might be a better approach, so I did some research online to see how others handle it. After following a few tutorials, I decided on a new layout with s ...

javascript node.js express routes

Top tips for seamless image transitions

Currently working on a slideshow project and aiming to incorporate smooth subpixel image transitions that involve sliding and resizing, similar to the Ken Burns effect. After researching various techniques used by others, I am curious to learn which ones ...

javascript canvas css slideshow transition

Choosing an asp.net RadioButton using javascript in the presence of autopostback

Here is the scenario: There are multiple radio buttons with a specific GroupName and AutoPostBack="true". For the purpose of styling, the radio button is hidden using JavaScript and the click on its container (a td) is managed through JavaScript. When th ...

javascript asp.net html radio-button

Altering the appearance of an input field upon submission

https://jsfiddle.net/3vz45os8/7/ I'm working on a JSFiddle where I am trying to change the background color of input text based on whether the word is typed correctly or incorrectly. Currently, it's not functioning as expected and there are no e ...

javascript html css onclick jsfiddle

Unable to access frame: Error - Unable to retrieve 'add' property from undefined

I am working on customizing the chatbot functionality for my website built with Nuxt.js. I want the chatbot to display on certain pages while remaining hidden on others. Unfortunately, I encountered an issue when trying to hide it on specific pages. To im ...

javascript css vue.js dom nuxt.js

Ensure that the Jquery inview element functions both upon initial load and as the user scrolls

I've been working on implementing the inview function by adding and removing a class to an element, but for some reason it's not functioning as expected. Can anyone offer some assistance with this? http://jsfiddle.net/zefjh/ $.fn.isOnScreen = f ...

javascript jquery scroll

How can I ensure that a radio button remains checked when selecting a disabled option in Internet Explorer?

Encountering an issue in various versions of Internet Explorer (9,10,11): I have a group of radio buttons that need to be disabled but still submitted with the form. To achieve this, I devised a method using the following functions: var doNothing = functi ...

javascript jquery html css internet-explorer

JavaScript class with callback function commonly used

I am looking to create a JavaScript class that can register multiple functions to run with a common callback. Each registered function should run asynchronously, and once they have all completed, the specified callback function should be executed. In addi ...

javascript ajax angularjs callback

Is there a way to consistently trigger the browser.webRequest.onBeforeRequest event in Mozilla Firefox when it is launched via a link?

Hello knowledgeable individuals. I am unable to solve this issue on my own. Here is the add-on I have created: 1) manifest.json: { "manifest_version": 2, "name": "Example", "version": "1.0", "description": "Example", "permissions": [ "tabs" ...

javascript firefox firefox-addon-webextensions

Express.js Server Side Rendering - GET request for '/json/version/'

I have a running express server that pre-renders my react application. The routes file matches the HomeContainer to the base route / and all other routes match to the page not found. import HomeContainer from 'containers/home-container/home-container ...

javascript json node.js reactjs express

Carousel Pagination: Using Titles Instead of Numbers

I am currently working on implementing a carousel pagination using the Caroufredsel plugin. I am looking to create unique custom Titles for each slide in the pagination, rather than using default numbers. My goal is to have completely different Titles fo ...

javascript pagination carousel caroufredsel

When using React hooks forms, setting default values from a reduced array does not automatically populate the form. However, manually entering the same object into the form does

As I work with react hooks forms, I am facing a challenge in setting default values for a form generated by mapping over an array to output the inputs. After reducing the array into an object format like {name0:"fijs",name1:"3838"...}, manually passing thi ...

javascript reactjs state reduce react-forms

JavaScripter Q&A