The Box3 linked to the camera is failing to register collisions with a different Box3

I am currently facing an issue with detecting the intersection between a box3 (acting as a wall) and the camera (serving as the moving player).

Below is the code snippet:

            const wallgeometry = new THREE.PlaneGeometry( 200, 50 );
            const wallmaterial = new THREE.MeshStandardMaterial( {color: 0x366078, side: THREE.DoubleSide} );
            const wall1a = new THREE.Mesh( wallgeometry, wallmaterial );
            wall1a.position.set(40,0,50); wall1a.rotation.y=0.5*Math.PI; scene.add( wall1a );

            const humangeometry = new THREE.BoxGeometry( 3,3, 3 );
            const humanmaterial = new THREE.MeshBasicMaterial( {color: 0x00ff00,  transparent: false, opacity: 1.0} );
            const human = new THREE.Mesh( humangeometry, humanmaterial );
            **scene.add( human );
            var humanhelper = new THREE.BoxHelper(human, 0x00ff00);
            scene.add(humanhelper);
            var humanbox3 = new THREE.Box3();
            humanbox3.setFromObject(humanhelper);
            camera.add(human);**

            var wallhelper = new THREE.BoxHelper(wall1a, 0x00ff00);
            scene.add(wallhelper);
            var box3b = new THREE.Box3();
            box3b.setFromObject(wallhelper);

Within the animate() function:

            humanhelper.update();
            humanbox3.setFromObject(humanhelper);
            if(humanbox3.intersectsBox(box3b))
            {
                console.warn("Collision TRUE");
            };

It seems that even though I'm moving the camera through the wall, no collision detection is being triggered. I have confirmed that the camera wireframe and position are updating correctly as it moves along with the player (human). //UPDATE Upon further investigation, it appears that the box3 representing the wall is not updating at all. I placed two walls in the same location, and the collision was detected. However, when I moved one of the walls away in the animation loop, the collision detection still indicated they were colliding. https://i.sstatic.net/oV89y.png

Answer №1

Update the human helper by calling humanhelper.update();

When you update the human helper, its geometry will match that of the human but not its position.

Keep in mind that since the human helper is a child of the scene, it will remain in a fixed position and won't activate the collider.

To ensure that the human helper moves along with the camera or human and triggers the collision correctly, consider making it a child of the camera or human using either:

human.add(humanhelper);

or

camera.add(humanhelper);

instead of simply adding it to the scene using:

scene.add(humanhelper);

This adjustment should make a noticeable difference in how the collision functions.

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

Working through JSON arrays in JavaScript

Here is a JSON example: var user = {"id": "1", "name": "Emily"} If I select "Emily," how can I retrieve the value "1"? I attempted the following code snippet: for (key in user) { if (user.hasOwnProperty(key)) { console.log(key + " = " + use ...

Crop multiple images using dropzone.js before uploading

Currently, I have integrated Bootstrap with dropzone.js to allow users to upload images via drag & drop. Everything is functioning smoothly, even with the ability to upload multiple images. However, my next goal is to implement image cropping before uplo ...

Variable in v-for loop is not properly declared

Currently, I am attempting to iterate through an array of objects retrieved from the backend and display these objects on the frontend. The Vue framework is throwing an error stating that "event" is not defined on the instance but referenced during render. ...

Having difficulty uploading a file using a formGroup

Currently, I am using Angular to create a registration form that includes information such as name, email, password, and avatar. For the backend, I am utilizing NodeJS and MongoDB to store this information. I have successfully written the registration API ...

Identifying Users with Socket.io Socket Connection

I have written some code examples to identify connected users via socket.io. Now, I need to implement a code on the index page to communicate with these users. The following code demonstrates how to send a message to user[1] saying "Welcome" and to user[2 ...

Troubleshooting: Missing Headers in AngularJS HTTP Requests

When I make a request using AngularJS like this: var config = { headers: { 'Authorization': 'somehash', 'Content-Type': 'application/json; charset=UTF-8' } }; $http.get('htt ...

Combine the foundation navigation with bootstrap in order to create a seamless

Has anyone figured out a way to mimic the "top bar" functionality in Foundation (where child menu items slide to the left on mobile) within the Bootstrap framework? I really appreciate how Foundation handles the mobile navigation sliding for child items, ...

Vue.js 2: Sorting ul list based on user input text

Is there a way to filter a list dynamically based on either the name or initials that a user types into an input field? I am currently utilizing vue.js 2 for this task. The list is populated by accessing a store variable which stores data from a JSON file. ...

The Image component in a test within Next.js was not wrapped in an act(...) during an update

After setting up a basic NextJS app with create-next-app and integrating Jest for testing, I encountered an error message stating "An update to Image inside a test was not wrapped in act(...)". The issue seems to be related to the Image component in NextJS ...

Is there a stripped-down version of the Google Actions sample available?

I'm in search of an example of Actions on Google that demonstrates the usage of the primary Actions on Google Javascript client library located at: https://github.com/actions-on-google/actions-on-google-nodejs What I need from the sample is specific ...

Generate a new entry by analyzing components from a separate array in a single line

I have a list of essential items and I aim to generate a record based on the elements within that list. Each item in the required list will correspond to an empty array in the exist record. Essentially, I am looking to condense the following code into one ...

The src attribute of an HTML element transmits a combined string to the server

My setup includes a ReactJs and Django project. When I send a GET request to my localhost for localhost/index, the server running my Django project returns index.html as expected. However, within the index.html file, there is an html element with src value ...

How can you insert a title or key into an array containing numerous objects using javascript?

I have a function that extracts data from files and returns it in an array const extractTestCases = () => { const filesArray = [] const filterTestSuite = files.filter(test => test.includes('.test.ts')) filterTestSuite.forEach(te ...

What is the best way to modify JSON data within a file?

To start, I retrieve a JSON array by using the following JavaScript code: $.getJSON("myJSONfile.json") .done(function(data) { myData = data; }); After storing the data in myData, which is a global variable, I proceed to add more informati ...

Dealing with authentication problems when making jQuery AJAX requests

I have set up jQuery ajax calls to the server every 10 seconds on my webpage. However, I also want users to be automatically logged out if they remain idle for 2 minutes without making any requests. I have implemented form authentication cookies with a t ...

When an `angularjs select` is used with a filter, the first line may appear empty at first. However

I'm feeling a bit confused about why my ng-options is once again giving me an empty line with a filter applied. Could you please take a look at this plunker to see the issue? The goal is to show an org chart in a dropdown list that is based on a tre ...

Could not complete operation: EPERM error indicating permission denied for 'stat' operation

Recently delving into Firebase Functions for my Flutter project has been a game-changer. Discovering the code generator, firebase_functions_interop, that seamlessly transforms Dart code into Javascript has made developing cloud functions in Dart a breeze. ...

Verify if the textbox is empty

Is there a way to verify that the input field with type "text" is not empty before moving to the next page? <input TYPE="text" name="textbox2" align="center"> ........ function HomeButton() { <!--if both textbox1 and textbox2 values are not ...

Show 1 Blog Post on a Separate AngularJS Page

I would like to show only Test Post 1 on the next HTML page titleDetails.html when the user clicks on Test Post 1 in index.html 1) titleDetails() in index.html: <a ng-click="titleDetails(post)">{{ post.title }} </a> 2) Controller Variables a ...

Execute a function on every item within a loop by utilizing jQuery

My view-model includes a data grid similar to the one displayed below <table> @foreach (var item in Model) //for(int i=0;i<Model.Count();i++) { using (Html.BeginForm("Edi ...