Interacting with a 3D sphere in Three.js by clicking

I'm attempting to create a feature where points are generated on a sphere whenever the mouse is clicked. The camera's viewpoint is situated inside the sphere, and I am looking to establish clickable areas that are properly mapped onto its surface.

Something similar to this example:


    mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
    mouse.z = 0.5;

    raycaster.setFromCamera( mouse, camera );

    var objects = [];
    objects.push(panoVideoMesh);
    panoVideoMesh.material.side = THREE.DoubleSide;

    var intersects = raycaster.intersectObjects( objects, true );

    if ( intersects.length > 0 ){

        var point = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
        point.position.copy(intersects[0].point);
        point.lookAt(camera);
        panoVideoMesh.add(point);
    }

This method is functional to some extent, although the meshes being added do not align precisely with the mouse click. Additionally, when rotating the camera in the VR scene by clicking and dragging, the points remain fixed on a single plane.

Any assistance or insights would be greatly appreciated!

Answer №1

intersects[0].point is positioned in world coordinates, however when you append point as a child of panoVideoMesh, the transformations of both elements become intertwined. You need to either attach point directly to the scene, or convert the intersection point to be relative to panoVideoMesh's local space before adding it.

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

Enhancing nouislider jQuery slider with tick marks

I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...

The basic evaluation of jQuery elements does not result in a comparison

Wondering what's going wrong in this code: employee_ids = $('[data-employee_id="'+employee+'"]'); timestamp_ids = $('[data-scheduled_on="'+timestamp+'"]'); var common = $.grep(timestamp_ids, function(element) ...

When a radio button is chosen, multiple text fields must be completed in order to validate the form

I am working with a set of 3 radio buttons. If the last option, labeled "In Home," is chosen, then all 4 of the text fields must be filled in for the form to validate. While I have found information on how to achieve this with checkboxes or a single text f ...

Utilize AJAX to insert information into a MySQL database when a checkbox is selected

Before I got stuck here, I took a look at how a similar question was implemented here I attempted to implement the code in order to insert data into a MySQL database when a checkbox is clicked. While it may have been easier to do this on form submission, ...

Is it possible for the 'error' event to be triggered on the 'http.IncomingMessage' object during a node.js http.request?

There are 4 ways to encounter errors when calling http.get(url, cb): httpThrows() This error can occur due to a wrong format of the url or incorrect callback. function httpThrows() { try { http.get("www.missing-protocol.com", res => { ...

What is the best method to retrieve the window object in XUL?

I'm attempting to assign an onLoad event to the current webpage through a Firefox extension. My approach involves utilizing the gBrowser object, although I am uncertain if this is the most optimal method. The goal is to establish an onLoad event for t ...

The assets path is the directory within the installed package that houses the main application files following the completion of a

I have a Vue.js UI component that is internally built using webpack. This reusable UI component library references its images as shown below: <img src="./assets/logo.png"/> <img src="./assets/edit-icon.svg"/>   <i ...

Ways in which the user can modify the city name within this inquiry

I am just beginning to learn JavaScript and I am struggling to figure out how to allow the user to change the city name in this request. Currently, it works when I manually input the city name in the code (e.g., askWeather.open("GET", "url.../london")), bu ...

Creating a Fractional Division Formula in HTML

My goal is to create code that displays various mathematical formulas. The formula I am focusing on right now is for the mean (average) and it currently looks like this: ∑n⁄n: <span class="frac"><sup>&sum;n</sup><span> ...

What is the preferred method for accessing nested object properties in React props?

Building upon a previous inquiry - Javascript - How do I access properties of objects nested within other Objects It appears that standard dot notation doesn't suffice for accessing nested object properties within React state/props. In the case of t ...

Troubleshooting Error in WebSocket with 'ws' Library in Node.js and Vue.js: Issue with RSV1 Flag Unset

I've come across a problem with WebSocket connections while working on my Node.js and Vue.js project. I've implemented the 'ws' library for WebSocket functionality, but I keep getting the error message "Invalid WebSocket frame: RSV1 mus ...

Guide on how to assign a masterpage DOM element to a content page using JavaScript

Within an ASP.NET master page, there is a specific div element that I want to hide in one of its content pages. To achieve this, I included the following JavaScript code at the end of the content page: if (document.getElementById('sitemap')) { ...

Having trouble getting Video.js SWF to work on Internet Explorer?

I've been working with video.js and am having trouble getting it to function properly on Internet Explorer. I have added the swf file like this: videojs.options.flash.swf = "http://vjs.zencdn.net/4.2/video-js.swf " Here is the code for the video pla ...

Transfer all the child nodes to the parent using the spread operator or Object.assign while preventing duplicate properties from being overwritten

I'm trying to transfer all the nodes of a child node to the parent using the spread operator or Object.assign (without relying on Lodash) while avoiding overwriting existing properties. My initial thought was to simply append the childArray to the ro ...

Retrieve all entries and merge a field with aggregated information in Mongoose (MongoDB)

I am faced with the challenge of working with two Mongo collections, Users and Activities. The Activities collection consists of fields such as createdAt (type Date), hoursWorked (type Number), and a reference to the user through the user field. On the oth ...

Send Ajax request following input verification

My knowledge of JavaScript is limited, but I was able to create a form that uses AJAX by copying and pasting some code. I have also implemented standard Bootstrap 5 input validation for the form. Everything was working fine until I realized that the AJAX ...

What is the JavaScript design for creating plugins?

[I'm brand new to the world of Javascript, so please bear with me.] I am developing an application in node.js that will feature a collection of plugins. Each "plugin" will consist of a function, or possibly two, that can manipulate a string in some w ...

Triggering an event upon completion of ng-repeat's execution

I am facing a challenge in updating the style of a specific element after ng-repeat has finished changing the DOM. The directive I have implemented for triggering ng-repeat works perfectly fine when adding items to the model, but it does not get called whe ...

What is the best way to trigger an action in response to changes in state within Vuex

Are there more sophisticated methods to trigger actions in vuex when a state changes, rather than using a watcher on that state? I want to ensure the most efficient approach is being utilized. ...

I am interested in using a loop in Angular to highlight my div element

Enhancing my comprehension regarding the mentioned images. If I don't select anything within the div property, the default style (css) should appear like this, at least when one div is selected. However, the issue arises when unable to select. This ...