0

I am trying to create a gizmo (a 3D cube) that shows rotation of camera in 3D space. I am using three.js.

I've created a cube and assigned it as a child of main camera. With that structure I can rotate cube in local world with subtracting global rotation of it. Therefore it eliminates effect of camera rotation on cube, and cube remains being oriented to world coordinates.

The issue is that I am using the perspective camera and my cube is at left bottom of the screen. This creates depth at view of cube and gives wrong information about orientation of camera in world space.

Here are some view examples

corner view

top view

Here is the method that eleminates rotation of camera.

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = 
 new THREE.MeshLambertMaterial({color: 0x282828, transparent: true, opacity: 
0.4});
var cube = new THREE.Mesh( geometry, material );
camera.add(cube)
this.rotationUpdate=function(){
    var worldRot=cube.getWorldRotation();
    worldRot._x+=offset;
    worldRot._y+=offset;
    worldRot._z+=offset;
    cube.rotateX(-worldRot._x);
    cube.rotateY(-worldRot._y);
    cube.rotateZ(-worldRot._z);
    debugger;
}

So my question is, how can I manipulate rotation method in a way that cube will be seen as projected on orthographic camera.

TheJim01
  • 8,411
  • 1
  • 30
  • 54
Three Percent Games
  • 45
  • 1
  • 5
  • A perspective camera will render everything with perspective projection. You can't assign perspective to specific objects. Instead, [take a look at this example](https://threejs.org/examples/?q=mul#webgl_multiple_views). It's rendering three separate scenes on the same canvas. You can do the same, with your first scene rendering with a perspective camera, and a second scene rendering with an orthographic camera. To make the smaller cube remain on top of the first scene, clear the depth buffer between renders (see: [`autoclear`](https://threejs.org/docs/#api/renderers/WebGLRenderer.autoClear)). – TheJim01 Feb 09 '18 at 14:00
  • I know I can't change projection method according to object. Instead I was looking for a mathematical solution which gives me how much to rotate cube for simulating orthographic view. Because if I take cube to middle of camera, it becomes perfectly oriented with camera rotation. And while I know how far is the cube from middle of camera, I thought I could calculate the required angles somehow. But your suggestion may work. I will try that. Thanks :) – Three Percent Games Feb 09 '18 at 15:58
  • You can do `object.lookAt( camera.position )`, but that's not projecting the object differently, just rotating to face the camera. – Don McCurdy Feb 09 '18 at 23:28
  • You need to create two scenes; one that contains the gismo and the other contains your world. For how to render them take a look at https://stackoverflow.com/a/12666937/1980846 – gaitat Feb 10 '18 at 03:58

0 Answers0