ThreeJS立方体在Mesh.position.x为负数时自动旋转答案

【问题标题】：ThreeJS cube rotates automatically when Mesh.position.x is negativeThreeJS立方体在Mesh.position.x为负数时自动旋转
【发布时间】：2026-01-15 17:00:02
【问题描述】：

我是 ThreeJS 的新手\新手。 :)

无论如何，我认为这是 ThreeJS 在设置 Mesh 位置时的默认行为。

我正在尝试在 ThreeJS 中设计\复制一个类似于项目的工作分解结构 (WBS) 的结构。见下图。 WBS 中的所有框\立方体都是对齐的。

这就是我在 ThreeJS 中的代码所发生的情况：

我创建了一个名为 createCube 的辅助函数，它接受这样的对象作为参数：

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
});

我想让立方体的红色脸出现在相机\用户面前，并且只有当用户与场景交互时，它才能使用 OrbitControls 移动。如上图所示，face1（黄色）的一部分已经显示，face5 已旋转。

如果我这样做：

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

它会旋转，但效果不好，我必须根据它们的位置旋转每个立方体。

是否有可能“自动”完成我想要的？

【问题讨论】：

标签： camera three.js rotation cube

【解决方案1】：

ThreeJS IRC Channel 的用户 bai 回答并准确。

他告诉我使用OrthographicCamera 而不是示例中大部分时间使用的PerspectiveCamera。

对于那些对某些背景感兴趣的人，这里有一个关于相机类型的非常好的解释：

为了渲染这些网格，必须放置摄像机来告诉渲染器应该如何查看它们。 Three.js 有两种类型的相机，正交和透视。正交投影消除了透视，以相同的比例显示所有对象，无论它们离相机多远。这对工程很有用，因为由于透视而导致的不同大小可能会导致难以区分对象的大小。您可以识别组装家具或模型汽车的任何方向的正交投影。透视相机包括其相对于场景的位置属性，顾名思义，它可以根据属性与相机的距离来渲染模型的大小。摄像机控制场景的视锥体或可视区域。视锥体可以被描绘成一个由它的近和远属性（区域开始和停止的平面）定义的盒子，以及定义盒子尺寸的“纵横比”。存在于视锥体空间之外的任何对象都不会在场景中绘制 - 但仍会被渲染。

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

【讨论】：