Locating the 2D projection position on the screen's edge using Three.js

I am currently utilizing the solution provided in this answer to determine the screen position of 3D objects in three.js:

Converting 3D position to 2D screen position [r69!]

My objective is to draw a 2D line from the position of a 3D object in the scene to a 2D point on the screen. Sometimes, the 3D object may be positioned outside the viewport. In such scenarios, I aim to draw a line from the 2D point on the screen to the edge leading towards the unseen object. However, I require precision in terms of angle and positioning for this line.

Does anyone have any recommendations or suggestions?

javascriptthree.jshtml5-canvas

Answer №1

To achieve this effect, utilize the THREE.Raycaster() method along with the .depthTest = false property within the material of a THREE.Line() object.

raycaster.setFromCamera(mouse, camera);
raycaster.ray.at(1, dummyObject.position);

This code generates a point located close to the camera (1 unit away) that you can use as the starting point for your line relative to your object.

In addition,

var line = new THREE.Line(lineGeom, new THREE.LineBasicMaterial({ color: color }));
line.material.depthTest = false;

The resulting line will always remain visible and won't be obscured by other objects in the scene.

For a live demonstration, check out this jsfiddle example. Feel free to experiment with zooming and rotation to see how the red connecting line adjusts accordingly.

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

Switch the execution of the script by clicking on the button

My website has a script that hides the navigation when scrolling down and shows it again when scrolling up slightly. However, I need to disable this functionality on mobile when the hamburger menu button is clicked. How can I achieve this? Below is the cod ...

javascriptjquery

What is the process for inserting specific characters between JavaScript date values?

In my JavaScript project, I am attempting to adjust the date format to a specific style. The format I aim for is 29-Jan-2021. Currently, with the code below, I can generate "29 Jan 2021": var newDate = new Date('2021-01-29T12:18:48.6588 ...

javascript

Transferring information from Python to JavaScript and receiving a response

Currently, I am working on sending JS data, particularly images that have been collected by a Python file. My goal is to send these images from Python to JS so that JS can perform a certain action (which I will be coding). Afterwards, the final result ne ...

javascriptpythoncanvaspython-imaging-library

Finding the nearest ancestor with a specific class using JavaScript

Is it possible to find the closest ancestor by class using a partial class name? For example: <div class="parent-1"> <div class="child"></div> </div> I'd like to achieve something like this: document.get ...

javascriptjqueryclassclosest

Launch Google Maps within Facebox

When I try to open an edit formula within a jQuery Facebox, I encounter an issue. Under the form, there is a Google Map that should indicate the position of a given address with a marker using the geocoder. However, the map is not showing up within the fac ...

javascriptjquerygoogle-mapsfacebox

Ways to transform epoch timestamp to present timestamp?

Is there a way to accurately convert an epoch timestamp in milliseconds to the current timestamp in milliseconds? My Attempt: var currentTime = (resp.timestamp * 1000) + 1980000000; resp.timestamp represents the epoch timestamp I attempted to add 5 ho ...

javascriptjquery

Display a dynamic creation of a "object/canvas" utilizing Three.js embedded within a DIV element

Check out this Code: I have a dynamic "object" created in Canvas using Three.js, but it's currently appearing at the bottom of the page, just before the closing </body> tag. How can I adjust its position so that it loads inside the "<div id= ...

javascriptcanvasthree.js

What is the method for invoking forEach within an addEventListener function?

I am working with an array of objects containing names and grades of students. My task is to sort them in descending order, which I have achieved using the forEach method. However, I am struggling to figure out how to implement it within an addEventListe ...

javascriptarrays

"The issue seems to stem from a snippet of compact JavaScript

I am facing an issue with a list item that contains both an image and text. The text is overlapping the image, but when I hover over the text, it disappears and only the picture is visible. Here is the HTML code snippet: <ul> <li><img ...

javascriptjquerythis

The error is popping up as I try to deploy my Next.js application on Vercel

warning " > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d0f181c1e095009120d5011121c1914131a501f1c0f3d4f534c534d">[email protected]</a>" has an incorrect peer dependency "react@^16 || ^17" ...

javascriptreactjsnext.js

Is there a way to streamline multiple URLs into a single GET request in a Nodejs environment?

app.get('/',(req,res,next)=>{ const queryObject = url.parse(req.url,true).query; console.log(queryObject) console.log('fetching data'); res.send('hello world'); }); How can I apply this middleware to all in ...

javascriptnode.jsexpressget

Encountered an issue with the property 'push' not being defined

Here's the schema for my mongoose model in JavaScript: const mongoose = require('mongoose'); const Schema = mongoose.Schema; const CartSchema = new Schema({ userID: String, items: [{ itemID: String, quantity: Number }] }); modul ...

javascriptnode.jsmongodbexpressmongoose

Extract the initial line in the grid

I was wondering if there is a way to automatically copy the first value of a row in a grid to all the remaining rows. For example, if I have two columns A and B, and I input a value in column B at the first row, can that value be automatically populated in ...

javascriptasp.net

Rearrange elements within a div by clicking a button

I want to shuffle div elements with a click of a button using a dissolve animation in HTML5. An example of what I am looking for is similar to this website When you scroll on the page, there are links such as All, Intro, Solution. Clicking on any link sh ...

javascriptjqueryhtmlcssbootstrap-4

Strategies for bypassing Jquery form validation within a single form element

I want to implement form validation for all form elements, but I need to exempt one if a specific checkbox is checked. HTML <form id="reg_form"> <div class="control-group"> <div class="control"& ...

javascriptjqueryjquery-validate

In MongoDB (JavaScript), perform querying operations on a single document attribute if it exists; otherwise, use another property

Imagine having the following entries in your "Request" collection: { pickup: { coords: null }, meetup: { coords: [ someLng, someLat ] } }, { pickup: { coords: null }, meetup: { coords: [ someLng, someLat ] } }, { pickup: ...

javascriptdatabasemongodbmongoose

Tips for transforming a JSON response into an array with JavaScript

I received a JSON response from an API: [ { "obj_Id": 66, "obj_Nombre": "mnu_mantenimiento_de_unidades", "obj_Descripcion": "Menu de acceso a Mantenimiento de Unidades" }, { "obj_Id": 67, "ob ...

javascriptjsonvue.js

Encountering difficulties in updating CSS styles using the useState hook in React

I am currently working on creating a modal in react that changes the background color when opened. The goal is to have the background color darken when the modal is activated and return to normal when the modal is closed. I attempted to achieve this using ...

javascriptnode.jsreactjsreact-state

Is there a way to see the default reactions in a browser when keyboard events such as 'tab' keydown occur?

Whenever I press the 'tab' key, the browser switches focus to a different element. I would like to be able to customize the order of focused elements or skip over certain elements when tabbing through a page. While I am aware that I can use preve ...

javascripthtmlbrowserevent-handlingkeyboard-events

Several DIV elements lined up side by side

I've been working on a program that retrieves data from a database, lists some of the data when a button is clicked within the same div, and then creates new divs with buttons that have onclick events until it reaches a certain maximum value. To keep ...

javascripthtmlcss