Forums » Everything else » Three.js and impactjs demo

Hey guys,

A friend of mine on facebook just linked this thing: http://asmallgame.com/labsopen/webgl_impact/

I checked on the forums but I didn't see anyone link it before. I didn't look too deeply into the code, but it looks like an interesting way to make impactjs games render in 3D.

It's an impressive demo but without any kind of explanation behind it I wonder how much of Impact it's really using anymore.

Agreed. Impressive, but I'm guessing you're using very little of Impact. I also couldn't get the player to move. Is there a code dump anywhere?

Hi! Great to hear that you like the demo :) I made it together with Richard Åström (@boybacteria on twitter).

I don't know why you think it doesn't use much of impact so I'll try and quickly explain how it works.
It runs the jetpack physics demo http://impactjs.com/demos/physics/ with nothing changed or modified except that it doesn't draw anything to the canvas.

What you see instead of the normal impactJS canvas is a Three.js scene. We made a 3d-environment that matches the 2d-map and separate models for the player,box and bullets.

When the game inits we set which 3dmodels that should be used for each entitytype, and if you didn't select one it just uses a box instead.
Then on every update of the game there's a simple function that goes through all the entities in ig.game.entities and updates the position of the corresponding 3d-objects. It also creates and remove objects if needed. (If there's an object in ig.game.entities that doesnt exist in the 3dscene, it creates one and vice versa)

@ quidmonkey: The player is supposed to move :) What browser and system did you use?

Very cool. I don't suppose this'll show up on Github?

I did get the player to move. Realized I was using an older version of Chrome.

Ahh, very cool. Thanks for the insight. I'd love to see some source as well.

Something defintely less impressive but with sources

I'll try and make it a bit more user-friendly and then put it on Github. But as i explained earlier it isn't that much going on besides updating positions of the 3d-objects. Most of the work went in to making the scene and lighting etc look good.

Yea, after that explanation I can understand the simplicity behind it but I'd still love to see the source. ;)

I'd also love to see how to do that thought it looked absolutely beautiful!

For anybody who is still interested I got a bare bones version working and the source is sitting up on private Github repo (private because it includes the Impact.js files which I'm not sure if I can share?). I didn't bother with the post-processing, however, and the jetpack effects aren't quite as pretty as seen in the demo.

Disclaimer: All credit goes to chribbe & Richard Åström - all I did was take out the bare-minimum to make it work, made it look pretty, and got it working on the latest versions of Impact/three.js. Anybody can easily view the source if they want, I just wanted to make there lives a little easier. :)

I took out all the impact stuff from the repo, here's the link: https://github.com/12eebok/physics3D

As noted in the readme I can transfer ownership or remove upon request.