3D.City – Game built with three.js and sea3d

http://lo-th.github.io/3d.city/index.html

by huskyr • 12 years ago

434 72 12 years ago

lo-th.github.io

bhouston4• 12 years ago

Beautiful work with Three.js. But the simulation work is also really impressive -- and a lot of work.

Simulation code here:

http://lo-th.github.io/3d.city/build/city.3d.js

Background worker (neat idea) that handles all user input and costly events, to keep the 3D animations consistently fast:

http://lo-th.github.io/3d.city/js/worker.city.js

willvarfar2• 12 years ago

Very neat!

There are small details like laying out roads and making power lines go over them etc that are super-fiddly too.

I know this because I played around with my own simcity for a while, first in true 3D (making curvy roads look nice is damn difficult) and then a 2D grid.

Here's a screenshot I was particularly proud of - the effort to get to that point was more than it looks! http://media.tumblr.com/c9b51ca1eb2b3e89eb8d5af0f560ec34/tum...

More on my algos http://williamedwardscoder.tumblr.com/post/49797579721/willc...

I was going to procedurally produce the buildings using a variation on Eisenscript https://sites.google.com/site/williamedwardscoder/home/exten... with variables in the script based on things like price, distance to other zones, scores etc

I look at the files you link and think "yeah!". I put my city simulation into a Web Worker and the UI in the browser thread though.

agentultra• 12 years ago

The worker code is interesting. Looks like a single observer that watches everything and dispatches to methods on a global state object. One would expect one observer per subject. Is there some implementation detail in web workers that makes this design more efficient than registering an observer per event?

Keloran• 12 years ago

the whole repo, much easier

https://github.com/lo-th/3d.city

jastanton• 12 years ago

For clarity, by user input it handles the callback of the map being clicked to delegate which tool it's going to use and to update the budget etc... I was excited at first to see all the event handlers setup in a thread that wasn't the UI thread because event handlers are expensive but that doesn't appear to be the case. AFAIK webworkers are fairly isolated so something like setting up event handlers would not be possible.

graememcc• 12 years ago

The simulation work is also really impressive -- and a lot of work.

The simulation is from my own micropolisJS (http://micropolisjs.graememcc.co.uk and https://github.com/graememcc/micropolisJS) just stripped of the GPL License headers and attribution.

micropolisJS in turn is a port of Micropolis, the open-source release of Sim City 1989 for One Laptop Per Child.

Edit: edited the link. You'd think I should get links to my own site correct!

judk4• 12 years ago

Is that compliant with your license?

bhouston4• 12 years ago

You should mark up his repository, either add an issue or whatnot, noting that the code is missing your GPL license.

judk4• 12 years ago

My phone is too small -- how many pixels do I need in order for your mJS to render?

utternnonsense• 12 years ago

looks like lo-th updated the license for you :)

ceeK• 12 years ago

