I'm having trouble getting my Threejs Raycast to properly intersect with the scene's children. Can anyone offer some guidance

Post 1) I'm currently working on a project where I need to detect all objects visible to the camera so I can reposition them back to their starting point once they go out of view. The goal is to create an infinite waterfall effect by reusing existing objects. I'm facing an issue where intersects is empty and it only works when I raycast for individual objects in a loop through scene.children, but this approach has a negative impact on performance since it's within the animation loop.

Any help on this matter would be greatly appreciated.

Post 2) I recently switched to frustum culling, but the frustum.containsPoint(scene.children[index]) method always returns true, even when the objects are clearly out of the camera's view.

Once again, any assistance or guidance on this issue would be highly valued.

camera.updateMatrix();
  camera.updateMatrixWorld();

  var frustum = new THREE.Frustum();
  var projScreenMatrix = new THREE.Matrix4();
  projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);

  // frustum.setFromProjectionMatrix(camera.projectionMatrix);
  frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));

  for (let index = 0; index < scene.children.length; index++) {
    scene.children[index].updateMatrix(); // make sure plane's local matrix is updated
    scene.children[index].updateMatrixWorld();

    if (frustum.containsPoint(scene.children[index])) {
      //stuff happens...
      if (scene.children[index].name === "coin") {
        scene.children[index].rotation.x += 0.01;
        scene.children[index].position.y -= 0.1;
      }
      // console.log("mesh in view Frustrum");
    } else {
      console.log("mesh not in view Frustrum");
    }
  }

Answer №1

I am in the process of identifying all objects that are visible to the camera

To achieve this, you can forego the need for raycasting. Instead, create a Frustum instance based on the camera's projection and view matrices using the Frustum method setFromProjectionMatrix(). Then, utilize intersectsObject() to determine if a 3D object is within the camera's view frustum (the visible region of the 3D scene) or not.

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

Error loading console due to JSON data on website

After creating a Json data file named question.json with the following content: "Endocrinology":[ { "title":"Endocrinology", "id": "001", "date":"08J", "question":"In adult men, anterior pituitary insufficiency does not caus ...

Is it possible to access a sub property using a dot string in Vue 3?

Given a Vue 3 proxy object structure as shown below: <script> export default { name: "test", data() { return { users: [{ "id": 1, "name": "Leanne Graham", " ...

Receiving Nothing But Null Values from MongoDB

Why is my code returning null? async function run() { try { await client.connect(); const productsCollection = client.db("inventory").collection("items"); // Retrieve All Products app.get('/products', asyn ...

Remove background image when input form field is in focus

I am currently experimenting with the following approach: $('input').on('click focusin', function() { $('.required').hide(); }); However, it appears that this logic is not functioning as intended. Here is an ...

What is the best way to set up a React handler that can handle multiple values effectively?

Struggling with a handler that is not behaving as expected. I need to update the 'quantity' value of multiple items, but currently they all get updated with the last value entered. How can I change multiple values and update items individually? H ...

Angular dependency injection function

What is the best placement for the common handleError and handleSuccess functions? These functions are commonly used by every service. Where should these functions be placed? Should they be global functions injected as dependencies? (function () { "u ...

How can I implement a scroll functionality to navigate to the next item in a Vuetify v-carousel?

I'm currently working on a front page layout using the v-carousel component and I am looking to achieve automatic scrolling to the next item without the need for arrows or delimiters. How can I make this happen? Below is my current code: <template ...

Modifying button appearance based on state change in AngularJS

I have a button with a grey color and I want to create two different states for it: one that is selected (blue) and another that is in an idle state (grey). Currently, I am working on Angularjs but I am fairly new to this platform. Could you kindly provid ...

Struggling to clear items from input field within AngularJS

I'm currently facing an issue where I am unable to delete data from an input field. var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', function MyCtrl($scope) { $scope.items = [ { name: & ...

Tips for navigating through pagination indexes with Angular 6

Hey there, I'm currently working on a project where I need to automatically click through each pagination index. Initially, only the first index can be clicked. After that, the following page indexes are not clickable. Here's the code snippet: ...

When using Bcrypt compare(), the result is consistently incorrect

After implementing this code for comparison, I encountered an issue with the compare password functionality. UserSchema.pre('save', async function() { const salt = await bcrypt.genSalt(10) this.password = await bcrypt.hash(this.password, ...

While executing a for loop, the variable $.ajax is found to be null in Javascript

When I click on a button with the function btn-book, there is a for loop inside it that fetches data from Ajax. Despite knowing that the data holds values, I constantly receive null. Below is the code snippet for the onclick event: $('#mapContainer&a ...

Why does my POST request result in [object Object] being returned?

I am just starting to learn AngularJS and I am unsure if my POST request is functioning correctly. After making the request, I am receiving an [object Object] response. What does this error indicate? Could it be related to an issue with the form? //Acti ...

The outcome of my function designed to calculate the highest possible profit using k transactions is a null array

I have developed a custom function to calculate the maximum profit from a series of stock transactions given a specific number of transactions allowed. Each transaction involves buying at a low price and selling at a higher price, with the rule that you ...

Using JavaScript, create a regular expression with variables that can be used to identify and match a specific section of

Struggling to apply a regex (with 1 variable) to compare against a HTML code page stored as text. The HTML code is separated into an array, with each element representing a snippet like the one below. Each element showcases details of fictional Houses (na ...

Having trouble loading select2 using PHP/Ajax/JSON even though I can see the data in the inspector

I encountered a puzzling issue after deploying my web application from a Windows (XAMPP environment) to a Linux Server. Despite everything working perfectly on Windows, I am now facing a frustrating problem that has left me stumped. I have scoured through ...

Tips for updating form tag details within the same blade file upon reloading

I have set up a payment page that displays the total amount to be paid. To facilitate payments through a 3rd party gateway, I have utilized a form tag on the page. Now, I am looking to integrate a promo code feature on this payment page so that the total a ...

Anticipate feedback from Python script in Node.js

I have developed a website using nodejs and express, but I am facing an issue with integrating a python script for face recognition. The problem lies in the fact that when I invoke this script from nodejs using child-process, it takes around 10 to 20 secon ...

Creating an MP3 Text to Speech file with IBM Watson

I have been referring to the documentation for implementing the IBM Watson Text-to-Speech API using Node.JS. My goal is to generate output files in MP3 format. The documentation suggests modifying the base code, but I'm struggling with this. The resu ...

Trigger the reactive helper again when there is a change in the $scope

I am working with a reactive data source in Angular-Meteor and I want to find a method to trigger the reactive function to run again after modifying another $scope value. Specifically, I aim to change the sorting order based on $scope.model.sort: angular. ...