How can we use THREE.js to make objects track other objects?

Currently, I am in the process of developing the PONG Game and I encountered an issue with making the computer play against the player. My goal is to have the computer follow the y-axis position of the ball, ensuring that both entities have distinct movement speeds. However, while the ball is moving correctly, I am facing difficulties in getting the computer to move at all within the game. The code snippet provided below is within the requestAnimationFrame() function.

If you would like to see an example of PONG, you can check out this link:

delta_t = 0.02;
t = t + delta_t;

// Computer should go up
if (computer.position.y < ball.position.y ) {
y_computer = computer.position.y;
vy_computer = vy_computer;
t = 0;
}

// Computer should go down
if (computer.position.y > ball.position.y  ) {
y_computer = computer.position.y;
vy_computer = -vy_computer;
t = 0; 
}
computer.position.set(-370, y_computer + vy_computer * t , 40);

You can access the site I am referring to for my project here:

Answer №1

Understanding this concept involves verifying whether the ball and the "computer" are moving in the same direction. If not, the position of the "computer" needs to be checked to see if it falls within a certain range of the ball's position with a margin of error referred to as "epsilon". If the "computer" falls within this range, its direction needs to be reversed.

  if (Math.sign(direction_follower.z) != Math.sign(direction.z)){
    if (follower.position.z <= origin.position.z + epsilon &&
        follower.position.z >= origin.position.z - epsilon)
        direction_follower.negate();
  }

Check out this jsfiddle example for more clarity.

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

RXJS buffering with intermittent intervals

Situation: I am receiving audio data as an array and need to play it in sequence. The data is coming in continuously, so I am using an observable to handle it. Since the data arrives faster than it can be played, I want to use a buffer to store the data w ...

Is there a way to send data to a sibling component without the need to store it as a variable?

In my project, I am utilizing bootstrap vue cards within a v-for loop. Within this loop, one of the tags is supposed to return a value based on the current iteration of v-for. My challenge is that when I save this value as a variable and pass it to another ...

Content not being displayed by ng-repeat

Currently, I am in the process of developing a web application using Node.js with Express serving as the backend and HoganJs as the templating engine, while AngularJS is being utilized on the frontend. However, I have encountered an issue where the ng-repe ...

Nesting ng-repeat within another ng-repeat for dynamic content generation

I am currently working on a page that requires displaying boxes (using ng-repeat) containing information about channels and their corresponding cities. The issue I am encountering arises when repeating the second ng-repeat: <table class="table table-c ...

Preventing PHP's file_exists function from disrupting browser cache in TCPDF

Clicking the "print" button triggers an AJAX request to a PHP script, sending the filename and other data. The PHP script generates a PDF using TCPDF and returns the file link to the AJAX request. Within the PHP script: The script checks if the filename ...

Troubleshooting Problems with Angular Directive Parameters

I'm currently working on a directive that will receive arguments from the HTML and use them to fill in the template fields. Here's the code for the directive: (function(){ angular.module("MyApp",{}) .directive("myDirective",function(){ ...

I continuously encounter an issue in Vite version 3.2.4 where an error pops up stating `[vite:esbuild] The service has stopped running: write EPIPE`

When I finished creating a Vite app, I ran the command npm run dev and encountered the following error: [vite:esbuild] The service is no longer running: write EPIPE https://i.stack.imgur.com/MZuyK.png I need help solving this error. Can anyone provide gu ...

What methods can be used to troubleshoot an issue of an AngularJS function not being called

I am facing an issue with a dynamic table I have created. The rows and action buttons are generated dynamically when the user clicks on the Devices accordion. However, there seems to be a problem with the function expandCollapseCurrent(). Whenever the use ...

Is there a way to efficiently clear the Express session for all users without the need to restart the application?

During my development of REST services using the nodejs express framework, I encountered an issue with storing user-specific data in sessions. I utilized the user's ID as a key to identify the user's data. The following code snippet demonstrates ...

What could be the reason for the failure of Angular Material Table 2 selection model?

A Question about Angular Mat Table 2 Selection Model Why does the selection model in Angular Mat Table 2 fail when using a duplicate object with its select() or toggle() methods? Sharing Debugging Insights : Delve into my debugging process to understand ...

How to toggle between checked and unchecked states using jQuery within AngularJS?

After reloading, the checkbox should maintain its checked or unchecked state. This functionality can be achieved using a directive controller. var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {}, $checkboxes = $("#c ...

Tips for managing NaN values within mathjs.evaluate

console.log(mathjs.evaluate("(goodCount/(goodCount+reject_count))>0.99", { goodCount: 0, reject_count: 0, Total_Planned_time: 10 })) I am facing an issue where if both goodCount and reject_count are zero, this function returns NaN. Howe ...

Which specific html container or element can be found on the mymsn pages?

When accessing mymsn, users have the ability to personalize the content and layout of their webpage. I am curious about what type of container is being utilized for this customization - does it involve an html element, or perhaps javascript, or something e ...

Expanding a feature that modifies the CSS properties of every input element

Creating a text tracking (letter-spacing) demonstration where range sliders are used to update CSS properties. I'm looking to improve the functionality so that the labels also update dynamically, without repeating output2.textContent = this.value;. An ...

When executing a Javascript POST request to a PHP script, it succeeds when running on

I have a simple code that works fine on my website when the PHP file is linked as "/phpcode.php", but it fails to retrieve data when I place the JavaScript request on another site and use the full link. I am currently using GoDaddy as my hosting provider. ...

Uploading and saving data to an object in FaunaDB using React hook forms

I am currently facing an issue with uploading/saving data to an object in FaunaDB. Specifically, I am trying to upload a string to a jobProfile object: data: { "jobProfile": { "image": "" "coverImage": " ...

Develop a monitor for an entity that has not been created

Currently, I am tackling a feature that involves tracking an asynchronous request within a synchronous one. Let me elaborate. The code snippet I am working with looks something like this: const myObj = {}; function sendMessage(requestId, data) { kafkaP ...

Is it possible to swap images by clicking on them?

Let's say I'm working with 3 images. Image A, B and C. A is the main image initially. If I click on image B, it will become the main image and image A will take its place in the old position. The same condition applies when B is the main image a ...

An easy guide to using validators to update the border color of form control names in Angular

I'm working on a form control and attempting to change the color when the field is invalid. I've experimented with various methods, but haven't had success so far. Here's what I've tried: <input formControlName="pe ...

Assign a class to the following element using an Angular 2 Directive

I have a dropdown menu and I want to incorporate an Angular2 directive to control the opening and closing of this dropdown. How can I apply the open class to the latest-notification div, knowing that my directive is applied to the button tag? Below is my ...