Can you help me understand how to retrieve the position of a clicked object or sprite in three.js?

My JavaScript skills are lacking... T_T

Is it possible to retrieve the position (x, y, z) where I clicked on a sprite or object?

Here is the code I have so far. Can someone help me out?


    // Creating a sprite 
    var spriteMap = new THREE.TextureLoader().load( 'tag.png' );    
    var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );
    var sprite = new THREE.Sprite( spriteMaterial );
    sprite.scale.set(3, 3, 1)
    sprite.position.set(25, 20, 20)
    scene.add( sprite );
    objects.push(sprite);

    // Adding a text sprite
        var spritey = makeTextSprite( " spritey ", 
            { fontsize: 24, borderColor: {r:255, g:0, b:0, a:1.0}, backgroundColor: {r:255, g:100, b:100, a:1.0} } );
        spritey.position.set(-85,105,55);
        scene.add( spritey );
        console.log(makeTextSprite);
        objects.push(spritey);

    ///////////////////Skipping some codes//////////////////////////////////

    function onDocumentMouseUp(event) {
        event.preventDefault();
        var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2-1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
        projector.unprojectVector(vector, camera);
        var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
        var intersects = raycaster.intersectObjects(objects);
        if (intersects.length > 0) {
            window.open(intersects[0].object.userData.URL);
            console.log(intersects.length)
        }
    }

Answer №1

for obtaining the click position:

let clickPosition = clickedItem[0].point

to retrieve the object's position:

 let objectPosition = clickedItem[0].object.position

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

Preserving input data based on click and change events

Upon form submission, I encounter an issue with displaying only the divs that contain fields with saved values. The form saves user-entered values using PHP, where some of the fields are initially hidden within div elements until an onclick or onchange eve ...

Discrepancy in Timestamp Deviation for Older Dates Between Java and Javascript (1 Hour)

When I try to convert a string date representation to numeric values, I noticed a discrepancy between Java/Groovy/PHP and Javascript. Specifically, for certain dates before 1970, the JS timestamp is exactly 3600 seconds behind the Java timestamp. This issu ...

Is it gimbal lock causing the unwanted spinning in Three.js and Tween.js?

Currently, I am in the process of tweeing an object. Starting Position (X:82.22, Y:-8.31, Z:57.75) Rotation (X:-3.00, Y:-0.95, Z:-3.02) Moving to this position End Position (X:57.36, Y:-8.31, Z:93.78) Rotation (X:-3.05, Y:-0.55, Z:-3.10) Using the fol ...

Transform basic text into nested JSON structure with JavaScript

There is a plain string in my possession which contains various conditions. const optionString = '{2109} AND ({2370} OR {1701} OR {2702}) AND {1234} AND ({2245} OR {2339})'; The goal is to transform this string into an object structured as foll ...

What is the best way to display a placeholder instead of the state's value when a page loads?

I'm having trouble displaying the placeholder of an input instead of its state value. When the page loads, it shows an empty select box because the testType state is null initially. How can I make sure that only the placeholder is shown instead of the ...

Utilizing Translation in Ionic Framework for AngularJS Menus

Having integrated Angular NG Translate into my app, I ran into a roadblock when attempting to translate the side menu items. The usual method of using expressions like {{'TEXT1' | translate }} did not work for me due to the format already in use ...

Updating the position attribute of a mesh in Three.js using boxGeometry

I am currently working on a project that involves resizing a cube by clicking and dragging its faces. My approach is to update the position attribute on the buffer geometry object, and then either recreate the mesh or set the needsUpdate flag to let it up ...

Updating Vue 3 asynchronous data doesn't reflect changes when the local settings are modified

I have a dedicated external .js file designed to retrieve data from the backend depending on the website's locale. Check out the code snippet below: import { ref } from "vue"; export function fetchData(section, key) { // Making a GET requ ...

Animating a child element while still keeping it within its parent's bounds

I have researched extensively for a solution and it seems that using position: relative; should resolve my issue. However, this method does not seem to work in my specific case. I am utilizing JQuery and AnimeJS. My goal is to achieve the Google ripple eff ...

Creating client side scripts for an ajax call to generate a Json object is simple once you understand the basics

Typically, when I make ajax calls, I request pure HTML. However, for various reasons, I require guidance on constructing a table (let's say of individuals and their information) when receiving a Json object. While I am capable of creating a table in J ...

JavaScript's XMLHttpRequest

My attempt to bypass the WebGoat prompt involved using a combination of javascript code with XMLHttpRequest to send multiple requests, one using GET and the other using POST. The code snippet is as follows: <script> var req1 = new XMLHttpRequest() ...

The best method for quickly loading a webpage that is over 20MB in size

My website is a single-page calendar featuring a full year's worth of images. With 344 requests and a total load size of 20MB, the page consists of a simple PHP script without a database. The requests include a CSS file (15KB), 4 JS files (20KB), two ...

Determine the number of occurrences of specific values within a group of objects based on a

I have the following dataset: const data2 = [ { App: "testa.com", Name: "TEST A", Category: "HR", Employees: 7 }, { App: "testd.com", Name: "TEST D", Category: "DevOps", Employee ...

Using the attribute data-ng-repeat along with the <option> tag allows for dynamic iteration and

Hello there, I am a beginner with AngularJS and I am struggling to understand how to create my <option> list. I would like my output to resemble the example in this fiddle: http://jsfiddle.net/XdpJv/ This is what my current code looks like: <se ...

Update a JavaScript variable with fresh information and then execute JSON parsing

I have implemented this code to display a Verite Timeline on my webpage: <div id="timeline-embed"></div> <script type="text/javascript"> var timeline_config = { width: "100%", height: "100%", debu ...

How to grasp this particular date within nodeJS?

Can anyone help me properly format this date 2018-11-04T14:00:00-07:00? I obtained it from the NWS API but I've had trouble using Date() and similar functions. ...

What is the process for setting a personalized title for error pages in Remix?

I'm currently working on setting up the 404 page for my Remix app, but I'm facing challenges when it comes to configuring the <title> meta tag for these pages. Within my root.tsx file, I have defined a MetaFunction and a CatchBoundary: exp ...

`Vue function is unable to find the definition of a variable`

I am struggling with utilizing a variable in a vue 3 application that has been emitted by a component called Mags. The variable is functioning properly in the importMags function, however, I am unable to access it within the handleSubmit function. It consi ...

Executing a JavaScript function within a PHP echo statement

I am completely new to working with AJAX and PHP echo variables or arrays. However, I have managed to successfully display images on my website by passing variables from AJAX to PHP and back. The only problem I am encountering is when I try to call a Javas ...

Adjust the color of a contenteditable div once the value matches

I currently have a table with some contenteditable divs: <div contenteditable="true" class="change"> This particular JavaScript code is responsible for changing the color of these divs based on their content when the page loads. However, I am now ...