Having trouble deciphering the code snippet in JavaScript

I'm having trouble grasping the execution of these code lines.

What does `project(camera)` do and what is the significance of `screenVector` in this context?

    function labelBox(Ncardinal, radius, domElement)
    {
    this.screenVector = new THREE.Vector3(0, 0, 0);
    this.position = convertlatlonToVec3(Ncardinal.lat,Ncardinal.lon).multiplyScalar(radius);
    this.box = document.createElement('div');
    a = document.createElement('a');
    a.innerHTML = Ncardinal.name;
    a.href ='http://www.google.de';
    this.box.className = "spritelabel";
    this.box.appendChild(a);

    this.domElement = domElement;
    this.domElement.appendChild(this.box);
    }

labelBox.prototype.update = function()
{
this.screenVector.copy(this.position);  
this.screenVector.project(camera);

var posx = Math.round((this.screenVector.x + 1)* this.domElement.offsetWidth/2);
var posy = Math.round((1 - this.screenVector.y)* this.domElement.offsetHeight/2);

var boundingRect = this.box.getBoundingClientRect();

//update the box overlays position
this.box.style.left = (posx - boundingRect.width) + 'px';
this.box.style.top = posy + 'px';

this.occludeLabel(this.box, this.marker);

};

Answer №1

Vector3.project( camera ) is a function that takes a 3D point from world space and transforms it into normalized device coordinate (NDC) space. For more information, you can visit .

This method is essential for converting a 3D point from world coordinates to screen coordinates in pixels. You may find this link helpful: .

This code snippet pertains to three.js version r.81

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

What is the best way to extract information from a large dataset?

I have a wide range of data stored in the Data_Array below. How can I extract only the 5th and 6th indexes of the data automatically? var Data_Array = ["BETA 135 MEMB 3 6", "MATERIAL STEELAPPROX ALL", "SUPPORTS", ...

Design a logo to serve as the main button on the navigation bar of the

I've been experimenting with adding a logo instead of the 'Home' text in my navigation bar, but I'm not sure where to implement it. Should I add it within #nav or separately? Also, I want the nav bar to stay fixed without overlapping on ...

Transform JSON time data from Coordinated Universal Time (UTC) to Indian Standard

Hello, I consider myself an amateur in the world of online javascript learning. Currently, I have come across a challenge that has left me stuck. I am working with a JSON time data provided in UTC format (e.g. 16:00:00Z) and my goal is to convert it to IS ...

Challenges with rendering in Vue.js when setting up a simplistic Trello-style system using Mongoose and MongoDB

I'm currently developing a basic functionality kanban board. Currently, I have 4 models set up: User Model var userSchema = new Schema({ name: { type: String, required: true } }) module.exports = mongoose.model('User', userSc ...

How can one extract dates from a range using mongoose?

Currently, I am working on a rental app project. One of the key functionalities I am trying to implement is the ability to determine the availability of cars between two specified dates, including those dates themselves. Within the database, I have two mai ...

Leveraging XSL for presenting KML data within an interactive HTML table

It has been a while since I last delved into coding, so I appreciate your patience... I have an application that generates the following non-standard kml file: <?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2"> ...

An erroneous if statement in JavaScript is being triggered

I have a series of if statements that output different strings from corresponding lists based on the input (feelsLike). View Code Initially, it identifies the range in which feelsLike falls and then concatenates all items in the list into the string. Whe ...

Explore an interactive platform designed for navigating through a dynamic array of folders

As a beginner in web development, I am facing a challenge creating a webpage to display a directory structure and its files. Manually creating hyperlinks for the numerous folders and files seems overwhelming. Is there a simpler solution to accomplish this ...

The class field remains unset

I'm currently developing my own custom CQRS library and I've encountered an issue where a specific field is not being set correctly. The problem appears to be within classes that extend my AggregateRoot abstract class. Take a look at the followin ...

Why isn't setInterval set to a duration of one thousand milliseconds?

While trying to use some code from w3schools, I noticed that the setInterval in the example is set to 5 instead of 5000. Shouldn't it be in milliseconds? If not, how can I speed up this animation? When I try reducing it to decimals like 0.01, the anim ...

Froala Editor: Innovative external toolbar that pops up when the button is clicked

In our project, we are implementing the latest version of Froala and aim to configure it so that the toolbar is activated by a separate external button, similar to Gmail where the editor initially does not display a toolbar. I attempted to modify the &apo ...

Designing a unique diagonal layout with HTML and CSS

Hey there, I have a question about creating diagonal backgrounds in web design. I've seen websites like Udacity and one my friend is working on that feature diagonal shapes or designs in the background. I'm curious about how to achieve this effec ...

How can Angular's as-syntax be used to access the selected object?

When using syntax like ng-options="p.id as p.name for p in options" to select options, I encounter an issue. I require access to the variable p as well. This is necessary for displaying additional labels near inputs or buttons, or even making changes to in ...

I am facing an issue with the javamail.setFrom() method in my Spring application

When using Java mail, the user is trying to implement the functionality of receiving inquiries via email. However, there seems to be an issue with the setFrom() function where the authenticated mail address overrides the email address that is being set by ...

warning: issue detected with the password value in jquery

Why is the following script generating an incorrect JavaScript alert message? <script type="text/javascript> $('#cpassword').change(function() { var pass=$('#password').val(); alert(pass); var cpass=$(& ...

Mastering Vue.js Component References

Here is the code snippet I am working with: <input type="text" @input="disableField($event.target)" :disabled="isFieldDisabled(????)" /> I am trying to pass the same value from $event.target to the isField ...

Transferring PHP array data to JavaScript without being exposed in the source code

In the process of creating a historical database, I am currently handling over 2,000 photos that require categorization, out of which approximately 250 have already been uploaded. To efficiently store this data, I have set up a MySQL database with 26 field ...

How can I alleviate TypeScript compiler error TS2339 warnings?

Utilizing the TypeScript compiler has been instrumental in my coding process, as it allows me to catch potential defects at an early stage. One particular warning that the compiler flags is TS2339, which verifies if a type has a specific property defined. ...

Create a JavaScript function that performs multiplication and returns two distinct calculations

Upon examination of the embedded script below, I noticed that it is only providing a single result (500). How can I modify my code to generate both results? Your advice on this matter is greatly appreciated. function multiplier() { var number = 2 ...

What is the best way to remove a border piece with CSS?

Currently, I'm attempting to achieve a matrix effect purely through HTML and CSS. One method I have come across involves applying a solid border and then removing certain parts at the top and bottom. Does anyone know if it's possible to create th ...