Ways to verify that a ray does not intersect the face further

My approach involves creating cubes and rectangles on my scene with userData that initially have all 6 parameters set to "false". I then cast a ray from each face and if it intersects with another object's face, I set that specific face's parameter to "true". Everything functions correctly, however, I am facing an issue when trying to revert the parameter back to "false" if the ray no longer intersects with that face.

Snippet of my code:

box.userData.sides = {
            0: false,
            1: false,
            2: false,
            3: false,
            4: false,
            5: false
        }


        collision.push(box);
        scene.add(box);

        checkRaycast();


}


load(0, 0, 0, 'cube', 0, 0, 0);

function checkRaycast() {
    var raycaster = new THREE.Raycaster();
    var intersects = [];
    for (let j = 0; j < collision.length; j++) {

        var pos = collision[j].geometry.attributes.position; 
        var ori = new THREE.Vector3();
        var dir = new THREE.Vector3();
        var a = new THREE.Vector3(),
            b = new THREE.Vector3(),
            c = new THREE.Vector3(),
            tri = new THREE.Triangle();

        var index = collision[j].geometry.index;    
        var faces = index.count / 3;
        scene.updateMatrixWorld()
        for (let i = 0; i < faces; i++) {
            a.fromBufferAttribute(pos, index.array[i * 3 + 0]);
            b.fromBufferAttribute(pos, index.array[i * 3 + 1]);
            c.fromBufferAttribute(pos, index.array[i * 3 + 2]);
            a.set(a.x + collision[j].position.x, a.y + collision[j].position.y, a.z + collision[j].position.z);
            b.set(b.x + collision[j].position.x, b.y + collision[j].position.y, b.z + collision[j].position.z);
            c.set(c.x + collision[j].position.x, c.y + collision[j].position.y, c.z + collision[j].position.z);
            tri.set(a, b, c);
            tri.getMidpoint(ori);
            tri.getNormal(dir);

            raycaster.set(ori, dir);    

            intersects = raycaster.intersectObjects(collision, true);

            //scene.add(new THREE.ArrowHelper(dir, ori, 500, 0xff0000));
            if (intersects.length > 0) {
                var intFace = Math.floor(intersects[0].faceIndex / 2);
                if (intersects[0].distance > 0 && intersects[0].distance < 0.2) {
                    intersects[0].object.userData.sides[intFace] = true;
                }
            } // this works but with all sides. I need to check if ray don't intersect specific side more
              else {

                    collision[j].userData.sides[0] = false;
                    collision[j].userData.sides[1] = false;
                    collision[j].userData.sides[2] = false;
                    collision[j].userData.sides[3] = false;
                    collision[j].userData.sides[4] = false;
                    collision[j].userData.sides[5] = false;

                }

            }
        }
    }

