Compass in Three.js that responds to the rotation of the camera

I have been inspired to create a compass similar to the one featured on Facebook. Take a look at the image here.

I have the x, y, and z rotations of the camera and I want to use them to rotate the FOV (the central slice of the compass) in a 2D circle view. The y-rotation of the three.js camera is limited to a range of -PI / 2 to PI / 2. Can someone provide guidance on how to achieve this? Your assistance would be greatly valued :)

Answer №1

Resolved the identical problem by utilizing THREE.Spherical()

const vec = new THREE.Vector3();
const center = new THREE.Vector3();
const spherical = new THREE.Spherical();
vec.copy(camera.position).sub(center);
spherical.setFromVector3(vec);
const rotation = spherical.theta;
$('#compassSVG > svg')[0].style.transform = 'rotate(' + rotation + 'rad)';

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

Combining two JSON datasets and presenting the merged information

I need help parsing two sets of json data from the following URLs: https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json https://raw.githubusercontent.com/openfootball/football.json/master/2016-17/en.1.json My goal is to di ...

When using jQuery's POST method, the "done" event is triggered, however, no data is being sent

I've been working on implementing AJAX form submission and wrote a function to handle it when the button is clicked: function putUser() { $('button#putUser').on('click', function() { var user = $('input#user' ...

Using AXIOS and VueJs to visually represent data with a two-dimensional array

I'm new to vuejs and I want to display my data response in a two-dimensional table. This is the data I have: [{ "origine": "", "nb": 15 }, { "origine": "?", "nb": 18 }, { "origine": "?L", "nb": 1 }, { "origine": "G", "nb": 298 }, { ...

Experimenting with jQuery's .hide() and .show() functions with an alert message confirming that the div is not

Below is some simple code to demonstrate an issue: $('.myDiv').click(function() { $('.anotherDiv').hide(); alert('pause the ui'); $('.anotherDiv').show(); }); After clicking on the .myDiv element, the ...

Ways to substitute numerous instances of a string in javascript

I have experience in developing websites using reactjs. I usually implement restAPI's with java and work with liferay CMS. In one of my projects, I created a shortcode for accordion functionality like this: ('[accordion][acc-header]Heading 1[/ac ...

Error: The data from the intermediate value cannot be parsed using the parseFromString() method and replaced with another value,

I'm working on a project where I need to display parsed HTML content within an element. However, before displaying it, I need to make some changes to the HTML using the `replace` method. But unfortunately, I encountered a TypeError: (intermediate valu ...

Tips for incorporating Javascript Object Literals into Python code

Using the Beautifulsoup module, I successfully extracted an HTML page and then proceeded to extract a Javascript script tag from that page. Within this script tag lies an object literal that I hope to manipulate. Here is what I am aiming for: <script&g ...

Mastering Typing for Enhanced Order Components using Recompose and TypeScript

I have been working on integrating recompose into my react codebase. As part of this process, I have been experimenting with getting some basic functionality to work. While I have made progress, I am uncertain if I am following the correct approach for usi ...

I wonder where this design is originating from

After exploring several of the suggested questions that appeared while typing, I was unable to find a solution to my issue. Currently, I am utilizing Uikit V2 and I have implemented a div with the Sticky component as shown below: <div class="uk-st ...

Tips for aligning an element vertically when it has a float using CSS or JavaScript

I am struggling with centering the image within the article list loop I created. The code snippet looks like this: <article class="article <?php if($i%2==0) { echo 'even'; } else { echo 'odd'; } ?>"> <section class ...

Having trouble implementing pagination for news-api in Vue.js2?

I am currently working on implementing a basic pagination feature in my Vue component specifically for the newsapi.org API. While my initial API call in the created hook is functioning as expected, I am encountering difficulties navigating to different pa ...

How can I customize the offset and achieve a smooth transition to each section using Jquery or JavaScript in Bootstrap scrollspy?

My goal is to customize the scrollspy offset and create a smooth transition between sections without relying on plugins or data attributes. I have a JavaScript function that sets the offset for scrollspy, but I need help adding a smooth animated scroll eff ...

What is the best way to divide a string into chunks of no more than 2000 characters each at the end of

Here is a brief excerpt from a string variable labeled results ... 2017-09-18 920.0100 922.0800 910.5999 915.0000 1294800 2017-09-15 924.6599 926.4899 916.3599 920.2899 2505400 2017-09-14 931.2500 932.7700 924.0000 925.1099 1397600 2017-09- ...

The functionality of Jquery .slideToggle("slow") seems to be glitchy when used as a table expander

I attempted to implement the .slideToggle("slow"); feature to my table, following the instructions detailed here: W3Schools The toggle effect seems to be functioning, but not as expected. I want the effect to behave similar to the example on the W3School ...

Attempting to execute JavaScript within HTML files that have been incorporated using Angular

My website has a menu designed in HTML, and instead of manually adding it to each page (which would make updating changes tedious), I am using Angular to include it dynamically (<div ng-include="menu.html"></div>). I've got some JavaScrip ...

The functionality of the AngularJS nested router is not functioning properly

I am encountering some challenges with Angular routing, specifically when using nested routes: The current 'abc' state works flawlessly for the route /admin/team/:teamId .state('admin', { url: '/admin', controller: & ...

The getElementByID function will return null in this instance, as it has not been loaded

Hello everyone, I am facing an issue while trying to access an element by its ID in JavaScript as it keeps returning null. This problem arises because the element is not fully loaded when the DOM is initially created, due to a plugin called Restrict Conte ...

JavaScript code to dynamically change the minimum value of an input field when the page

How can I use JavaScript to change the minimum value onload? I tried the following code but it didn't work: <script type="text/javascript">$(document).ready(function(){ $("#quantity_5c27c535d66fc").min('10'); });</script> ...

Is there a way to adjust the quantity of items in the shopping cart without the need to reload the webpage?

Currently, I am working on a test project using React & Redux. The project involves implementing a basket feature where I receive an array of products structured like this: products: [ { name: "Product one", count: 1, ...

Changing from Basic to JavaScript?

Good evening, I am looking to convert this example code from Basic to JavaScript. Since JavaScript does not support the "Go To" command, I would appreciate it if you could help me with the translation. Thank you in advance. 10 x = 1666.66 20 y = 1.007897 ...