Looking towards Three.JS

One of my objects is supposed to look at another object, but when I perform collision detection, it seems to disregard the rotation applied using LookAt. Instead, it defaults back to its original rotation. Why isn't it taking into account the rotation applied with LookAt?

Take a look at this comparison:

https://i.sstatic.net/fhD2P.png

The blue object represents the default orientation, while the green one illustrates the blue object after applying LookAt.

Why isn't the collision detection affected by the changes made using LookAt?

The collision detection function I am using for my RTS game (which only considers X and Z coordinates) is as follows:

function collisionXZ(o1, o2) {
    if (Math.abs(o1.position.x - o2.position.x) > (o1.geometry.parameters.width + o2.geometry.parameters.width) / 2)
        return false;
    if (Math.abs(o1.position.z - o2.position.z) > (o1.geometry.parameters.depth + o2.geometry.parameters.depth) / 2)
        return false;
    return true;
}

Answer №1

When using THREE.Object3D.lookAt()
, keep in mind that it adjusts the rotation of your object, not its position.

Therefore, when determining if two rectangles collide, it's important to factor in the rotation.

Your code resembles an AABB test, typically used in the 'broad phase' of collision detection systems. This test helps identify potential collisions to optimize actual collision tests, but doesn't constitute a full collision check.

Consider utilizing a collision detection library with specific tests (such as Rectangle over Rectangle or Rectangle over Circle) for more accurate results.

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

Launching npm using the command "npm run protractor" results in console errors being thrown upon completing the test

Recently, we made the decision to streamline the installation process of Protractor on local machines by specifying it in package.json rather than installing it individually with the -g flag. The addition we made looks something like this: "scripts": { ...

Squire.js failing to replace mock dependency while utilizing store

Exploring Squire.js as a dependency loader for RequireJS. Testing in a standard web browser environment to run unit tests. Attempting to utilize store to access my mocks, but struggling with preventing Squire from loading the actual module. The usage of m ...

What is the best way to update a prop value using a different function?

I have a single component in my NextJs application and I am trying to modify the child prop (referred to as type) of the child component when the <input> element is empty. However, I am facing issues with this task. Can someone please assist me? Tha ...

Using Angular's ng-repeat to iterate through multiple table rows along with ng-show

Check out this awesome table: <tbody ng-repeat="items in Items" ng-click="Click()"> <tr> <td><img src="{{items.img}}">{{items.name}}</td> <td>{{items.owner}}</td> <td>{{items.time ...

Create a PHP form that includes text and image inputs with the help of AdminLTE and integrates DropZone.js

I have been working with a template from adminLTE and you can check it out at the following link: . At this point, I am trying to upload images first and then use the image names as input text elements in my main form for submission. However, I have encou ...

I attempted an AJAX script, but unfortunately, it was unsuccessful. Upon submitting the form, I received a success alert, but no data was sent to

I have been struggling with an Ajax script that doesn't seem to be working as expected. When I submit the form, I receive a success alert but nothing is being sent to the database. Here is my HTML form: <form action="account_info.php" enctype="mu ...

The controller method does not receive any parameters

After sending a post ajax request to the server side, I encountered an issue where the received parameters turned out to be empty or null. I've tried several solutions to fix this problem, but so far nothing has worked. It seems like the root cause l ...

Storing new information in a database and generating JSON output using CodeIgniter

I have a field that can multiply when the user adds more data. Check out this screenshot: https://i.sstatic.net/RfCZw.png Take a look at my HTML code <tr> <td>Experience (Education)</td> <td> ...

I need to prevent form submission when the submit button is clicked. How can I achieve this?

I'm currently developing a web application using ASP.net. Within the form, there is a submit button that has the following code: <input type='submit' value='submit request' onclick='btnClick();'>. The desired func ...

Concealing Bootstrap Dialog in Angular 6 through Component隐藏Angular 6中

I have been struggling to hide a bootstrap dialog from a component with no success. Here is my Dialog code: <div class="modal fade" id="loading_video_upload" tabindex="-1" role="dialog" aria-labelledby="loading_video_upload_label" aria-hidde ...

Hover over the image with some padding placed around it to see

I am struggling to figure out how to add padding to my image when hovering over it with Onmouseover. I have tried multiple solutions but none seem to be working. Here is the original code: <img src='/wp-content/uploads/2015/04/img-white.png' ...

Encountering problems when parsing CSV files with Papaparser

I am using Papaparser to parse a CSV file, but the headers in the CSV file contain both numbers and strings. Papaparser is parsing the number headers first before the string headers. Here is an example of my CSV file: Date,1,0,1,2,3,4,5,6,7,8,9,10,11,12, ...

Encountering issues with implementing router.push in Reactjs

Currently, I am working on ReactJS and utilizing Next.js. My current task involves refreshing the page (using routes), but I encountered an error message stating: Error: No router instance found. You should only use "next/router" inside the client-side of ...

JavaScript for returning a boolean output

I have been tasked with creating a webpage based on the requirements below Here is the current code that I am working with function validate() { var form = document.getElementsByTagName('form')[0]; if (form.tickets.value <= form.childr ...

Validation Express; the error variable is not defined in the EJS

Struggling with a perplexing issue that has been eluding me for quite some time now, I am hopeful that someone out there might be able to provide me with some guidance. The variable (error) that I am passing in the res.render{} object seems to be unattain ...

Is there a way to combine all referenced pages into the main page using JQuery?

Is there a way to dynamically replace external CSS and JS file references in an HTML file with the actual contents of those files using Jquery or straight JavaScript? For example, instead of: <link rel='stylesheet' id='style-css' ...

vue-form and vue-material are not compatible with each other

In my experience, using a Vue form on a regular HTML <input> element allows validation to work as expected. However, when I switch to using the <md-input> element, the validation no longer functions and an error message is displayed: Element ...

Guide to dividing an array into smaller arrays whenever a designated value is detected in JavaScript

What is the best way to divide an array at the occurrence of the word 'split' and generate smaller sub arrays? This is a sample representation of my current array: const myArray = ['abc', 'xyz', 123, 'split', ' ...

Updating the date with setState in Material UI components

I have a question about integrating the material ui datepicker into my project. I want the current date in the state to update whenever the user switches from one date to another. You can find the materialUi datepicker I am using at this link. I tried im ...

Manipulating a click to go exactly where I desire it to

Be sure to run the code snippet below before reading the question and interacting with the cells for better understanding! I have Player A moving vertically and Player B moving horizontally. Each click allows players to take turns by shifting the green ba ...