Search code examples
javascriptmaththree.jstranslateradius

Translating camera with radius/diameter instead of x,y,z?

So I have this example as shown below and I was wondering if its possible to translate a camera by changing the radius & diameter instead of using x,y,z positions (Vector). For now im using a cube but I want to add a second camera basically.

enter image description here

Since I know where 0,0,0 (origin) is, is there any way to translate the cube by setting diameter radius or whatever is required and also lock it on the origin?

What I use to move the Cube (Three.js)

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

class myWorld{
    /* ... Setup World ... */
    //excecute cube();
    /* ... Set/Get 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);
    }
}

What I want to achieve: enter image description here

Solution

  • Use Spherical and setFromSpherical:

    var r = 10;
var theta = 310 * (Math.PI / 180); /// 310 degree to radians

var sphericalPos = new THREE.Spherical(r, 0, theta);
cube_Mesh.position.setFromSpherical(sphericalPos);
// or just do cube_Mesh.position.setFromSphericalCoords(radius, phi, theta)

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

    • radius - the radius, or the Euclidean distance (straight-line distance) from the point to the origin. Default is 1.0.
    • phi - polar angle from the y (up) axis. Default is 0.
    • theta - equator angle around the y (up) axis. Default is 0.

    The poles (phi) are at the positive and negative y axis. The equator (theta) starts at positive z.