Is it possible to interpret the camera using radius or diameter instead of the traditional x, y, z coordinates

I've been exploring this scenario where I am trying to figure out if it is possible to move a camera by adjusting the radius and diameter instead of using x, y, z positions (Vectors). Currently, I am working with a cube, but my goal is to introduce a second camera.

https://i.sstatic.net/Xsw8r.png

Considering that I know the location of the origin at 0,0,0, is there a way to translate the cube by setting the diameter or radius, while ensuring it remains fixed at the origin?

This is the code snippet I am using to move the Cube (Three.js)

var posX,posY,posZ;
var scene, camera, render;
var cubeMesh,cube_Geometry, cube_Material;

class myWorld{
    /* ... Setting up the World ... */
    //execute cube();
    /* ... Updating and getting positions (xyz) ... */

    cube(){
        cube_Geometry = new THREE.BoxGeometry(20, 20, 20);
        cube_Material = new THREE.MeshNormalMaterial();
        cube_Mesh = new THREE.Mesh(cube_Geometry, cube_Material);
        cube_Mesh.position.set(0, 100, 100);
        scene.add(cube_Mesh);
    }

    animate(){ //loop function
        //THREE.Mesh.position.set (Three.js)
        cube_Mesh.position.set(posX, posY, posZ);
    }
}

The desired outcome would ideally look like: https://i.sstatic.net/HwHrv.png

Answer №1

Utilize the Spherical method along with setFromSpherical:

var radius = 10;
var theta = 310 * (Math.PI / 180); /// Convert 310 degrees to radians

var sphericalPosition = new THREE.Spherical(radius, 0, theta);
cube_Mesh.position.setFromSpherical(sphericalPosition);
// Alternatively, you can use cube_Mesh.position.setFromSphericalCoords(radius, phi, theta)

Spherical(radius: Float, phi: Float, theta : Float)

  • radius - the distance from the point to the origin in a straight-line path. Default value is 1.0.
  • phi - the polar angle from the y (up) axis. Default value is 0.
  • theta - the angle around the y (up) axis at the equator. Default value is 0.

The poles (phi) are located on the positive and negative y-axis. The equator (theta) begins at positive z.

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

HTML animation effect on subpage with a URL modification [LATEST UPDATE]

Can you smoothly load a new subpage in the background, update the URL, and fade it in while an animation is playing on the previous page? Check out this example (jsFiddle) to see a simple animation: $(document).ready(function() { 'use strict&apo ...

Angular: Modify value when checkbox is ticked

Controller: promiseObj.physical = $http.get('search?sumBoth=1&customer=' + customer).success(function(data) { $scope.servers = data; // retrieve data from JSON }); View: <tr ng-repeat="data in servers | filter: { _id: { idc: item._ ...

Executing a Ruby function via AJAX

I am fairly new to working with ajax, and I find myself in need of using it for my Rails application. Here is the function in my controller: def check_code input = params[:input] code = params[:code] if input == code return true else retur ...

Inject the JavaScript template into an HTML page within a <div> element

Looking for a solution to format JSON API data listing books with title, author, and other properties into HTML? Utilizing ES6 backticks and JavaScript templating, the challenge arises when needing to display two cards per row on the HTML page. The issue l ...

Properties that cannot be modified, known as read-only properties,

While browsing through this post on read-only properties, I stumbled upon the following code snippet: var myObject = { get readOnlyProperty() { return 42; } }; alert(myObject.readOnlyProperty); // 42 myObject.readOnlyProperty = 5; // Assignment al ...

Remove option from MUI Autocomplete after it has been selected

I am currently utilizing a Material-UI Autocomplete component. To avoid users selecting the same element twice, resulting in duplicate ID numbers, I want to remove the element from the dropdown entirely. For instance, if "Shawshank Redemption" is selected ...

Webpack and terser reveal the names of the source files in the compressed output

Is there a way to stop source filenames from appearing in webpack output even when using Terser for minification? Illustration After minifying my production React app build, the resulting .js output file still contains original source filenames rather th ...

Issue with integrating Google Spreadsheet as the data source for a Next.JS website: updates are not reflecting on the website pages

The website for this restaurant was created by me, using Google Spreadsheet to populate the menu pages. I chose this method for its simplicity and familiarity to the client. I'm utilizing the google-spreadsheet package to extract necessary informatio ...

How can you add draggable functionality to a Bootstrap dropdown menu?

My custom bootstrap dropdown design <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span cla ...

After a single click, the functionality of jquery.nav.js seems to be malfunctioning

Encountering an error message: Uncaught TypeError: Cannot read property 'top' of undefined(…) jquery.nav.js:183 In an effort to convert my web app into a Single Page Application (SPA) using the jquery.nav.js library (available at https://githu ...

Displaying JSON data dynamically by iterating through it in a loop

While working with JSON data in a loop, I noticed that the code quality does not meet my expectations. I have a feeling that I might be missing something in my approach. $(function(){ $.getJSON('data.json', function(data){ let content ...

Utilizing ReactJS useState to eliminate a className

Basically, I'm trying to remove a className from an element when a button is clicked. I've attempted to use useState hooks and a regular function, with the onClick event on the button triggering this function/setUseState. However, the className l ...

Is it possible to create a hyperlink in the <button> element?

Having been immersed in HTML5 for quite a while now, I recently encountered a challenge while working on my login/register page project. I wanted to create a button that would redirect me to another HTML page upon clicking. While I am familiar with the < ...

Decoding the enigma of addEventListener in Nuxt: Unveiling the "referenceError: window is not defined" issue

I am currently working on developing a hamburger menu, but I have encountered an error. The error message states: ReferenceError: window is not defined. The issue seems to be within the created section of the code. <script> export default { ...

performing an action using vuex in a component's method

I am facing an issue where I am trying to dispatch an action and retrieve the values passed into an input field. When I directly dispatch an action on a button, everything works perfectly fine: <button type="button" @click="store.dispatc ...

The show more/show less link for a long jQuery paragraph is malfunctioning

I encountered an issue while coding where the "read more" link works correctly, but the "show less" link does not. Despite my efforts, I cannot seem to identify the error. Within this code snippet, there is an anchor tag with class="show-less" that I am u ...

Transmit information using jQuery to an MVC controller

I am developing an ASP.NET MVC3 application and need to send three pieces of data to a specific action when the user clicks on an anchor tag: <a onclick='sendData(<#= Data1,Data2,Data3 #>)'></a> Here is the javascript function ...

Encountered an error when attempting to load resource: net::ERR_CERT_AUTHORITY_INVALID following deployment on Vercel

I recently deployed a chatUI-app on Vercel that fetches chats from an API located at "http://3.111.128.67/assignment/chat?page=0" While the app worked perfectly in development, I encountered an issue after deploying it on Vercel where it ...

Should I return X in async functions, or should I return "Promise.Resolve(X)"?

I've always found this to be a tricky concept to fully grasp. Let's delve into async functions in Typescript. Which implementation is accurate? async function asyncFunctionOne(string1: string, string2: string, string3: string) { var returnOb ...

Receiving a `combined` error when updating Meteor isopacket - sourcemapConsumer.destroy function is not recognized

Whenever I attempt to update or create a project using Meteor version 1.9 and above, I encounter the following error: Errors prevented isopacket load: While loading isopacket `combined`: C:\Users\USER\AppData\Local\.meteor\p ...