Calculating collision between circles in Three.js

I've been working on incorporating circle to circle collision for a pool game, aiming to make the balls bounce apart correctly upon impact. Despite trying various tutorials and scouring multiple questions on stackoverflow, I haven't found a solution that works for me.

Specifically, my question is: how can I implement circle to circle collision that functions effectively in these scenarios? 1: A moving ball colliding with a stationary ball. 2: A moving ball colliding with another moving ball

One of the tutorials I experimented with can be found here.

The current code I'm using somewhat works but has noticeable glitches:

function newCollide(ball1, ball2)
{
    a = ball1.position.x - ball2.position.x;
    b = ball1.position.z - ball2.position.z;
    ab = Math.sqrt(((a * a) + (b * b)));
 
    if(ab <= 1.1)
    {
        console.log("collision");
        ball2.speedX = ball1.speedX;
        ball2.speedZ = ball1.speedZ;
        ball1.speedX *= 0.3;
        ball1.speedZ *= 0.3;

        ball1.position.x += ball1.speedX;
        ball1.position.z += ball1.speedZ;
        ball2.position.x += ball2.speedX;
        ball2.position.z += ball2.speedZ;
    }
}

Any assistance would be greatly appreciated.

Answer №1

When two identical, stationary disks collide, their velocities are simply swapped.

For accurate collision tests, make sure the initial movement of the disks is directly towards each other to prevent unwanted fluctuations.

Position remains constant during collision; therefore, updating position should be omitted entirely.

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

The NextJS application briefly displays a restricted route component

I need to ensure that all routes containing 'dashboard' in the URL are protected globally. Currently, when I enter '/dashboard', the components display for about a second before redirecting to /login Is there a way to redirect users to ...

Issue arises when implementing Ajax with a straightforward conditional statement

After spending hours on a seemingly small and trivial problem, I am feeling frustrated. I have been toiling away, trying different methods, rearranging variables, and experimenting with various approaches to solve it. The issue lies within the generateSpe ...

What is the best way to include an external Javascript file from a different server?

Below is the Express code snippet I have for the GET method: const express = require('express'); const app = express(); app.get('/', function(req, res) { res.sendFile(path.join(__dirname, '../public/index.html')); }); app ...

Merge rxjs streams, identify modifications, and yield a single result

In the context of using Angular with .net Core WebApi, let's consider the development of a time management application designed to monitor task durations. The user initiates a task on the front end which triggers a timer displaying elapsed time. The ...

Struggling with resizing a webcam feed to fit the dimensions of the iframe container?

I'm facing a challenge embedding a camera feed into a webpage that needs to display manual focus and servo controls. The issue lies in the content scaling within the iframe. Even though the iframe boundary resizes according to the window's width ...

Adjust the positioning of an HTML element in relation to another to prevent elements from moving erratically

Currently, I am working on a website where I have implemented some javascript to achieve a 'typewriter' effect for the prominent middle-centered text displayed below. The script is designed to animate the text by typing it letter by letter in a f ...

The imported mesh is failing to interact with other objects - Babylon.js

I'm currently facing an issue while trying to configure a 3D environment in Babylon.js. During testing, I used meshes generated through code. However, we aim to utilize blender models for the actual environment. When I import a mesh using the scene l ...

Ajax call fails to trigger upon change

Currently, I am focusing on creating an HTML table with a form that contains a select element offering options for ALL and Biscuits. Initially, the table populates correctly upon loading. However, I am facing an issue when attempting to trigger an AJAX ca ...

Determine the position of a particular td element within its parent tr using jQuery

Can someone help me with a jQuery solution to identify the descendant number (below 3) within a specific column in a table, as shown in the example below? $(".colclass").click(function (e) { //code to find the td descendant number to tr, whic ...

Reorganizing array of objects in JavaScript

Currently, I am tackling a challenge within a ReactJS application. My task involves extracting JSON data related to various products and restructuring this information for the purpose of categorization and displaying it accordingly. Despite my attempts wi ...

In Next.js, encountering an error when using canvas drawImage

I am attempting to upload a local image onto a canvas element, but I keep encountering an error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement ...

What is the process for rotating a 3-dimensional point?

I am currently working on developing a 3D renderer using JavaScript. Rendering cubes is going well, but I am looking to implement a rotation function for each cube. The goal is to rotate the x/y/z (pitch, roll, yaw) of every cube around its own axis. Th ...

Understanding the process of configuring Quasar Language in SSR Mode using route parameters

Is there a way to incorporate Quasar Language Packs while utilizing this specific routing method and SSR mode? const routes = [ { path: '/:locale?', beforeEnter: localeNavGuard, children: [ ... ] } ] ...

The functions.php file is failing to execute the JavaScript files located in the js folder

I've been attempting to incorporate a JS accordion into my Wordpress blog, but I seem to be encountering issues with the accordion.js file not loading through the functions.php file. Interestingly enough, when I manually add the js code in the header ...

Is it possible to utilize an if statement to select a specific Bootstrap modal?

How can I make a modal appear when the user clicks select? The first page has radio buttons (e.g. oneway, twoway), and I want the second page to display different fields based on which radio button is selected. Can I use an if statement for this? If so, ...

When employing autoForm in Bootstrap 4, where is the "form-control" class established?

Currently, I am working on developing a personalized autocomplete type feature for the afQuickfield in my Meteor project. The main issue I am facing is that when I specify the type="autocomplete" on the afQuickfield, the class="form-control& ...

`Back and forward function of pushState in history`

After successfully implementing ajax loading on all pages of my website, I encountered a challenge with the browser's back and forward buttons. Implementing the back button was straightforward: $(window).on('popstate', function(e) { get ...

Perform two functions in order using jQuery within a loop

Just dipping my toes in the waters of Javascript. Please go easy on me :) I'm working with two functions that both involve making jQuery requests within for loops. Here's an example: function x(y,z) { for (var i = 0; i < y; i ++) { $.a ...

Display and conceal DIV Class from separate webpage document

I currently have two PHP files: index.php show.php - index.php <ul> <li><a href="show.php?id=1">Show Div 1</a></li> <li><a href="show.php?id=2">Show Div 2</a></li> <li><a href="show ...

Sending parameters with the Link component in React

I am working on an index component that is set on the '/' route. Within this component, there is a Link element. Despite successfully redirecting to /search upon clicking the link, I am unsure how to pass parameters with the link and access them ...