I'm currently working on a small game, just to kill time - I have been doing most of the rendering with CSS3 transforms, etc
)
(the code of this version is here)
So, now I'm trying to rewrite this into a more powerful way with the goal of allowing more stuff on the virtual world (efficient light, weather, shadows, day-night cycles, etc) in a less CPU-intensive way..
Anyway, the problem is my vast non-knowledge of 3D graphics, so with some trial and error I've managed to get
)
But still far from what I have currently achieved with CSS transforms, at this moment, this is what I have so far (code-wise), when it comes to the rewrite
The code which handles the game logic, is still the same, and I'm working on wrappers over three.js, these are in src/render, in particular, 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])
and in Renderer, I've got:
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 still looks pretty different)
The code there is basically taken verbatim this answer
My current goal is basically to get a similar render to what I currently have with CSS3 transforms, using three.js.
Fixed it with manthrax's help
Code which solves this:
cube.rotation.x = Math.PI * -0.5
On the tiles