`

Answer №1

Adding this code to the render function resolves the issue at hand.

for (let j = 0; j < collision.length; j++) 
{ 
    for (let k = 0; k < 6; k++) 
    {    
       collision[j].userData.sides[k] = false;  
    }   
}

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

Load Angular template dynamically within the Component decorator

I am interested in dynamically loading an angular template, and this is what I have so far: import { getHTMLTemplate } from './util'; const dynamicTemplate = getHTMLTemplate(); @Component({ selector: 'app-button', // templat ...

You are unable to establish headers once they have already been sent to the client, as indicated by the error

Github : https://github.com/UJJWAL2001/Pro-Shop/tree/main/backend My current objective is to implement JWT token for securing my routes using the middleware provided below import jwt from 'jsonwebtoken' import User from '../models/userModel ...

Tips for preventing multiple clicks when posting AJAX requests in jQuery

Using Django, I was able to create a website and implement a voting page with jQuery AJAX. The code works perfectly fine as shown below: <!doctype html> <html> <head> <script src="jquery-1.10.2.min.js"></script> <met ...

Having trouble extracting the responseText from the Ajax request

My current challenge involves making an ajax call and receiving an Object in the response. However, when I attempt to access "responseText," it keeps returning as undefined: var results = API.get('users', { username: un, userpass: pw } ); conso ...

When a function is called, retrieve a specific number of elements from an array using the slice method in

If I have an array of 15 objects, but I am only displaying 5 on the browser using this code: const displayedArray = array.slice(0,4) I also have a function that will load another 5 objects each time a user scrolls down. displayedArray.concat(array.slice ...

Refreshing the page causes the Angular/Ionic Singleton instance to be destroyed

I have a TypeScript singleton class that is responsible for storing the login credentials of a user. When I set these credentials on the login page and navigate to the next page using Angular Router.navigate (without passing any parameters), everything wor ...

Passing Variables to Child Components with Vue Slots

Imagine creating a button component with a variable named myVar: MyButton.vue <template> <div> <slot :name="text"> My Button </slot> </div> </template> <script> export default { name: 'm ...

Transferring data from an Angular variable to an Express backend using a POST request

req.body seems to be coming up empty for me. I've tried adding content-type headers as json, but it's not making a difference. Can anyone point me in the right direction? Thank you. UPDATE: Just to clarify, my Angular frontend is successfully hi ...

What is the best way to transfer an id from JavaScript to Rails while utilizing ajax?

Is there a way to call a rail route and pass in an ID from javascript? I have recently started using rails routes within my application, even in js. The current code I am using is: # app/assets/javascript/verifying_link.js $.ajax({ url: "/verify_link/ ...

JavaScript conditional calculation mechanism

Here is the code snippet I am referring to: function myFunction() { var x = document.getElementById("ins-feet").value; if(x >= 0 && x <= 1499) { document.getElementById("show-cost").innerHTML = "Cost: $" + 300; } else if ...

struggling to develop a sophisticated 'shopping cart organization' program

I am in the process of creating a database for video spots, where users can view and modify a list of spots. I am currently working on implementing a cart system that automatically stores checked spot IDs as cookies, allowing users to browse multiple pages ...

What is the significance of the expression $location.path() equal to '/a' in Angular?

I am currently delving into AngularJs for the first time and I have been studying the Angular documentation in order to grasp its concepts. While going through it, I came across this piece of code: $location.path() == '/a'. However, I am struggli ...

Strategies for handling uncaught promise rejections within a Promise catch block

I'm facing a challenge with handling errors in Promise functions that use reject. I want to catch these errors in the catch block of the Promise.all() call, but it results in an "Unhandled promise rejection" error. function errorFunc() { return ne ...

Top technique for creating a unique cursor image for a website

I'm looking for the most efficient way to create a custom cursor image for my CSS/HTML5 website without using Flash. Ideally, I would like to implement this using CSS rather than resorting to Javascript. If Javascript is necessary, I want to know whic ...

Select dropdown in AngularJS for Date formatting

After retrieving json data from a web API, I found that it contains a series of datetimes. My goal is to select a specific datetime from a dropdown list. While I can populate the list without any issues, the formatting appears to be incorrect and I'm ...

Guide on executing a Python script using Node.js

I have set up a node.js server on Raspberry Pi and encountered an issue when trying to run a python script from it. Despite receiving the correct output from the client, the file fails to execute in this instance involving socket.io. The socket functiona ...

Retrieve elements from an array based on the value of an object

I have a list of items that resembles the following structure: var entries = [ { sys: {id:"1"}, fields: "article1" }, { sys: {id:"2"}, fields: "place1" }, { sys: {id:"3"}, fields: "offer2" }, { sys: {id:"1"}, fields: "article2" }, { sys: {id:"1" ...

What is the best way to ensure all requests have been completed before proceeding?

Is there a way to ensure that the sortOrder function only runs once the getOrders function has fully completed its execution? I have considered using a callback, but I am unsure of how to implement it. Do you have any suggestions on how I can achieve this ...

How to retrieve an array from a JSON object with JavaScript

After receiving an object from the server, I am specifically looking to extract the array ITEMS. How can I achieve this? I attempted using array['items'] but it did not yield the expected result and returned undefined { "items": [ { ...

Showcasing articles in an XML feed according to specific keywords found in the headline

I'm currently working on designing a website for a client and I want to minimize my involvement in its maintenance. I am considering using RSS feeds to automate the process by having content posted on Blogger and then feeding it to the site. However, ...