Three.js 轴方向答案

【问题标题】：Three.js axis directionsThree.js 轴方向
【发布时间】：2016-10-02 14:25:44
【问题描述】：

当我在 three.js 中绘制向量时，我意识到轴有点搞混了。我可以处理 Y 作为垂直轴，但 X 和 Z 都是“镜像”的，我可以看到我想要的对象，只有当我倒置时。我该如何解决？我可以旋转相机表示/对象，但我认为它不会起作用。我需要一个通用的 World 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 表示：这是应该的

【问题讨论】：

没有代码我们如何测试您的应用程序？
我不知道如何上传包含所有来源的文件夹。
您应该用最少的代码示例重现您的问题。无需上传所有源代码。您可以使用 jsfiddle、codepen..etc 添加其他代码。我猜相机位置是错误的。
babameca.comlu.com/?run=cuki.js 在这里

标签： javascript three.js

【解决方案1】：

目前尚不清楚您所追求的确切行为，但请尝试为相机指定不同的向上矢量。例如：

camera.up(0, 0, 1);

...假设 camera 包含您用于渲染的相机，并且您希望 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 是蓝色）。取消注释设置相机向上向量的行并重新运行它以查看差异。

【讨论】：