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

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

yomotsu
January 25, 2015

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

yomotsu

January 25, 2015
Tweet

More Decks by yomotsu

Other Decks in Programming

Transcript

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

    by Akihiro Oyamada (@yomotsu) Jan 25, 2015
  2. FYI
 We use previous exporter r69
 The brand new exporter

    (r70) is still limited a bit,
 as of January 2015
  3. 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
  4. 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/
  5. Can’t Open Blender as a folder in your Mac? Just

    right click, then Show Package Contents
  6. 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
  7. 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
  8. 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
  9. 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
  10. ! 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
  11. ! 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
  12. 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
  13. 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
  14. 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!
  15. 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
  16. Blender exporter does not support
 CJK letters for names of

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

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

    see http://yomotsu.net/blog/2014/02/19/convert-mmd-for- threejs.html
  19. 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