Exploring BufferGeometry Line raycasting in threejs

I am facing an issue with raycasting on a line created using BufferGeometry. It seems that raycasting is not supported in this case.

Upon initializing BufferGeometry as demonstrated here, the raycasting functionality does not seem to work on the object.

Interestingly, when I switch from BufferGeometry to Geometry, raycasting works perfectly fine.

var geometry = new THREE.Geometry();
var lines = new THREE.Object3D();

for ( var i = 0; i <array.length; i++) {
   x = ( Math.random() - 0.5 ) * 30;
   y = ( Math.random() - 0.5 ) * 30;
   z = ( Math.random() - 0.5 ) * 30;
   geometry.vertices.push(new THREE.Vector3(x,y,z));
}

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x9999FF, opacity: 0.5 } ) );
lines.add(line);
scene.add(lines);

I have attempted wrapping BufferGeometry within Object3D, but it did not change the outcome. How can I enable raycasting against a BufferGeometry line?

EDIT

View Fiddle with BufferGeometry

View Fiddle with Geometry

Answer №1

I made some improvements to the BufferGeometry example and now it's functioning perfectly

http://jsfiddle.net/eviltoad/s9fsds19/11/

material.originalColor = material.color;
// line
lines = new THREE.Object3D();
line = new THREE.Line( geometry,  material );
lines.add(line);
scene.add(lines);

document.onmousemove = function(event){
    mousePosition.x = 2 * (event.clientX / window.innerWidth) - 1;
    mousePosition.y = 1 - 2 * ( event.clientY / window.innerHeight);
    mousePosition.unproject(camera);
    var raycaster = new THREE.Raycaster(camera.position,mousePosition.sub(camera.position).normalize());
    console.log(lines.children);
    var intersections = raycaster.intersectObjects(lines.children);
    console.log(intersections);
    lines.children.forEach(function( child ) {
        child.material.color = child.material.originalColor;
    });
    for( var j = 0; j < intersections.length;j++ ) {
        var intersection = intersections[j];
        var object = intersection.object;
        object.material.color = new THREE.Color("#FFFFFF");
    }
};

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

Utilizing a segment of one interface within another interface is the most effective method

In my current project using nextjs and typescript, I have defined two interfaces as shown below: export interface IAccordion { accordionItems: { id: string | number; title: string | React.ReactElement; content: string | React. ...

Utilize the directive method within the transcluded content by making a call

Trying to call a method within a directive from transcluded content. The structure of my HTML is: <typeahead class="typeahead" model="customers" filtered-model="customersfiltered" ng-model="selectedcustomer"> <ul> <li ng-click="select ...

FirebaseError encountered: Unable to update document due to absence of document. Updating document is only possible if document id is hard coded

For my latest project, I have a component that can successfully create a new user and add them to the database using the function createUserWithEmailAndPassword(auth, email, password). Now, I am working on another component that will allow users to edit t ...

The useEffect React Hook is missing a dependency: 'fetchTracker'. Please make sure to add it to the dependency array or consider removing it

I recently encountered a challenging issue with one of my projects. The file in question is responsible for tracking data, which is then displayed on a map within an application. Despite my attempts to find a solution on StackOverflow, I have not found an ...

Why are the height and width values I specified not matching the values returned?

I am currently learning HTML and JavaScript, specifically diving into the width() and height() methods in JavaScript. Setting the dimensions of div1 to 100px for height and 300px for width, I encountered a discrepancy when running the code. Upon execution ...

Combine es6 imports from the identical module using an Eslint rule or plugin

Looking to consolidate my ES6 imports from a single module into one for my React project. For example: import { Title } from "@mantine/core"; import { Center } from "@mantine/core"; import { Divider } from "@mantine/core"; T ...

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Due to different screen sizes, the image does not appear on top of another image exactly. It seems like a new function is needed. One that does not overlap with another image (by clicking the function for a few seconds), but rather replaces it for those fe ...

Fast updates in Mongo/Mongoose can lead to unintended data loss

Recently delving into mongo/mongoose, I encountered a bug when updating a collection. Within my nodejs code: User .findByIdAndUpdate({ _id: id }, { $set: params }) .select('-password') .exec(function (error, user) { return res. ...

Tips for creating a continuous scroll up and down animation within an overflow container using React

Currently, I am dealing with an overflow list of items that has a fixed height to ensure it can always be scrolled. The desired effect is for the overflow div to scroll down its content over a span of 4 seconds with a 0.5-second delay, and then scroll up ...

Access environmental variables within Next.js middleware

Within my nextjs project, I have declared variables in both the .env and next.conf.js files. The code snippet from the next.conf.js file looks like this: module.exports = { env: { NEXT_PUBLIC_JWT_SECRET: "...", }, publicRuntimeConfig: { ...

Having trouble with rendering an OBJ file in threejs

It appears that some faces are missing from the obj file, resulting in improper rendering. The same object viewed in an online viewer shows all faces and parts rendered correctly. https://i.sstatic.net/tI3kb.jpg Below is the image I am trying to render on ...

JSON model imported does not cast a shadow

I recently exported two models from Blender, each saved as a separate json file using the latest three.js exporter. However, when I attempted to load them into my test app and enable shadow casting, the shadows were not appearing at all. Any thoughts on ...

The LOAD event in Highchart seems to be malfunctioning

function drawGraph($scope) { // Customized graph drawing function $scope.chartConfig = { chart: { type: 'spline', animation: Highcharts.svg, marginRight: 10, events: { ...

What is the process for reverting to an older version of Webpack?

In my ASP.NET core Web project, I've successfully installed Webpack using NPM, and the current version is 2.4.1. However, I actually need to have 2.1.0-beta.25 installed. I attempted to install the desired version using the following command: npm ins ...

How can one incorporate intricate keys into a map using TypeScript?

I am attempting to create a map in TypeScript that uses two-part keys. The key format I am working with looks like this: type Key = { section: number, index: number } In my attempts to implement this, I have created a map using the following syntax: l ...

Tips for implementing async await properly within a function array that contains two functions for utilizing Promise.all in Vue

I am facing an issue with using await at the specified location in 1.vue file. Whenever I try to use await, it throws an error stating Unexpected reserved word 'await'. How can I modify async useFunctionToAllServers() to execute sequentially afte ...

Preserving State in React Router Through Page Reload

I recently set up a react router in order to display my Navbar on all routes except the login page. To achieve this, I created a Layout component that ensures users are redirected back to the Login page if they are not authenticated. Currently, I'm st ...

Ways to create a clickable image without any hovering disruptions

I'm currently working on my first website using CSS3, HTML, and JS. Once I finish this version, I plan to switch to bootstrap after ironing out the bugs. However, I've hit a roadblock and could use some help. Here is the js fiddle link: https:// ...

What sets cross-fetch apart from isomorphic-fetch?

According to the Redux documentation, cross-fetch is the preferred choice, whereas most other sources recommend using isomorphic-fetch. What sets these two apart? ...

There seems to be an issue with the functionality of Js .classList.add()

Currently, I am in the process of creating a simple movie site and am working on the home page. On the home page, there is a carousel. In CSS, I have hidden the visibility of all slides, and my plan is to create an array for all the slides in JavaScript an ...