Three JS 3D to Top Down 2D - three.js

I am trying to make a game in which someone can click a button to go from 3d to a top-down 2d view. How would I do this? I thought I would need to rotate the camera, but not sure if that's the correct thing to do.
Attached are the images of what I'm trying to do (go from a 3d to a 2d top-down view at the click of a button)
3D view ^
2D Top Down view after button clicked^

Related

How to setup exactly same two 3d viewport

First of all, sorry for my english
I have two 3d viewport, the first one for editing and the other for live render. The problem is i need to orbit again so they have same viewing angle. So is there any other way to do it more easily?
If you have both 3D viewports showing the camera view numpad 0 you can enable Lock Camera to View and both viewports will show the same movement. You can find the lock to view option in the View panel in the properties region N. You only need to lock the one viewport that you will be using to move around in.
As this will actually move the location of the camera, you may want to have a second camera to use for this and switch the active camera between your viewport and rendering camera in the scene properties.

Isometric Sprites

This might be a stupid question but I'm stuck and can't get passed it. I'm making a isometric game and I have my map built using tiles, I just followed this tutorial to build the map, http://www.binpress.com/tutorial/creating-a-city-building-game-with-sfml/137. But now I don't know how to add character sprites. Do I have to add these sprites using tiles as well or do I just draw the the sprites into position of the screen. Any help would be much appreciated.
As far as I can tell from the engine, just follow the "Textures and Animations" guide and draw the Animation to the screen after you have drawn the tiles. This isn't a complicated engine, so you are only working with 2D sprites being drawn to the screen (the 3D effect is merely tricks of painter's algorithm to make it work...there is no z-axis from what the tutorial indicates)
The depth is done by the order of tile rendering
The same goes for objects,players,etc... Let assume plane XY is parallel with the ground and Z axis is the altitude. Then your grid would be something like this (assuming diamond shape layout):
Order of rendering
You have to handle object,players and stuff sprites in the same way as tiles (and in the same time). so you should render all cells in specific order dependent on your grid layout and sprite combination equation. If your sprites can overwrite already rendered stuff then you should render from the most distant tiles to the closest to the "camera". In that case the blue direction arrow on above image is correct and Z axis should be increasing in the most inner loop.
So now if you got any object,player or stuff placed in cell (x,y,z) then you should render it directly after the cell (x,y,z) was rendered prior to rendering any other cell.
To speed up is a good idea to have objects and players in your tile map as a cell. But for that you have to have the tiles in the right manner and also your map representations must be capable of doing so.

Raytracing animated object

Is in any way possible to get intersection of a ray and an animated skin?
I'm trying to highlight animated characters and other objects in my game on mouse over, rather accurately.
I've set up an example of this with my current approach, so you can see the problem:
http://jsfiddle.net/Eskel/k44960Lp/1/
The model is rigged with a single bone and the bone animated to translate from side to side. Raytracing intersection turns it red. You can find the interaction in the middle, where I suppose it interacts with the static geometry.
I'm using Three.Raycaster
raycaster.intersectObject mesh

Can I draw 2D shapes onto on a flat three.js face?

I would like to play around with testing a 3D map, of sorts. At it's simplest, one flat pane, with map lines etc. drawn onto it, flat (as if I was drawing onto an HTML canvas). But I want that pane to be movable in 3D space.
I know that I can make a flat pane in three.js very simply, but is it possible to implement some sort of 'custom texture' that would allow me to programmatically draw onto this pane?
It is called render-to-texture in webGL.
Three.js provides WebGLRenderTarget which can be used as image source for further textures. You render your scene to WebGLRenderTarget instead of main WebGL screen. Then you use this WebGLRenderTarget as image source for the texture.
A lot of 2D post-processing works like this. They render the world to 2D texture, then use fragment shaders to apply per-pixel postprocessing code, like blurring.
For examples, see e.g. http://mrdoob.github.com/three.js/examples/webgl_postprocessing.html
It renders the scene for 2D postprocessing, but the theory is the same.
Here is the WebGLRenderTarget setup code:
https://github.com/mrdoob/three.js/blob/master/examples/js/postprocessing/EffectComposer.js#L14

Remove speed ease from animation in Blender 2.5

By default Blender adds speed easing to the animation. I need to remove it to get consistent rotation speed on my model. How/Where can I modify ease curve?
Thanks
You are able to edit the key frame interpolation in the graph editor. Select your object and then choose the graph editor in the selection box at the bottom left of the screen. You can then zoom out using the scroll wheel to see the curve. You are able to edit the points by clicking them with the right mouse button and moving them with the left.

Resources