I'm struggling to grasp the implementation of this specific mathematical equation using JavaScript

I'm having trouble grasping the significance of this line in the code

this.position = convertlatlonToVec3(cardinal.lat, cardinal.lon).multiplyScalar(radius);
within the labelBox function. Can you explain how multiplyScalar(radius) functions?

function convertlatlonToVec3(lat, lon)
{
  var cosLat = Math.cos(circle.getCenter().lat() * degrees);
  var sinLat = Math.sin(circle.getCenter().lat() * degrees); 

  var xSphere = radiusEquator * cosLat;
  var ySphere = 0;
  var zSphere = radiusPoles * sinLat;
  var rSphere = Math.sqrt(xSphere*xSphere + ySphere*ySphere + zSphere*zSphere);

  var tmp = rSphere * Math.cos(lat * degrees);    

  xSphere = tmp * Math.cos((lon - circle.getCenter().lng()) * degrees);
  ySphere = tmp * Math.sin((lon - circle.getCenter().lng()) * degrees);
  zSphere = rSphere * Math.sin(lat * degrees);

  var x = -ySphere/circle.getRadius();
  var y = (zSphere*cosLat - xSphere*sinLat)/circle.getRadius();
  var z = 0;

  return new THREE.Vector3(x, y, z);

}

function labelBox(cardinal, radius, root)
{
  this.screenvector = new THREE.Vector3(0,0,0);
  this.labelID = 'MovingLabel'+ cardinal.ID;
  this.position = convertlatlonToVec3(cardinal.lat, cardinal.lon).multiplyScalar(radius);
}

Answer №1

Learn more about Three.js in the official documentation here
To understand how to use the THREE.Vector3 multiplyScalar method, refer to the documentation here:

.multiplyScalar ( s ) this
This method multiplies the vector by a scalar value s.

You can find the implementation details of this method in the THREE.Vector3 class, which looks like this:

multiplyScalar: function ( scalar ) {

    if ( isFinite( scalar ) ) {

        this.x *= scalar;
        this.y *= scalar;
        this.z *= scalar;

    } else {

        this.x = 0;
        this.y = 0;
        this.z = 0;

    }

    return this;

},

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

Is it possible to alter the cursor according to the position of the mouse?

Is it possible to change the cursor from default to pointer when the mouse enters the specific rectangle area (50, 50, 100, 100) of the body? The dimensions are in pixels. Instead of defining a separate div and setting the cursor style on it, I'm loo ...

Connecting a shared store to multiple single file components in Vue.js 3 - here's how!

In my Vue.js 3 application, I have several single file components and I am looking for a simple way to manage global state. The documentation on state management is helpful, but it mainly focuses on using a reactive object returned from the data function w ...

Unlock the full potential of the PanelSnap plugin in your angular2 project with these easy steps

I had been successfully using the jquery.Panelsnap plugin on my static HTML pages. However, as I am now transitioning my application to angular8, I am encountering difficulties in referencing the PanelSnap plugin. npm install panelsnap Within my app. ...

Origin Access-Control-Allow Not Recognized

Currently, I am developing a node.js app and have encountered a strange issue: This particular Angularjs snippet... // delete hosts $scope.delete = function(row) { var rowData = { hostname: row.hostname, ipaddr: row.ipAddress, ...

What is the best way to instruct firebase-admin to halt during test execution?

Running process.exit() or --exit in my mocha tests doesn't feel right. I'm currently working on code that utilizes firebase-admin and while attempting to run mocha tests, wtfnode showed me: wtfnode node_modules/.bin/_mocha --compilers coffee:co ...

automating the styling of elements

Hey everyone, I have a specific element that I want to conditionally apply multiple styles to. Initially, I approached it like this: <Text style={[ discountCodeState === '' || !isActiveHandler(value) ? [ ...

Is it possible to extract JSON data from a reverse geocoding request to Google

Looking to extract specific information from a reverse geocode response using Google Maps JavaScript API v3. geocoder.geocode({'latLng': latlng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { ...

What causes the unexpected behavior of __filename and __dirname after being minified by webpack?

Could someone offer some insight into a strange issue I've encountered? In my project, the structure is as follows: index.js src/ static/ favicon.ico styles.css server.js routes.js app.jsx //[...] dist/ /sta ...

Error: Unexpected token : encountered in jQuery ajax call

When creating a web page that requests remote data (json), using jQuery.ajax works well within the same domain. However, if the request is made from a different domain (e.g. localhost), browsers block it and display: No 'Access-Control-Allow-Or ...

Having trouble retrieving features from a QR code generated with Angularx-qrcode?

I utilized angularx-qrcode in order to create a QR code that displays data from qrInfo. However, I'm encountering the following error: ERROR TypeError: Cannot read properties of undefined (reading 'qrcElement') The code within qr-code-gener ...

Creating dynamic ColumnDefs for UI Grid is essential for responsive and flexible data

I am currently facing a challenge with my angular UI Grid setup for populating data in reports. With almost 20 reports to handle, I am looking to streamline the process by using one UI Grid for all of them. To achieve this, I am attempting to dynamically c ...

Certain public files in Express cannot be accessed locally

While running my Node.js application on localhost, I am able to access http://localhost:3000/css/dashboard.css without any issues. However, when attempting to access http://localhost:3000/css/logo.png for a logo image in the same directory, all I receive i ...

Tips for distributing a Vue plugin on NPM

I developed a straightforward plugin for Voca.js using Typescript. The source code can be found here. index.ts import VueVoca from './vue-voca'; export { VueVoca }; vue-voca.ts import vue from 'vue'; export default { install( ...

Is there a way to receive notifications on an Android device when the real-time data updates through Firebase Cloud Messaging (FC

I am attempting to implement push notifications in an Android device using Firebase Realtime Database. For example, if an installed app is killed or running in the background, and a user posts a message in a group (resulting in a new child being added in t ...

What is the best way to showcase just 5 photos while also incorporating a "load more" function with

Is there a way to display only 5 images from a list on the first load, and then show all images when the user clicks on "load more"? Here is the code I have: $('.photos-list').hide(); $('.photos-list').slice(1, 5).show(); $ ...

NextJS is throwing an error stating that the function file.endsWith is not recognized as a valid

After upgrading from nextJS version 9.x.x to 12.x.x, I encountered the following error. Any assistance would be greatly appreciated. TypeError: file.endsWith is not a function at eval (webpack-internal:///./node_modules/next/dist/pages/_document.js ...

Enhancing Website Performance with Vue.js 2.0 Lazy Loading

I'm attempting to implement Lazy Loading for my components in Vue.js 2.0 (within a Laravel 5.3 project). As per the guidelines, I should proceed like this: Vue.use(VueRouter); const Forum = resolve => require(['./Components/Forum/Forum.vue& ...

Free up MySQL connections within a Promise.All implementation

At the moment, I am facing issues with releasing MySQL connections from a connection pool. Interestingly, when I release connections in a synchronous "for" loop, everything works fine. However, when I attempt to release them asynchronously using Promise.Al ...

What are the steps to modify the placeholder of the formik <Field/> component?

Struggling to figure out how to make the date input empty with Formik. I just want it to display nothing initially, but have been unable to do so after hours of trying different methods. <Field name="date" type="date" className ...

Tips for triggering a method when clicking instead of using v-for in Vue.js

I need help arranging an array of objects based on their ratings. Currently, I am able to display the items from highest to lowest rating using the v-for method. But, I would like to first display the objects in their original order and then have a button ...