Search code examples
camerathree.jsrotationcube

ThreeJS cube rotates automatically when Mesh.position.x is negative

I'm a dummie\newbie in ThreeJS. :)

Anyways, I think this is the default behavior with ThreeJS when you set the position of a Mesh.

I'm trying to design\replicate a structure in ThreeJS similar to a Project's Work Breakdown Structure (WBS). See picture bellow. All the boxes\cubes in the WBS are aligned.

enter image description here

This is what is happening with my code in ThreeJS:

enter image description here

I created a helper function called createCube that accepts an object like this as parameter:

var gestaoProjeto = createCube(
{ face1: { color: 'yellow', text: '1', textColor: 'yellow' },
  face2: { text: '2', textColor: 'blue' },
  face3: { text: '3', textColor: 'black' },
  face4: { text: '4', textColor: 'cyan' },
  face5: { color: 'red', text: 'Gestão do Projeto', textColor: 'yellow' },
  face6: { text: '6', textColor: 'gray' },
  x: -400,
  y: 125
});

I'd like to have the cube's red face in front of the camera\user and have it to move with OrbitControls only if the user interacts with the scene. As you can see in the image above, part of face1 (yellow) is showing already and face5 is rotated.

If I do:

gestaoProjeto.rotation.set(-0.1,0.5,0);

It rotates but it's not good and I'd have to rotate every cube depending on their position.

Is it possible to accomplish what I want "automagically"?

Solution

  • User bai at the ThreeJS IRC Channel answered and was spot-on.

    He told me to use the OrthographicCamera instead of the PerspectiveCamera that is used most of the time in the samples.

    For those interested in some background, here goes a really nice explanation about camera types:

    In order for these meshes to be rendered, cameras must be placed to tell the renderer how they should be viewed. Three.js has two types of cameras, orthographic and perspective. Orthographic projections eliminate perspective, displaying all objects on the same scale, no matter how far away from the camera they are. This is useful for engineering because differing sizes due to perspective could make it difficult to distinguish the size of the object. You would recognize orthographic projections in any directions for assembling furniture or model cars. The perspective camera includes properties for its location relative to the scene and, as its name implies, can render the size of the model based on the properties’ distance from the camera. The cameras control the viewing frustum, or viewable area, of the scene. The viewing frustum can be pictured as a box defined by its near and far properties (the plane where the area starts and stops), along with the “aspect ratio” that defines the dimensions of the box. Any object that exists outside of viewing frustum space is not drawn in the scene — but is still rendered.

    Source: https://www.smashingmagazine.com/2013/09/introduction-to-polygonal-modeling-and-three-js/#cameras