Detecting collisions in three.js made easy

Is it possible to incorporate basic collision detection into my game, using ray casting if possible?

Take a look at this snapshot of my game. The random block moves downward while the paddle must avoid it.

All objects in my game are generated using the following code:

paddle = new THREE.Mesh(

        new THREE.CubeGeometry(
                paddleWidth,
                paddleHeight,
                paddleDepth,
                paddleQuality,
                paddleQuality,
                paddleQuality),                                

                paddleMaterial);

I attempted to implement a raycasting solution in the past but encountered issues with its functionality.

javascriptthree.js

Answer №1

Just wanted to share a few tips with you. It might be helpful to start using your browser console to check for any error messages, especially if you're experiencing some issues. If you're using Firefox or Chrome, you can access the console by hitting CTRL + Shift + J. Also, note that CubeGeometry has been replaced by BoxGeometry. I've made some changes to your controls as well - now J and K will slide the object back and forth. Here's the link to the updated Codepen with collision detection working properly.

http://codepen.io/anon/pen/GHofz?editors=001

function collision() {
    var originPoint = paddle.position.clone();
    for (var vertexIndex = 0; vertexIndex < paddle.geometry.vertices.length; vertexIndex++) {   
        var ray = new THREE.Raycaster( paddle.position, paddle.geometry.vertices[vertexIndex] );
        var collisionResults = ray.intersectObjects( collidableMeshList );
        if ( collisionResults.length > 0)  {
           hit = true;
        }
    } 
}

Feel free to reach out if you have any questions!

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

Store the ajax call request in a different variable

Utilizing the Google Books API, I retrieve book information by calling a URL with an ISBN number which returns JSON data. I then create a hash to store the desired data. The next step is to save this hash value into a database. Does anyone have any sugges ...

javascriptphpajax

Utilize the Vue-Chartjs plugin registration for a specific chart component only

I am currently working with a chart component in Vue 3 using the composition API. My goal is to incorporate the datalabels plugin into this specific chart only. Upon attempting to register the plugin outside of the chart's data or options, I noticed ...

javascriptvue.jschart.js

The beforeunload function in jQuery is not behaving as anticipated

My current goal is to show a pop-up with three choices whenever a user attempts to close the tab while on my website, and then store that choice somewhere. In my main.js file, which loads across all site pages, I have implemented the following code: $(do ...

javascriptjqueryhtmlonbeforeunload

Error: Unable to establish connection to server with docker-compose due to MongoError

Below is the contents of my docker-compose.yaml file: version: '3' services: app: image: chaseloyd/portfolio-site:latest ports: - "3000:3000" mongo2: image: mongo container_name: mongo2 restart: always ...

javascriptnode.jsmongodbdockerdocker-compose

What sets apart BufferGeometry from merged geometry in THREE.js?

From my understanding, BufferGeometry offers computational efficiency. Merged geometry, on the other hand, is efficient as it consolidates into 1 render call. I find creating a merged geometry to be simpler, especially for beginners like myself. Aside fro ...

three.jsgeometrybuffer-geometry

What is the best way to empty a backbone collection in preparation for loading new data?

Hey everyone, I've been working on a Backbone application that involves adding and deleting or editing images. Currently, I'm using a router to navigate between different sections like the gallery and forms. However, whenever I make changes in th ...

javascriptbackbone.jsbackbone-viewsbackbone-routingbackbone.js-collections

Utilizing React Three Fiber for X-axis camera rotation

Is there a way to adjust the camera angle view from above in my scene? Here's the initial code I'm working with : <PerspectiveCamera makeDefault rotation={[0, 4.7, 0]} position={[-20, 7, 0]} ...

three.jscamerareact-three-fiber

What might be causing me to only view a black background while using ThreeJS in conjunction with VueJS?

Hey there! I recently incorporated a new component into my project that utilizes ThreeJS. My intention is to create a visually appealing scene with a light background and two boxes. However, despite my efforts to render the boxes, all I see is a black back ...

javascriptvue.jsthree.js

What is the correct property for accessing and changing the value of a Text node: data or nodeValue?

What is the best option to use? The website suggests using nodeValue, although data shows better compatibility. ...

javascripthtml

Determine if there is any item in a collection that includes a specified attribute found in a separate set

I've attempted various solutions for this issue and have searched around but I'm unable to get it to work. I am dealing with 2 arrays and need to verify if any of the items in one array contain any of the strings from the other array. const ste ...

javascriptarraysecmascript-6

Utilizing JSON for Element Manipulation

My JSON data currently looks like this: [ { "Metric": "7e70661f-e266-4745-9b1b-c5c5691e9746", "Pivot1": 40.00000, "Pivot2": 38.00000, "Pivot3": 18.00000, "Total": 96.00000, "Average": 32.00000, "IsTotal": 0, "MetricOrder": 1 } ] I want ...

javascriptjqueryjson

getting my double-click event to function properly

Hey there, I've been working on a click double-click event handler for my jQuery Ajax engine. The concept is pretty simple - you should be able to either click or double-click a button. I put together this code myself but for some reason it's not ...

javascriptjqueryevent-handlingclickdouble-click

Bringing the Jquery cursor into focus following the addition of an emoji

Looking to add emojis in a contenteditable div but facing an issue with the cursor placement. Here is a DEMO created on codepen.io. The demo includes a tree emoji example where clicking on the emoji adds it to the #text contenteditable div. However, after ...

javascriptjqueryhtmlcss

The Google Books API has reached its limit for requests

Encountering a rate limit exceeded error from the Google Books API while using this demo: To reproduce, open the developer console in Chrome and perform some searches. The rate limit errors will be displayed in the console. [],"lazyUpdate":null},"status" ...

javascriptangulartypescriptrestgoogle-books

Angular encountering issue with HTTP service not functioning as expected

I have been encountering issues while trying to retrieve data using JSONPlaceholder in my service. Despite my efforts, I have not been successful in fetching any data. I would greatly appreciate any assistance in resolving this matter. user.component.html ...

javascriptangularcomponentsangular5

What is the best way to showcase search outcomes using ajax in a Django project?

In my current Django project, I am developing a feature that allows users to search for a name using a form. The view will then search for that name in the database after some transformation and display the results below the form. Currently, the entire pa ...

javascriptpythondjangoajaxfrontend

IE browser issue with includes() method

The code snippet I have been using works flawlessly in browsers like Chrome, Firefox, and Edge. However, upon testing it in IE11, I noticed that it does not work as expected and breaks some functionality. var href = jQuery(this).attr('href'); if ...

javascriptjquery

The navigation menu dissolves into hiding at the uppermost part of the page upon scrolling upwards on iOS devices

I am currently working on creating a navigation menu that will automatically hide when scrolling down and reappear when scrolling up. This functionality works perfectly fine on desktop and Android browsers, but I have encountered an issue specifically with ...

javascripthtmlioscsstwitter-bootstrap

Reorganizing DIV elements on-the-fly

I've recently delved into the world of html, css, and javascript with the hopes of creating my very own news website. However, I've come across a puzzling problem: My vision is to have 10 div blocks on the homepage, each containing a headline wi ...

javascriptphphtmlcss

Node.js: Calculating the number of requests processed per second in the http.get()

In my node.js project, I am creating a simple application for sending HTTP requests. var http = require('http'); var options = { host: 'www.example.com', port: 80, path: '/index.html' }; for(var i = 0; i < 500; i++ ...

javascriptnode.js