Identifying the selected element within a THREE.js object

I've created a sphere with a background image, and placed the camera inside to create a panoramic effect when the sphere rotates.

Now I'm looking to detect when a user clicks on the sphere using a three.js example:

var intersects = ray.intersectObject(sphere);

if(intersects.length > 0){
    console.log("intersect");
}

Unfortunately, this only works when clicking on the outer part of the sphere (when the camera is not inside). Clicking inside the sphere is not being detected.

Do you have any ideas on how I can achieve this?

Thank you.

Answer №1

Grateful to stephomi for providing the solution on GitHub: https://github.com/stephomi.

Ensuring that the side property of my sphere's material is set to THREE.DoubleSide was key.

As a result, the click event is now successfully detected inside the sphere.

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

Over time, memory usage increases significantly in JS applications that heavily rely on Ajax

I've noticed significant memory leaks in an app I'm currently developing. Despite its lack of complexity, the app requests approximately 40kb of JSON data from the server every 15 seconds. This data is then used to generate a table on the page. A ...

Using MongoDB map-reduce with Node.js: Incorporating intricate modules (along with their dependencies) into scopeObj

I am currently immersed in developing a complex map-reduce process for a mongodb database. To make the code more manageable, I have organized some intricate sections into modules that are then integrated into my map/reduce/finalize functions through my sco ...

Creating a welcome screen that is displayed only the first time the app is opened

Within my application, I envisioned a startup/welcome page that users would encounter when the app is launched. They could then proceed by clicking a button to navigate to the login screen and continue using the app. Subsequently, each time the user revisi ...

What is the difference between getAttribute() and Element object properties?

When working with HTMLElement objects, both Element.getAttribute("id") and Element.id will return the same value. Which method is preferred for accessing attributes of an HTMLElement object? Are there any cross-browser compatibility issues with methods l ...

How can I resolve a MySQL query error in Node.js that is throwing an undefined error?

There seems to be an issue with the second request returning undefined instead of showing the results. The expected behavior is that if the first request returns less than two lines, the second request should be executed. What could be causing this error ...

The issue arises when Node.js fails to identify the input fields that were dynamically inserted into the form

I came across a question similar to mine, but I found it challenging to apply the solution to node js. In my project, users can add items to a cart by clicking on them, which are then dynamically added to a form using jquery. However, upon submission, only ...

Changing the ng-src attribute with a custom service in an AngularJS application

Check out this Pluker I created for making image swapping easier. Currently, the images swap normally when coded in the controller. However, I am interested in utilizing custom services or factories to achieve the same functionality. Below is the code snip ...

Configure gulp tasks based on the environment variable NODE_ENV

Is it possible to set up a specific gulp task based on the value of NODE_ENV? For instance, in my package.json file, I currently have: "scripts": { "start": "gulp" } Additionally, I have various gulp tasks defined such as: gulp.task('developm ...

Error message: Attempting to access the property '_layerAdd' of an undefined object in the context of vue and leaflet integration

Encountering an issue while attempting to include a feature group on my map: TypeError: Cannot read property '_layerAdd' of undefined The section of code causing the error: <l-map id="mapid" :zoom="zoom" :center="center" /> var ...

What is the best way to use jQuery to filter data in a table by clicking on a specific table row?

My website contains a table with player names and servers, but I want to make them clickable for filtering purposes. For instance, clicking on a player name should reload the leaderboards to show which servers that player plays on, and clicking on a server ...

Refreshing the page to display new data after clicking the update button

function update(){ var name= document.getElementById("TextBox").value; $.ajax({ url: '....', type: 'post', ...

Develop an ASP.NET server control that is compatible with a wide range of browsers

What steps can I take to ensure that my asp.net control is cross browser compatible? Currently, it only works with IE. I would appreciate any recommendations and best practices on achieving this. ...

What's the reason for text-alignment not functioning properly?

After some testing, I have come up with the following code: .Greetings { width:100%; display:block; text-align:center; font-family: "Times New Roman", Times, serif; font-size:75px; color:#208CB7; } The objective was to center the text on the ...

Utilize Firebase Hosting to Host Your Vue Application

Having some trouble with hosting code on Firebase. Instead of displaying the value, {{Item.name}} is appearing :( Same code works fine on Codepen. Wondering if Firebase accepts vue.min.js? When deployed, the site is showing {{var}} instead of the table va ...

Using jQuery to encapsulate HTML within a div tag

I am looking to insert some HTML markup into my webpage using jQuery. I want to wrap the highlighted yellow code below with <div class="section">...</div>. Here is an example of what I need: <div class="section"> <div>...< ...

Inserting data into a JavaScript database

When attempting to add a new row to a datatable and submit it to a JSP for database insertion, an error is encountered. The error message reads: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the r ...

Is checking for an email address in a form necessary?

I am currently in the process of creating a coming soon page. I have included a form on the page where users can sign up using their email addresses, which are then sent to me via email. However, I need assistance in determining how to verify that the in ...

Updating a nested array of objects within Mongoose collections

I'm in the process of updating the 'categories' array within the 'menu' model schema, with a specific goal of changing the name of a particular category. It's important to note that the 'category' schema is purely a ...

Invoking a JavaScript class using a script tag

In my code, I have a class declaration in a script that is imported before the body tag: $(document).ready(function(){ var FamilyTree = function() { }; FamilyTree.prototype.displayMessage=function() { alert("test"); } }); Then, within the bo ...

Having trouble retrieving the recently updated data from the useReducer hook within a function defined in setTimeout

Within my application, I have encountered an issue while using a dispatch from the useReducer hook. Specifically, when I trigger a click event on a button that contains a setTimeout function of 2 seconds, the updated value is not reflected in the setTimeou ...