Three.js轴方向

Question

当我在three.js中绘制矢量时，我意识到轴有点混淆了。我可以处理Y是垂直轴，但是X和Z都是“镜像的”，我可以看到像我想要的对象，只有当我看起来倒置时。 我该如何解决这个问题？ 我可以旋转相机表示/对象，但我认为它不会起作用。我需要一个通用的世界X Y Z表示变化。

整个程序使用：

<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>

所以我不确定代码在哪里。

这是错误的JS表示： 这应该是这样的

Answer 1

目前尚不清楚您的行为究竟是什么，但请尝试为相机指定不同的向上矢量。 E.g：

camera.up(0, 0, 1);

...假设相机包含您用于渲染的相机，并且您希望Z“向上”。要查看其行为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);
}

这将呈现AxisHelper，显示轴的方向（x为红色，y为绿色，z为蓝色）。取消注释设置相机向上矢量的线并重新运行它以查看差异。