Thanks for wasting away the last 30 mins of my life (really it's fantastic, great job!).

huskyr• 12 years ago

Not my game, just posted the link!

willvarfar2• 12 years ago

Here's what Simcity 3D ought to look like! http://media.tumblr.com/tumblr_m1ouer157w1r3qp3f.jpg

(Found it http://www.darkroastedblend.com/2012/03/retro-future-gloriou... here and used it as a desktop wallpaper for ages!)

erikb2• 12 years ago

It's nearly killing my whole computer. What are the requirements to run it?

AlexeyBrin2• 12 years ago

Preferably a WebGL capable browser and video card, otherwise Three.js could potentially switch to HTML5 canvas.

erikb2• 12 years ago

On the newest FF it's very slow (maybe not WebGL?) and on the current Chromium it's not even loading. Both running on a freshly installed Ubuntu 14.04.

mxfh• 12 years ago

The developers, Laurent Thillet, blog is here: http://3dflashlo.wordpress.com/

including other crazy stuff like this: http://3dflashlo.wordpress.com/2014/02/17/png-to-script/

Shengbo• 12 years ago

This is beautiful, thank you for posting.

cturhan• 12 years ago

As a three.js fun, I enjoyed very much. Great job.

aikah• 12 years ago

Nice! quite fun!

diltonm2• 12 years ago

The Load and Save worked, the game is amazingly good. The use of "use strict" blew me away, I had no idea that existed, it gives me a sense that JavaScript is becoming a solid language.

The game, day/night, seasons, I would buy this. It might need to be converted to Java to lower CPU usage but even as JavaScript it actually uses less than I'd have thought.

Very nice work.

On "use strict" I can't believe all the stuff JavaScript allows when it's not used, so I'm glad it exists: http://www.w3schools.com/js/js_strict.asp

jguimont• 12 years ago

The last 10 min reminded me how much time I spent playing SimCity, SimTower and Civilization.

judk4• 12 years ago

It runs almost as fast as simcity native ran on my 33Mhz 486 in 1991.

Is WebGL evere going to really work?

prezjordan• 12 years ago

Something tells me your browser doesn't support WebGL, in which case Three.js will default to canvas operations.

make32• 12 years ago

lol. your brother.

judk4• 12 years ago

Right. That's what's frustrating about WebGL.

bobajeff• 12 years ago

It ran pretty well in Chrome for Android.

A few observations about it: The drag view was buggy so I had to re-click it over and over again. It also crashed on me a a couple of times. Also placing objects was hard to do and it took me awhile to figure out how to drag the screen.

clarry• 12 years ago

Got any screenshots?

louhike• 12 years ago

http://3dflashlo.files.wordpress.com/2014/07/sim14.jpg?w=518

nakedrobot2• 12 years ago

Awesome! Brings back old memories of late nights and precious cities with the very first simcity.

At this point, my browser has ground to a halt, my retina macbook is running very hot, and the little green rectangle does not follow the cursor anymore to aim where i'm going to plant the next building: https://dl.dropboxusercontent.com/u/14314213/Screen%20Shot%2...

cheers!

Kequc• 12 years ago

In Chrome on OS X I find myself clicking to place a zone then having to wait, then move my mouse a tiny bit before the zone would appear. If I started moving the mouse too much after clicking it gets put in the wrong place and if I don't move the mouse the zone never appears.

After 10 minutes I hit a bug where adding more zones seemed to place an 'invisible' zone. Which deleted the trees that were there and could be connected to electricity but didn't draw anything on the ground and would never populate. Or at least I couldn't see if it was populated and I couldn't play anymore.

M2Ys4U• 12 years ago

I've hit that bug a few times. If you save the map, refresh the page, load the map again and bulldoze the invisible zones everything works again.

Redoubts• 12 years ago

Definitely seems to get buggier with time

http://i.imgur.com/oAEulTD.png

seanalltogether• 12 years ago

Happens in firefox osx as well.

Animats3• 12 years ago

I'm seeing those "invisibles" in Chrome/Win7, too. It's as if the display engine has run out of sprites. Is there some limited display resource here?

jplahn• 12 years ago

Really enjoy this! Like everyone else, the nostalgia is so strong.

The only thing that seemed off for me was the "Drag", which I think somebody else mentioned. I found myself clicking and re-clicking it multiple times to pan around the map, which got old after a bit. That was in latest Chrome on Mac OSX.

Great work however!

make32• 12 years ago

pretty awesome. just wanted to say that in latest chrome on windows 8.1, when the city gets in 30k population range, new buildings and zonings model's don't appear; well, everything new doesn't appear, pretty much. also, wire seems to have trouble being built over steets most of the time

odiroot• 12 years ago

Surprisingly it runs on my Jolla. I thought the browser is not enough bleeding-edge. It's pretty smooth as well, although switching to snow kills it a bit.

Animats3• 12 years ago

Breaks Ghostery:

Exception { message: "", result: 2147746065, name: "NS_ERROR_NOT_AVAILABLE", filename: "resource://gre/modules/addons/XPIProvider.jsm -> jar:file:///home/john/.mozilla/firefox/ifg18hmm.default/extensions/551f2920-3c19-11e1-b86c-0800200c9a66@jetpack.xpi!/bootstrap.js -> resource://gre/modules/commonjs/toolkit/loader.js -> resource://firefox-at-ghostery-dot-com/ghostery/lib/ui/desktop/button.js", lineNumber: 60, columnNumber: 0, inner: null, data: null, stack: "create@resource://gre/modules/addons/XPIProvider.jsm -> jar:file:///home/john/.mozilla/firefox/ifg18hmm.default/extensions/551f2920-3c19-11e1-b86c-0800200c9a66@jetpack.xpi!/bootstrap.js -> resource://gre/modules/commonjs/toolkit/loader.js -> resource://firefox-at-ghostery-dot-com/ghostery/lib/ui/desktop/button.js:60:11

Reported to Ghostery support.

PsychopompPoet• 12 years ago

wow thanks this is awesome

Apofis• 12 years ago

Doesn't work Chromium 38.0.2125.111 Ubuntu 14.10

DonHopkins3• 12 years ago

I'm really glad to see this wonderful work that people have done based on the original SimCity source code! many thanks to Will Wright and the people at EA/Maxis and OLPC for helping make it open source, and to everyone who worked on making it run so nicely and easily in the web browser. This project shows exactly why that was an important thing to do, and I hope it inspires others to do similar things.

fffrad• 12 years ago

This is amazing. I remember playing this game before and it was all choppy. I am not sure it used threejs before. Good job in improving it.

johnloeber• 12 years ago

Wow, this is very impressive. Some people say that anything that can be done in a C-type language will be done in JS between five and ten years later -- this is evidence for that point.

The gameplay feels nice, and it reminds me of Caesar II, if that game is familiar to anyone. That being said, I think the game would benefit from introducing a few objectives.

frik• 12 years ago

You are right.

About Caesar II/III, it was a nice city building game. But the 3DCity game is very similar to another game called SimCity/SimCity2000. Some mentioned in this thread that it even uses the open source code of the original SimCity 1 for its city simulation code.

ilija139• 12 years ago

What to do to solve the pollution problem? :D

Animats3• 12 years ago

Haven't found anything yet. Concentrating all the industry away from the residential sections doesn't help. Using all nuclear power doesn't help.

anonfunction• 12 years ago

Building a lot of parks?

Nmachine• 12 years ago

Crashes Firefox mobile

olofd• 12 years ago

Feel asleep after playing the game. I woke up rich! http://imgur.com/BTZdkCo

msie• 12 years ago

Didn't work until I reenabled Hardware Acceleration in Chrome settings. Doh!

3D.City – Game built with three.js and sea3d

Related Stories