Discrepancies in collision box alignment causing ThreeJS SAT collisions to fail

Currently, I am working on developing a simple game project for my school. However, I have encountered an issue with the collisions in the game. The collision boxes appear to be misaligned.

If you wish to see the game I am working on, you can access it here:

The creation of these small boxes is done through this code snippet:

for(var x = 0; x < colliderPolygon.points.length; x++){
    var test = new THREE.Mesh(new THREE.CubeGeometry(8,8,8),material)
    test.position.x = colliderPolygon.pos.x + colliderPolygon.calcPoints[x].x
    test.position.z = colliderPolygon.pos.y + colliderPolygon.calcPoints[x].y
    this.mesh.add(test)
}

I made adjustments to the collision logic because ThreeJS positions are bound to the bottom center of the box while SAT's positions are bound to the top left corner of the box.

If you would like to take a look at the complete code of the program, it is available here: https://github.com/Hajtosek/ggEasy

Do you have any ideas or suggestions on what might be causing this issue?

Answer №1

To grasp the concept fully, it's important to identify the position binding points.

In THREE.JS, these points are located at the center of the mesh, whereas in SAT they are situated in the top left corner. var collider = new SAT.Box(new SAT.Vector(cubeMesh.position.x - halfwidth, cubeMesh.position.z - halfHeight), width, height);

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

Excluding specific e2e tests in Protractor: A guide

I have a collection of end-to-end tests for my AngularJS web application. Here is the configuration in my current protractor.config.js file: // __dirname fetches the path of this specific config file // assuming that the protractor.conf.js is located at t ...

The objects-to-csv module encountered an error: fs.existsSync is not a valid function for this

"TypeError: fs.existsSync is not a function" Whenever I try to create a CSV file and input some data into it, this error message pops up. const objectstocsv = require('objects-to-csv'); export default { data () { return { ...

Please provide the necessary environment variable

While developing my ReactJS app, I have been pondering on the process of specifying the necessary environment variables for the application. Where should I define that "my app requires a DATABASE_URL variable with a string formatted like this, and a PORT v ...

Exploring the process of cycling through "Fetch" JSON data in React.js for a dynamic slider component after setting it to state

Still getting the hang of React, so please go easy on me! My main objective is to retrieve data from my personal JSON server and display it on a custom "Slider" component that I'm working on. Following a tutorial, I wanted to challenge myself by usi ...

Error: The default export is not a component compatible with React in the specified page: "/"

I'm facing an issue while building my next app. Despite using export default, I keep encountering an error that others have mentioned as well. My aim is to create a wrapper for my pages in order to incorporate elements like navigation and footer. vi ...

How can I use AngularJS resource to fetch data from a URL that requires both query parameters and post data?

Requirement: To send data to an endpoint using a post of data, include the startdate and endate in the querystring of the url. Here's an example: The data payload should only contain the locationIDs and Criteria as shown below. The Resource Definiti ...

JavaScript: Selecting parent elements using getElementsByClassName

I am dealing with the following HTML code: <div class="item"> <img class="item-image" src="${item.getImage()}"/> <p>${item.getName()}</p> </div> and JavaScript: var classname = document.getElementsByClassName("item" ...

Can $event be transferred from cshtml to Vue.component?

I am facing an issue when trying to pass an event into my Vue component. No matter what method I try, I keep getting a "TypeError: Cannot read property 'preventDefault' of undefined" error. Here is the code snippet for my Vue component: Vue.com ...

Executing a Firebase JavaScript script on a remote web server client

I have limited experience with Javascript and I am struggling to get my code to execute. I have already completed the Android java portion, but when I attempt to run the html file, nothing happens. I am unsure if there are bugs in my code or if it needs to ...

Display an image with only a portion visible, no canvas, no frame, and no need

My dilemma involves an img with a surrounding box div. http://jsfiddle.net/6d4yC/7/ 1) I am seeking to display only a portion of the image (250x150) without generating a white overlay when it is in its large size. Placing a #box1 div around the image has ...

Tips for adding a text input field within a dropdown menu

Could someone provide guidance on how to place an input text box within a dropdown without using bootstrap? I came across this image showing what I am looking for: https://i.stack.imgur.com/f7Vl9.png I prefer to achieve this using only HTML, CSS, and Jav ...

Build a new shop using a section of data from a JSON database

Let's say I have a JSON store that is set up as shown below var subAccountStore = new Ext.data.JsonStore({ autoLoad: true, proxy: { type:'ajax', url : '/opUI/json/subaccount.action?name="ABC"' }, fields: ['acc ...

Struggling to hide empty columns in an HTML table with jQuery - it's just not cooperating!

<html> <head> <script src="jquery-1.4.4.js"></script> <script> $('table').each(function(a, tbl) { var currentTableRows = $(tbl).attr('rows').length - 1; $(tbl).fin ...

Javascript - understanding variable scope

Hey there! I have some code that I need help with var idx = 0; var size = 0; do { response.push({ key: "data" + idx, ajaxOptions: function () { var data = this.getPref("groupsCN"); var items = data.split('; ...

Can you explain the concept of Cross-origin requests?

My JavaScript application is designed to detect single, double right, and double left clicks. A single click triggers an asynchronous request to the HTTP server, while the rest are intended to change the user interface on the client side. However, I am str ...

What is the best approach for transmitting data to the post method of Node.js using AJAX/jQuery?

A UDP server I have is set up to respond with a different message each time it receives a message. When I hard code the message into the variable "message," everything works fine. However, I want the client to be able to manually type in a message, and t ...

Node.js user attempting to upload and handle files without any external libraries, solely relying on traditional JavaScript and HTML techniques

Previously, my Node.js code seamlessly integrated with any javascript+HTML project I worked on, leading me to believe there was a direct correlation between Node.js and vanilla Javascript+HTML. However, this misconception was shattered when attempting to u ...

Plotting software integrating Three.js

Currently, I am attempting to create plots on a plane using Three.js library. So far, I have defined the plane geometry as follows: floorGeometry = new THREE.PlaneGeometry(10, 10, 35, 35); While I have been able to successfully write text on the plane, ...

Generate tables and rows dynamically

I am looking for guidance on dynamically creating a table and adding rows to it. I have successfully created a table with one row containing form fields, but I am unsure how to add additional rows. Any examples or suggestions on how this can be implemented ...

Discover the secrets to acquiring cookies within a Next.js environment

I am currently working with Next.js and attempting to retrieve a cookie value. Below is the code I have written: import cookie from "js-cookie"; export default function Home({ token }) { return ( <div className="flex flex-col items ...