*blog... kind of... *rss 



three.js April 25th 2010, mr.doob


I think it was in 2004 when I started investigating, learning the maths and testing all this stuff of projecting 3d points into a 2d plane... Two years later, in 2006, I had a torus knot with flat shading with a light and a camera. Then Papervision3D came into the scene and I got distracted ;)

Two years later, in 2008, I reworked my code with the things I liked from Papervision3D but making it simpler to my mind. At that point I was calling the engine threedoob and I did a bunch of experiments with it. Later I ported the code to Javascript and also did a bunch of experiments with that version too.

Now I think I've reached a point in which I'm not ashamed of sharing the code and because doesn't seem to be much resources for rendering 3D with HTML5/Javascript I thought other people would find the javascript port useful.

So I've created a repository for it at github. It's still very early days, but feel free to take a look at it, use it, fork it, ...

15 comments written so far...

Awesome!, Have you had the chance to take a look at pre3d by Dean? http://github.com/deanm/pre3d Do you know how this project compares to yours?

April 25th 2010, Nicolas
Yeah, I know pre3d. I have studied it a bit. I think pre3d is more C/OpenGL style. The result is the same, but the level of abstraction you have to switch your brain to is lower with three.js.
April 25th 2010, mr.doob
Hey! this was awesome : D

I really love what you got here! congrats doob. Great job!
April 25th 2010, SD
Really impressive man! keep going!
April 26th 2010, Ramon Fritsch
Very nice engine, and it looks very fluid the cube, hope it may stimulate other developers to step into the game, and help bring this engine to the next level ! It feels good to see 3D inside a browser without any plugin ;D
April 26th 2010, ___peps
Thanks for the library. It's a great start, very light weight, and helped me get my head around how I could go about 3d rendering on the 2d canvas. Did some quick prototyping today and plan to continue working with it. Will post back anything interesting that I'm able to put together.
April 26th 2010, Brian
Please do. :)
April 27th 2010, mr.doob
Awesome! Was looking at doing something similar for a project I've been working on (editing parts in 3D in the browser) but hadn't found anything, and was starting to implement pretty much the same thing but server-side.
I love your implementation, this will allow me to focus on getting a good prototype up quickly, so many thanks!
April 29th 2010, Jurjen
Glad to see that you guys are finding it useful :)
April 30th 2010, mr.doob
Very inspiring as I'm new to development, your work has given me a kick start in the 3D arena.
April 30th 2010, Paul Rogers
hi Ricardo, love your work i was looking for something like this for my research. i have one doubt though, how do u embed a href link on the walls of the cube. i tried modifying the javascript but didnt get anywhere.

once again gud work

cheers
May 7th 2010, akhil
Mr. Doob,

After enjoying your experiments on the chromexperiments website, and seeing your new 3D library, I ventured out to create a way to get objects created in Blender into this engine.
Using the DEC Object File Format http://shape.cs.princeton.edu/benchmark/documentation/off_format.html which is exportable by Blender, I put together a rough parser to load the vertices and faces from the flat file into a new type.

A modification of the cube example using my parser is here:

http://www.lotofsense.com/misc/threedoobOFFModel/geometry_OFFModel.html

The full demo can be downloaded here:
http://www.lotofsense.com/misc/threedoobOFFModel.zip

Instead of a new Cube or Plane primitive, you load a new OFFModel(path_to_off_file).

The sphere in the example loads and displays nicely, but the monkey face renders weird as its rotating, does this have to do with the normals? Am I supposed to call computeNormals on the geometry?
July 1st 2010, Rich
looks like i needed to set the doubleSided=true on the THREE.Mesh, unfortunately it kills the framerate even with a relatively low vertex count such as the sphere.
July 1st 2010, Rich
Wow! Great to see people messing with the engine :D

But I think you would have like to know that there is already a blender (2.50) exporter.

http://github.com/mrdoob/three.js/blob/master/utils/export_threejs.py

It exports directly to a Geometry3D class. The end result is very similar to what you have done, altough filesize is smaller in the off format but I would go binary if it was about that.

Really liked to see the lights example! However, I think you're doing the computation of the lights in the wrong place, you're doing it screen space (CanvasRenderer) while it should be world space (Renderer) and because of that the result is not correct.

SpotLights is something I really want to put on the engine, and from your changes you made me realise that Scene.add should have been Scene.addObject :) D'oh!

Also, whenever I manage to start using the normals of the faces properly, light should be really simple to implement.

As per framerate... wait until WebGL gets enabled by default ;)
July 3rd 2010, mr.doob
Doob,
1st i need to tell u i'm your fan! <3
Cuz of your work I started learning js (about a year ago) and although php distracted me a bit (XD) i'm back to javascript.
Since i'm almost done with the basic docs (html, css , dom , canvas and svg) i was wondering if u could gimme some directions on how to understand the maths behind 3d codes.
Also i would like to hear your opinion about css3d.
Ex: www.addyosmani.com/resources/googlebox/

Keep the great work and thx for your time!
Rafael
August 3rd 2010, rafaelcastrocouto

Have your say!



Name:

Website:

Comment: