在Three.js中正确模拟等轴测渲染

Question

我目前正在开发一款小型游戏，只​​是为了消磨时间-我一直在使用CSS3变换等进行大多数渲染工作。 ） （此版本的代码为here）

因此，现在我正在尝试将其重写为更强大的方式，目的是在不占用大量CPU的情况下在虚拟世界中提供更多内容（有效的光照，天气，阴影，昼夜循环等）。方式。

无论如何，问题出在我的非-3D图形知识广博，因此通过反复试验，我设法获得了 ） 但与我目前使用CSS转换所取得的成就相去甚远，目前，this is what I have so far (code-wise)涉及到重写

用于处理游戏逻辑的代码仍然相同，并且我正在研究Three.js的包装器，这些包装器位于src / render中，尤其是Camera：

  const camera = this.props.ctx.renderer.camera
  camera.position.set( lookAt[0]+20, 20, lookAt[1]+20)
  camera.lookAt(lookAt[0], 0, lookAt[1])

在Renderer中，我得到了：

  let d = 15
  this.camera = new THREE.OrthographicCamera(-d, d, d, -d, 0.1, 1000)

  this.camera.position.set( 30, 30, 30 ); // all components equal
  this.camera.lookAt(new THREE.Vector3(0,0,0))

（d = 20看起来还是很不一样）

那里的代码基本上是逐字this answer

我目前的目标基本上是使用three.js获得与CSS3转换当前相似的渲染。

在关节轴的帮助下修复

解决此问题的代码：

cube.rotation.x = Math.PI * -0.5

在图块上