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

我目前正在开发一个小游戏，只是为了消磨时间——我一直在用CSS3变换等进行大部分渲染 ) （此版本的代码为）

因此，现在我正试图将其改写为一种更强大的方式，目的是让虚拟世界中的更多东西（有效的光线、天气、阴影、昼夜循环等）以更少的CPU密集度实现

不管怎么说，问题在于我对3D图形的了解太多了，所以经过一些尝试和错误，我终于得到了答案 ) 但现在，当涉及到重写时，与我目前使用CSS转换所取得的成果仍然相去甚远

处理游戏逻辑的代码仍然是一样的，我正在使用three.js上的包装器，特别是在src/render中：

在这方面，我有：

  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看起来仍然很不一样）

那里的代码基本上是一字不差的

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

在manthrax的帮助下修复了它

解决此问题的代码：

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

---

在瓷砖上

三分之一的CSSRender符合您的描述：）但是如果您已经有了资产和东西，我谦虚地建议您直接使用3d/webgl！我正试图避开CSS，以便将来可能使用着色器，这更像是一个经得起未来考验的重写（目前，瓷砖只是素色，还没有纹理），我帮助缓和three.js dev的松弛。。。欢迎随时来访，我们可以帮助您完成过渡。：）还有“倾斜”相机矩阵的概念，这相当于现实世界中的“倾斜/移位”镜头。当天真地设置正交相机来实现这一点时，我想你会得到一些高度缩短。你可以扭曲这个矩阵，使1的高度始终为1，或者做一些类似“骑士投影”的事情。你能给我一些资源吗？

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