Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebGL + 3D models by using Three.js Blender Exporter

3c557c6103a4addc52f7b76ffd0a0f27?s=47 yomotsu
January 25, 2015

WebGL + 3D models by using Three.js Blender Exporter

3c557c6103a4addc52f7b76ffd0a0f27?s=128

yomotsu

January 25, 2015
Tweet

Transcript

  1. WebGL + 3D models by using
 Three.js Blender Exporter Presented

    by Akihiro Oyamada (@yomotsu) Jan 25, 2015
  2. Frontend Engineer at PixelGrid, Inc. @yomotsu recent works • http://yomotsu.github.io/walkthrough/

    • http://yomotsu.github.io/xmas2014/ Akihiro Oyamada
  3. Download
 the hands-on material
 https://github.com/tokyowebglmeetup/ h5conf2015_session2/

  4. three.js and Blender

  5. 5 http://threejs.org/

  6. 6 http://www.blender.org/

  7. WebGL + 3D models is much more fun!

  8. You don't make 3D models? There are many 3D models

    with open license!
  9. 9 http://nasa3d.arc.nasa.gov/

  10. 10 http://blendswap.com/

  11. 11 https://www.yobi3d.com/

  12. Now you can prepare 3D models. How do we convert


    3D models to WebGL?
  13. three.js Blender exporter!

  14. FYI
 We use previous exporter r69
 The brand new exporter

    (r70) is still limited a bit,
 as of January 2015
  15. How to install
 Blender exporter

  16. Download three.js r69
 for previous blender exporter 16 https://github.com/mrdoob/three.js/releases/tag/r69

  17. Although, we don't use this time,
 You can get latest

    three.js package
 for the new Exporter,
 from GitHub 17 https://github.com/mrdoob/three.js or FYI
  18. Copy io_three folder three.js-r69 ... utils exporters blender 2.65 scripts

    addons io_three
  19. Put io_three into following place
 
 Windows: C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons\

    Mac OSX: /Applications/blender.app/Contents/Resources/2.7X/scripts/addons/
  20. Can’t Open Blender as a folder in your Mac? Just

    right click, then Show Package Contents
  21. Macintosh HD/Applications/blender.app/Contents/Resources/2.7X/scripts/addons/ C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons\

  22. Launch Blender

  23. File > User Preferences

  24. Type in three in the search box

  25. Mark to activate

  26. Press Save User Setting button

  27. Now three.js Exporter is ready!

  28. 1. Download three.js package 2. Copy io_three folder 3. Put

    it into scripts/addons folder of Blender 4. Active the addon under
 User Preferences > Addons SFWJFX
  29. How to publish
 a 3D model

  30. we are gonna use alfaromeo.blend html5conf/session2 _original 1_object alfaromeo.blend ...

    ...
  31. None
  32. Mouse TrackPad Rotate Pan Zoom Select CBTJDPQFSBUJPO + shift +

    shift
  33. Mouse TrackPad Translate Rotate Scale Delete CBTJDPQFSBUJPO → G →

    R → S → G → R → S Z Z
  34. None
  35. Mark following options,
 then save it.

  36. You will have
 a JSON file and
 texture images model

    data texture textu
  37. How to append
 the 3D model
 into a Web page

  38. var width = window.innerWidth, height = window.innerHeight, clock = new

    THREE.Clock(), scene, camera, renderer, ambientLight, directionalLight, loader, alfaromeo = new THREE.Object3D(); ! scene = new THREE.Scene(); ! camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 ); camera.position.set( 0, 1, 5 ); ! renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); write code as usual
  39. directionalLight, loader, alfaromeo = new THREE.Object3D(); ! scene = new

    THREE.Scene(); ! camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 ); camera.position.set( 0, 1, 5 ); ! renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); ! ambientLight = new THREE.AmbientLight( 0xffffff ) scene.add( ambientLight ); ! directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 1, 0 ); scene.add( directionalLight ); ! scene.add( new THREE.GridHelper( 10, 1 ) ); ! loader = new THREE.JSONLoader(); write code as usual
  40. camera.position.set( 0, 1, 5 ); ! renderer = new THREE.WebGLRenderer(

    { antialias: true } ); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); ! ambientLight = new THREE.AmbientLight( 0xffffff ) scene.add( ambientLight ); ! directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 1, 0 ); scene.add( directionalLight ); ! scene.add( new THREE.GridHelper( 10, 1 ) ); ! loader = new THREE.JSONLoader(); loader.load( 'alfaromeo.json', function( geometry, materials ) { ! alfaromeo = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); ! write code as usual
  41. ! ambientLight = new THREE.AmbientLight( 0xffffff ) scene.add( ambientLight );

    ! directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 1, 0 ); scene.add( directionalLight ); ! scene.add( new THREE.GridHelper( 10, 1 ) ); ! loader = new THREE.JSONLoader(); loader.load( 'alfaromeo.json', function( geometry, materials ) { ! alfaromeo = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); ! scene.add( alfaromeo ); ! } ); ! ( function renderLoop () { write code as usual
  42. ! ambientLight = new THREE.AmbientLight( 0xffffff ) scene.add( ambientLight );

    ! directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 1, 0 ); scene.add( directionalLight ); ! scene.add( new THREE.GridHelper( 10, 1 ) ); ! loader = new THREE.JSONLoader(); loader.load( 'alfaromeo.json', function( geometry, materials ) { ! alfaromeo = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); ! scene.add( alfaromeo ); ! } ); ! ( function renderLoop () { make a loader
  43. directionalLight.position.set( 0, 1, 0 ); scene.add( directionalLight ); ! scene.add(

    new THREE.GridHelper( 10, 1 ) ); ! loader = new THREE.JSONLoader(); loader.load( 'alfaromeo.json', function( geometry, materials ) { ! alfaromeo = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); ! scene.add( alfaromeo ); ! } ); ! ( function renderLoop () { ! requestAnimationFrame( renderLoop ); var elapsed = clock.getElapsedTime(); alfaromeo.rotation.y = elapsed / 2; renderer.render( scene, camera ); use load method
  44. directionalLight.position.set( 0, 1, 0 ); scene.add( directionalLight ); ! scene.add(

    new THREE.GridHelper( 10, 1 ) ); ! loader = new THREE.JSONLoader(); loader.load( 'alfaromeo.json', function( geometry, materials ) { ! alfaromeo = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); ! scene.add( alfaromeo ); ! } ); ! ( function renderLoop () { ! requestAnimationFrame( renderLoop ); var elapsed = clock.getElapsedTime(); alfaromeo.rotation.y = elapsed / 2; renderer.render( scene, camera ); make call back
  45. new THREE.MeshFaceMaterial( materials ) ); ! scene.add( alfaromeo ); !

    } ); ! ( function renderLoop () { ! requestAnimationFrame( renderLoop ); var elapsed = clock.getElapsedTime(); alfaromeo.rotation.y = elapsed / 2; renderer.render( scene, camera ); ! } )(); render it!
  46. None
  47. How to publish
 a 3D model with animations

  48. None
  49. Apply rest pose 1. go to Pose Mode 2. select

    all bones 3. Pose > 
 Clear Transform > All 4. ctrl + A 5. Apply Location 6. ctrl + A 7. Apply Rotation 8. ctrl + A 9. Apply Scale
  50. Mark following options,
 and set Frame step.
 then save it.

  51. load JSON

  52. active skinning

  53. make a SkinnedMesh

  54. make animations

  55. add it

  56. start an animation

  57. update animations

  58. None
  59. TIPS

  60. Blender exporter does not support
 CJK letters for names of

    geometries, materials, bones and others. Replace them to ascii
  61. Since WebGL work on web browsers,
 .tga image format is

    not supported. use PNG images instead.
  62. three.js does not support IK,
 Bake as FK in Blender

    see http://yomotsu.net/blog/2014/02/19/convert-mmd-for- threejs.html
  63. If you publish a model with animations,
 set rest pose

    in Blender see http://stackoverflow.com/questions/18752146/blender- exports-a-three-js-animation-bones-rotate-strangely/ 18770716#18770716
  64. The New Blender Exporter
 Features

  65. • BufferGeometry • Precision for float numbers • Debug logging

  66. gl.finish(); @yomotsu