*blog... kind of... *rss
three.js
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 there seem to be a lack of 3d javascript libraries I thought other people would find this 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, ...
EDIT: Please, do not add comments here with issues you're having. Use github's issues section instead.
32 commentsI 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 there seem to be a lack of 3d javascript libraries I thought other people would find this 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, ...
EDIT: Please, do not add comments here with issues you're having. Use github's issues section instead.
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.
Hey! this was awesome : D
I really love what you got here! congrats doob. Great job!
I really love what you got here! congrats doob. Great job!
Really impressive man! keep going!
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
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.
Please do. :)
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!
I love your implementation, this will allow me to focus on getting a good prototype up quickly, so many thanks!
Glad to see that you guys are finding it useful :)
Very inspiring as I'm new to development, your work has given me a kick start in the 3D arena.
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
once again gud work
cheers
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?
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?
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.
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 ;)
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 ;)
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
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
That's simply awesome, you've done an incredible job on developing a 3D rendering library for JS that's not only easy to use, but whose source is easy to understand, too!
I'm already starting to implement a Battlezone-clone using it.
I'm already starting to implement a Battlezone-clone using it.
Looking good Haroldo! :D
most creative things i've ever seen
u r simply inspiring :)
u r simply inspiring :)
Waaa... So it started from 2004... such a long time... But it's awesome!! No you should be very proud of this.
Congrats! i think if you could develop it a bit more you can make it big js library.. best wishes!
All your demos are awesome.. you have a gr8 brain buddy.. you are using it also.. ;)
All your demos are awesome.. you have a gr8 brain buddy.. you are using it also.. ;)
hi mr.doob,
thanks ur "three.js" really helps me much,
and in example of "materials_video.html",
if i replace CanvasRenderer to WebGLRenderer,
i found it can not render well, result is all black.
i guess if currently WebGLRenderer do not support to insert HTML tags like <video>, <canvas>, <image> in THREE.Texture ?
can you give me some directions ?
im new in 3D.
Thanks!
thanks ur "three.js" really helps me much,
and in example of "materials_video.html",
if i replace CanvasRenderer to WebGLRenderer,
i found it can not render well, result is all black.
i guess if currently WebGLRenderer do not support to insert HTML tags like <video>, <canvas>, <image> in THREE.Texture ?
can you give me some directions ?
im new in 3D.
Thanks!
For issues ans questions, please, use this:
https://github.com/mrdoob/three.js/issues
https://github.com/mrdoob/three.js/issues
This really is a great library.
Since I use jQuery a lot I was wondering if there is a possibility to port the code to jQuery – maybe as a plugin. I tried it myself but didn’t have any luck. My skills seem to be to poor for this kind of stuff. Thanks.
Since I use jQuery a lot I was wondering if there is a possibility to port the code to jQuery – maybe as a plugin. I tried it myself but didn’t have any luck. My skills seem to be to poor for this kind of stuff. Thanks.
Hallo,
I have a problem with the Blender exporter 2.49b/2.56a and loading the .js with three.js. The actually Blender exporter work fine, but I can't load the .js successfully with three.js. Could you please give me a pack with one working example with the actually sources? And sorry for my bad school english (I'm german)
My regards
I have a problem with the Blender exporter 2.49b/2.56a and loading the .js with three.js. The actually Blender exporter work fine, but I can't load the .js successfully with three.js. Could you please give me a pack with one working example with the actually sources? And sorry for my bad school english (I'm german)
My regards
Spent three days looking for an HTML/Webgl lib/Api and tried a few including LimeJS, Hydra and Crafty.
Three rocks!
Hope I can create something worthy. :D
Thanks for the hard work.
Three rocks!
Hope I can create something worthy. :D
Thanks for the hard work.
This is amazing and thanks for all the hard work. I'm really looking forward to learning all this... but you've really set the foundation (3D for dummies)
I cant wait to see where this takes us!
Superb Sir,
You have really got my interest going into WebGL.
Thanks for ThreeJS.
Hoping that you will continue to build or that I will rise to the level to contribute to it :)
You have really got my interest going into WebGL.
Thanks for ThreeJS.
Hoping that you will continue to build or that I will rise to the level to contribute to it :)
Hi,
Firstly, thanks a ton for such an excellent library.
Meanwhile, i'd like to know if its possible to render an HTML content/location in a Canvas, some thing like Material's texture...?
My basic need is to load something like a cube, which should have 4-6 different HTML contents on each of the sides.
Would appreciate any help in this direction...
Regards,
Rahul Roy
Firstly, thanks a ton for such an excellent library.
Meanwhile, i'd like to know if its possible to render an HTML content/location in a Canvas, some thing like Material's texture...?
My basic need is to load something like a cube, which should have 4-6 different HTML contents on each of the sides.
Would appreciate any help in this direction...
Regards,
Rahul Roy
Looking good!
1) using preface "use strict"; on THREE.js exposes numerous undefined variables - simple var(space) before fixes. Also exposes some error deletes - simple h = null; instead fixes.
2) still problems with loading meshes across folders - using Chrome / Vista.
Otherwise, everything works. Writing DOCS is what I do best. Willing to help.
stephenfrance9@gmail.com
1) using preface "use strict"; on THREE.js exposes numerous undefined variables - simple var(space) before fixes. Also exposes some error deletes - simple h = null; instead fixes.
2) still problems with loading meshes across folders - using Chrome / Vista.
Otherwise, everything works. Writing DOCS is what I do best. Willing to help.
stephenfrance9@gmail.com
Hey Doob, thanks a bunch for this, its much better to use as a resource for leaning than the somewhat difficult to swallow WebGL tutorials out there.
Fantastic work on the engine and keep it up ;) you have competition in the form of EpicZen Video for the web.
*thumbs up*
Fantastic work on the engine and keep it up ;) you have competition in the form of EpicZen Video for the web.
*thumbs up*
Awesome, I played a lot with papervision and I always wanted to go away from flash, time has come.
Where can I find more doc?
Where can I find more doc?
*profile
traditional id: Ricardo Cabello Miguel
based in: Barcelona, Spain
more: github, twitter, twitpic, soundcloud and flattr
*post nav
three.js r8
Flattr
Harmony ports
Water and Parallax
JavaScript: The Good Parts
three.js
Moving to github
Wacom Javascript API
Making of The Johnny Cash Project
Harmony
César Alierta y las anotaciones de Youtube