Three.js: Display 3D Content on a Webpage

Posted on by

Three.JS by mrdoob is an HTML5/Javascript script for displaying 3D content on your webpages. It comes with a Blender 2.5 export script to generate the required Javascript file! Kikko explains how to use the script and export your models. Nice!

Be Sociable, Share!

    Twitter



    Please support us

    • endi

      ah I remember the good old web plugin that better than anything in our days too

    • http://twoday.tuwien.ac.at/pub/ panzi

      Firefox 3.6.6: 17 fps
      Chrome 5.0: 48 fps
      Fedora 12 x86_64

      Quite a difference. Firefox has a lot to do.

    • MmAaXx

      cool :)

    • Oli

      Very cool :) !

      panzi: “Firefox has a lot to do.” it’s done with fx4 ! I’ve got 41fps on Chrome and 31fps on firefox 4 (beta 1) but the display is better on firefox

    • Fdsa Tyui

      And this is not even WebGL? Kinda cool.

    • http://nicknamfx.wordpress.com Nicknamz

      pretty cool, good how is progressing.. i really don’t like flash and swf.

    • http://mrdoob.com Mr.doob

      There is also a WebGL Renderer. Although textures aren’t working yet… Maybe over the weekend…

    • SpfxGuy

      when are we going to see sunflow.sourceforge.net ported to javascript. That would be the beginning of true rendered internet collaboration.

      New to this blogging but have some vast knowledge on future graphic trends.

    • http://www.pixila.com/portfolios/portfolio/?artist=629 Pawel

      That’s amazing. I didn’t know you could do real 3D with a Javascript library. I’ll be following this.

    • claas

      SpfxGuy

      wait what? Sunflow running online?

    • http://mrdoob.com Mr.doob

      Well, won’t take long…

      http://29a.ch/2010/5/17/path-tracing-a-cornell-box-in-javascript

      We just need a WebGl/Shader version of it :)

    • claas

      Mr. doob

      any idea why the exporter does not show up on my os x build of Blender?
      Build number is 30117

      Here is the console error report:
      7/9/10 4:36:38 PM [0x0-0x146146].org.blenderfoundation.blender[2031] File “/Applications/Blender/Blender 2.5/blender.app/Contents/MacOS/2.52/scripts/modules/bpy_types.py”, line 580, in draw_ls
      7/9/10 4:36:38 PM [0x0-0x146146].org.blenderfoundation.blender[2031] func(self, context)
      7/9/10 4:36:38 PM [0x0-0x146146].org.blenderfoundation.blender[2031] File “//Applications/Blender/Scripts/io/export_threejs.py”, line 200, in menu_func
      7/9/10 4:36:38 PM [0x0-0x146146].org.blenderfoundation.blender[2031] default_path = bpy.data.filename.replace(“.blend”, “.js”)
      7/9/10 4:36:38 PM [0x0-0x146146].org.blenderfoundation.blender[2031] AttributeError: ‘Main’ object has no attribute ‘filename’

    • http://mrdoob.com Mr.doob

      Is that Blender 2.5?

    • claas

      yes of course !

    • http://mrdoob.com Mr.doob

      Then, I’m afraid I don’t :/

    • http://teogreengage.blogspot.com/ teo_cazghir

      would it be possible to provide some code to control the camera and be able to fly around? or somehow export camera animation?????

    • claas

      Mr doob

      check this: http://blenderartists.org/forum/showthread.php?t=191385

      I was getting the same error here, on Ubuntu 9.10 with revision 30163.

      Fixed it by changing “filename” in line 200 to “filepath”.

      However… when I try to export the default cube, I get:
      Code:
      RNA_string_get_alloc: EXPORT_OT_three_js.filepath not found.

    • claas

      Mr doob

      some issue also on win7
      File “C:\Users\claas\Desktop\Release\untitled.blend/export_threejs.py”, line 2
      00, in menu_func
      AttributeError: ‘Main’ object has no attribute ‘filename’
      Traceback (most recent call last):
      File “C:\Users\claas\Desktop\Release\scripts\modules\bp y_types.py”, line 580,
      in draw_ls
      func(self, context)
      File “C:\Users\claas\Desktop\Release\untitled.blend/export_threejs.py”, line 2
      00, in menu_func
      AttributeError: ‘Main’ object has no attribute ‘filename’

    • namekuseijin

      haha, I thought I was about to watch some sterescopic fun instead of a very low poly model… :p

    • http://sites.google.com/site/bartiuscrouch Crouch

      Very interesting development. I’m getting 14 fps on FireFox (on an old computer), which is a bit slow. But this will probably improve as the development continues on this.
      I’ll be keeping an eye on it.

    • joeri67

      25fps firefox, 45fps safari Macbookpro 2.8 Ghz Core 2 Duo.

      Super cool. This is going to offer lots of nice stuff.

    • http://www.lcharyzma.wordpress.com Lcharyzma

      Ubuntu 64bit
      Chrome – 49
      Opera – 45
      Firefox – 21 :(((

      http://lcharyzma.wordpress.com/2010/07/11/wydajnosc-przegladarek-w-javascript-3d/

    • http://www.jarred.co.za Jarred

      With reference to Jonas Wagner’s path tracing demo, his Normal mapping and phong shading demo is also fantastic: http://29a.ch/2010/3/24/normal-mapping-with-javascript-and-canvas-tag

    • http://have2chat.net David

      Its still very early days for HTML5

      You can max out OpenGL in a webpage using java.
      example: http://have2chat.net/benchmark/fullpage.html