CODEWITHSUNDEEP
javascriptthree.js
alex747
alex747

Reputation: 149

Three.js axis directions

When I draw vectors in three.js , I realized that the axis are kinda mixed up. I can deal with Y being the vertical axis, but both X and Z are "mirrored" and I can see the objects like I want, only If I look upside-down. How do I fix that? I can rotate the camera representation/objects, but I don't think it will work. I need a general World X Y Z representation change.

The whole program uses:

<script src="jquery-2.1.4.js"></script>
<script src="jquery.blockUI.js"></script>
<script src="getparam.js"></script>    
<script src="dat.gui.js"></script>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script src="Stats.js"></script>
<script src="Program.js"></script>

so I am not sure where the code is.

This is the wrong JS representation: This is the wrong JS representation This is how it should be This is how it should be

Upvotes: 0

Views: 3131

Answers (1)

jbg
jbg

Reputation: 218

It isn't clear exactly what behaviour you're after, but try specifying a different up vector for the camera. E.g.:

camera.up(0, 0, 1);

...assuming camera contains the camera you're using for rendering, and you want Z to be "up". To see how this behaves here's a trivial jsfiddle example:

var scene, camera, cube, light;

init();
animate();

function init() {
  var height = 500,
    width = 500;
  var bg = '#000000';

  scene = new THREE.Scene();

  var axisHelper = new THREE.AxisHelper(50);
  scene.add(axisHelper);

  camera = new THREE.PerspectiveCamera(50, height / width, 1, 10000);
  camera.position.set(20, 20, 20);
  //camera.up = new THREE.Vector3(0, 0, 1);
  camera.lookAt(axisHelper.position);
  scene.add(camera);
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setClearColor(bg);
  renderer.setSize(width, height);

  var d = document.createElement('div');
  document.body.appendChild(d);
  d.appendChild(renderer.domElement);
  var c = document.getElementsByTagName('canvas')[0];
  c.style.width = width + 'px';
  c.style.height = height + 'px'
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  renderer.render(scene, camera);
}

This renders an AxisHelper, showing the orientation of the axes (x is red, y is green, z is blue). Uncomment the line that sets the camera's up vector and re-run it to see the difference.

Upvotes: 2

Related Questions