Creating a bouncy 3D sphere with THREE.js

Hello everyone, I am just getting started with THREE.js and have a few questions...

I'm wondering if anyone can assist me with implementing a feature where the ball gets squished when it contacts the border and changes direction? Perhaps even scaling the ball based on the angle of contact to make it appear more realistic.

Here is some code I've been working on: Creating a rotating 3D sphere with velocity

Code reference from this topic:

THREE.js - moving a 3D ball with rotation

for (var y = 0; y < 16; y++)
    for (var x = 0; x < 16; x++)
      if ((x & 1) != (y & 1)) ctx.fillRect(x * 16, y * 16, 16, 16);
  var ballTex = new THREE.Texture(canv);
  ballTex.needsUpdate = true;

Apologies for any language errors in my writing!

javascriptthree.js3dphysics

Answer №1

If a ball is in motion when it encounters an edge, achieving a realistic squish effect using the .scale attribute would prove to be quite challenging as it only alters its dimensions along specific axes (x, y, or z).

To authentically replicate this behavior, employing a physics engine to detect collisions and adjust the geometry accordingly is recommended. An illustrative example of this can be found on the Three.js website through this link. Delving into its source code can provide further insights. It may be noted that Ammo.js serves as the underlying physics engine for this demonstration, necessitating familiarity with the Ammo API for making any customizations.

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

Calculating Future Dates in JavaScript by Adding Days

I am looking to add 20 days to the current date and present the output in the mm/dd/yyyy format. Presently, with today being 05/15/2014, the result produced is 05/35/2014, which is clearly an invalid date. var currentYear = new Date(); alert((currentYea ...

javascriptdate

Guide on exporting a dynamically imported class instance using ES6 modules in NodeJS

Currently, I am engrossed in a book on NodeJS that illustrates a simple web application example. In this example, the prerequisite is to have various data store classes housed in their respective modules and dynamically selecting the data store by configur ...

javascriptnode.jsexpressecmascript-6

The .join() method isn't producing the expected result when trying to concatenate an array that is nested within an object inside

Currently, I am loading a file, extracting information from it, storing the data in an object, and then adding that object to an array. One of the attributes of the object is a 'sequence': [] key-value pair. After storing a DNA sequence in the &a ...

javascriptarraysobjectjoin

The JSON output from the gapi (Google Analytics) array in PHP is not displaying any values

I've been utilizing the gapi class within a CodeIgniter website. The implementation I'm using is based on this resource, which returns an array that functions perfectly. To pass this array to my JavaScript, I've been attempting the following ...

phpjavascriptgoogle-analyticsjson

How can you modify a specific field using a modal form in Django?

Managing a form to track the entry and exit times of individuals in different areas can sometimes lead to discrepancies. For instance, if someone forgets to "leave" an area before entering a new one, a prompt is shown asking for an "estimate" of the time t ...

javascriptpythonhtmldjangomodal-dialog

Utilizing Google's Text-to-Speech Service to Download Audio Files on the Front-end

I have a specific need to transform text into audio by utilizing Google Text to Speech. Currently, I am implementing Nodejs to convert the text into an audio file and aiming to transmit the audio result to the user interface. The NodeJS code snippet is a ...

javascriptnode.jsvue.jsarraybuffergoogle-text-to-speech

Obtain the details of a selected item in a list by tapping on it using Natives

I am wondering how to retrieve the context of a tapped item in a listview. For example, if there are three items in the list, how can I determine that the second item was clicked and access the data related to that item in the observable array? For instan ...

javascriptnativescript

How can you personalize the background color of a Material-UI tooltip?

Is there a way to customize the hover tooltip with a "? icon" for users providing input guidance in a text field? I prefer the design to have white background with grey text and larger font size, as opposed to MUI's default style which is grey with wh ...

javascriptreactjsmaterial-uitooltip

The functionality of the tree-view feature in NodeJs is experiencing glitches

My attempt at creating a Tree-view has hit a snag. The collapse icon is not being displayed as expected. Here is the code snippet I tried: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootst ...

javascriptcssbootstrap-4treeview

Sending parameters and obtaining results with AngularJS

I'm encountering an issue. I need to trigger a function with arguments and receive results upon clicking on a .md-button with ng-click. Here's the HTML: <md-button class="md-raised md-primary" ng-click="setreg.register({{reg.email}},{{reg.pa ...

javascriptangularjs

Is there a way to verify the react-query queries prior to running them?

Consider this scenario where I have a query to retrieve a list: const list = useQuery('list', fetcher); However, I require a pre-checking function before react-query triggers the execution. Something like this: const appQueryClient = new QueryCl ...

javascriptreactjsreact-query

Extracting information from ul li div elements and saving it in JSON format

I have been pondering this issue for the past few hours and haven't been able to find a solution. Essentially, I have a list structured like this <ul class="list"> <li class="user"> <div class="name">Name</div> ...

javascriptarraysjsonconsole.lognightwatch.js

Can someone share tips on creating a stylish vertical-loading progress bar with a circular design?

Currently, I am working on developing a unique progress bar that resembles a glass orb filling up with liquid. However, due to its rounded shape, the traditional approach of adjusting the height does not produce the desired result (as illustrated in this f ...

javascriptjqueryhtmlcss

What is the best method to position a modal in the exact center of the screen?

Is there a way to position the modal at the center of the screen? I have tried implementing this HTML and JavaScript code. Interestingly, it works fine in Chrome console but fails when I try to refresh the page. $('.modal').css('top', ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible for npm to assist in determining the appropriate version of Primeng that is compatible with Angular 16 dependencies

While trying to add primeng to my project, I ran into an error message: npm i primeng npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

javascriptnode.jsangularnpmprimeng

Retrieve all populated fields on the second tier using Node.js and Mongoose

Do you have any insights to share on Node.js and mongoose? I've defined a mongoose schema and when I use findOne(), it returns a document with multiple elements under the "resource" key. Below is an example of how the document looks like: { "met ...

javascriptnode.jsmongodbmongoose

Angular 2 with a jssor slider that adjusts seamlessly to different screen

After following the guidance provided in this answer on incorporating jssor into angular2, I have implemented the following JavaScript code snippet in a file and referenced it in angular-cli.json. jssor_1_slider_init = function() { var jssor_1_op ...

javascriptangularjssor

Connecting to a specific mui-tab with react-router-dom

How can I link to a specific tab in my material ui-based tabs setup within a React application? I want to be able to navigate directly to a particular tab when landing on the page, but I'm struggling with integrating this functionality. Is there a way ...

javascriptreactjsreact-reduxreact-router-dom

Button is nested within a closing div causing it to trigger independently without affecting the parent

I have implemented a slideup and slidedown system with some fading effects, but I am encountering an issue with the slide up function. It doesn't seem to reset the display property back to none. For reference, here is a Fiddle link: Slide Up/Down Fid ...

javascriptjqueryajaxslidedownslideup

Tips for successfully integrating .dae files into three.js for online execution on a web browser

Hey everyone, I'm an HTML developer who has never worked with WEBGL technology before. I've been trying to figure out how to pass a .dae file into 'three.js' by searching through numerous websites, but I haven't been successful. C ...

javascriptthree.js