Positioning a video within a sphere using Three.js

Currently, I am utilizing Three.js to implement a video display where users can navigate through the video using their mouse. You can see an example of this functionality here:

You can find the code for this project here: https://github.com/mrdoob/three.js/blob/master/examples/webgl_video_panorama_equirectangular.html

I am interested in displaying the user's current position and direction within the container, much like the example shown here:

In the top left corner of the layout, there is a small square that indicates the current viewing angle. I am trying to determine how to capture both the position and direction of the view in a 2D format.

Is there a way to achieve this?

edit:

The orientation aspect has been resolved.

Now, my focus is on determining the position of the viewer within the video layout. Is there a way to achieve this? For reference, here is an image depicting what I am aiming for: https://i.sstatic.net/AEmPp.jpg

javascriptthree.js

Answer №1

To retrieve the camera's direction and determine the angles, you can calculate your 2D orientation on a sphere using the following method:

var dir = camera.getWorldDirection();
var groundProjection = dir.clone().projectOnPlane(new THREE.Vector3(0,1,0))
var longitudeRadians = Math.atan2(groundProjection.x, groundProjection.z);
var latitudeRadians = Math.atan2(groundProjection.length(), dir.y)

// longitudeRadians ranges from -3.14 to 3.14
// latitudeRadians ranges from 0 to 3.14

For a practical demonstration, see this example: https://jsfiddle.net/holgerl/bqvdotps/

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

Identifying sluggish GPU performance on a mobile device using three.js: A guide for developers

My game runs extremely slow on older mobile devices like the Samsung Galaxy S4 and iPhone 5 when shadows are enabled. However, when shadows are turned off, performance improves significantly. Is there a way to detect a slow GPU in order to disable sh ...

javascriptperformancethree.jswebglgpu

Improperly styled select options - Fix it with JQuery

My issue is that my second select dropdown is showing each letter of the data retrieved from the server instead of displaying each item individually. Below is the JQuery code I am using: var selected_table = $("#id_TableName option:selected").text(); ...

javascriptjqueryhtmldjango-viewsdjango-ajax-selects

What is the best way to switch back and forth between Bootstrap 5.1.0 modals?

I encountered an issue where the first modal remains visible when opening the second modal within the initial popup. Can anyone explain why this is happening? Furthermore, I noticed that the backdrop for the second modal is darker, indicating that it is s ...

javascripthtmltwitter-bootstrapbootstrap-5

Encountering a Node.js issue when attempting to properly sanitize data before inserting it into MySQL

This is a snippet of code that I am using to insert data into a MySQL table. Before running the query, I escape the values like so: const mysql = require('mysql'); const R = require('ramda'); class Repository { constructor(connectio ...

javascriptmysqlnode.js

Changing an array in PHP to a variable in JavaScript

I am struggling with converting a PHP array into a JavaScript variable using json_encode. When I print out my PHP variable: <?php $damage_array = $listing->tire_detail->damage_details; ?> It displays as: Array ( [lf] => 4 [rf] => 9 [lr ...

javascriptphparraysjsonvariables

How can I implement Before() and After() hooks within a hooks.js file for a Selenium and JavaScript project?

Within my Selenium JS / Cucumber framework, I have incorporated Before() & After() functions to handle the setup and tear down of my webdriver. To manage these functions, I decided to organize them in my customSteps.js file alongside other cucumber st ...

javascriptseleniumcucumbercucumberjs

Error message: When working with Protobuf, an uncaught reference error occurs because the 'exports

Currently, I am in the process of configuring protobuf to work with typescript. According to the official Google Documentation, all that is needed is to execute npm install google-protobuf and then to include require('google-protobuf'). Unfortu ...

javascripttypescriptnpmprotocol-buffers

I have been unable to find a solution for the non-functioning jQuery (3.4.1 / 3.3.1) load() issue

I have been working with jQuery's .load() function Take a look at my code snippet: <html> <head> <meta charset="utf-8"> <title>load demo</title> <script src="https://code.jquery.com/jquery-3.4.1.js"> ...

javascriptjqueryajax

Is it possible to automatically update views immediately after performing a CRUD operation?

In my basic CRUD application, I am facing an issue when making an AJAX call to delete a document. I want the view to be updated with the new list of documents immediately after deletion. I have experimented with using ajaxStop / ajaxSuccess and setTimeout ...

javascriptnode.jsajaxelasticsearch

Highcharts failing to connect the dots with lines between data points

UPDATE: After some investigation, it turns out that the issue stemmed from inconsistent intervals. By following the solution outlined in this post, the problem was easily resolved. I have implemented highcharts to create a chart, where the initial data po ...

javascriptajaxhighcharts

Ways to verify that express middleware triggers an error when calling next(error)

I attempted to capture the error by using next() when stubbing it, but unfortunately it did not work. Below is the function: async getUser (req, res, next) { try { if (!req.user) { throw new CustomError('User not found', 404) } ...

javascriptunit-testingexpresschaisinon

Instructions for removing all entries from a DynamoDB table

I am facing a challenge with deleting multiple items from a DynamoDB table. While the documentation suggests dropping and recreating the whole table, I want to avoid this approach as my table was created using AWS Amplify and I don't want to risk disr ...

javascriptamazon-dynamodb

Spread the picture on social media using Progressive Web App

I am currently working on a Nuxt PWA where I have implemented a function to convert HTML to Canvas using a specific package. The output generated is in base 64 format. My goal now is to find a way to easily share this image through various platforms such a ...

javascriptvue.jsnuxt.jshtml2canvasweb-share

Manipulating child classes using jQuery

I am struggling to display an X icon next to a tab on my page when the tab is clicked, but I am facing difficulties in toggling its visibility. The issue arises when trying to access the span element within the tabs. $('.tabs .tab-links a').on(& ...

javascriptjqueryhtmlcss

Error message: The Next.js GraphQL-Yoga server is returning a 404 error on the

I am brand new to using graphql-yoga 3 in conjunction with next js for creating APIs with GraphQL. Unfortunately, my routes at /api/graphql are returning a 404 error even though I have followed the example provided here. The default page loads fine, but I ...

javascriptnext.jsgraphql

Executing a JavaScript function once an iframe has finished loading

I currently have this code on my index.html file: <body> <iframe id=iframetest src="alt.html"> <p>Your browser does not support iframes.</p> </iframe> <script> $(window).load(function(){ ...

javascriptphpjqueryajax

Tips for obtaining Array elements within a JSON object utilizing handlebars

var express = require('express'); var router = express.Router(); var data = { products :{ name:'Computers', price:'500' }, items:[ {name: 'Keyboard' , cost:'50'}, {name: 'M ...

javascriptjsonnode.jsexpresshandlebars.js

Tips for enhancing the fluidity of animations after removing an item from a list

I'm working on a project where I have a list of elements that are removed with an animation when clicked. However, I noticed that when one element is removed, the rest of the elements just jump up instead of smoothly transitioning. Is there a way to m ...

javascriptjquerycss

Mongoose: utilize populate for fetching records; if not, return an array of records

Learning MeanJS and encountering Mongoose issues. Two models are in question: CategorySchema: - name: String, default:'', required: 'Please fill Category name', trim: true - slug: String, default:'', trim: true, unique: tr ...

javascriptmongodbmongoosemongodb-querymongoose-populate

Developing a custom logging middleware with morgan

I am trying to develop a middleware using morgan. I have attempted to export the middleware function and then require it in app.js. However, I am facing an issue where it is not working as expected. Middleware: const morgan = require('morgan&apos ...

javascriptnode.jsexpressmiddlewaremorgan