Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
WebGL + 3D models by using Three.js Blender Exporter
yomotsu
January 25, 2015
Programming
18
15k
WebGL + 3D models by using Three.js Blender Exporter
yomotsu
January 25, 2015
Tweet
Share
More Decks by yomotsu
See All by yomotsu
yomotsu
0
320
yomotsu
0
350
yomotsu
2
950
yomotsu
5
7.4k
yomotsu
4
6.7k
yomotsu
1
830
yomotsu
4
3.7k
yomotsu
2
830
yomotsu
3
1.1k
Other Decks in Programming
See All in Programming
makicamel
1
180
line_developers_tw2
0
270
akatsukinewgrad
0
220
line_developers_tw
0
550
hanakla
2
3.1k
wasabeef
1
580
maito1201
0
300
line_developers_tw
0
1.4k
line_developers_tw2
0
820
ufoo68
1
180
standfm
0
260
malvinstn
1
660
Featured
See All Featured
sachag
446
36k
bryan
30
3.3k
michaelherold
225
8.5k
akmur
252
19k
jasonvnalue
82
8.1k
sstephenson
144
12k
rasmusluckow
318
18k
mza
80
4.1k
dougneiner
119
7.8k
danielanewman
1
480
marktimemedia
6
340
thoeni
4
550
Transcript
WebGL + 3D models by using Three.js Blender Exporter Presented
by Akihiro Oyamada (@yomotsu) Jan 25, 2015
Frontend Engineer at PixelGrid, Inc. @yomotsu recent works • http://yomotsu.github.io/walkthrough/
• http://yomotsu.github.io/xmas2014/ Akihiro Oyamada
Download the hands-on material https://github.com/tokyowebglmeetup/ h5conf2015_session2/
three.js and Blender
5 http://threejs.org/
6 http://www.blender.org/
WebGL + 3D models is much more fun!
You don't make 3D models? There are many 3D models
with open license!
9 http://nasa3d.arc.nasa.gov/
10 http://blendswap.com/
11 https://www.yobi3d.com/
Now you can prepare 3D models. How do we convert
3D models to WebGL?
three.js Blender exporter!
FYI We use previous exporter r69 The brand new exporter
(r70) is still limited a bit, as of January 2015
How to install Blender exporter
Download three.js r69 for previous blender exporter 16 https://github.com/mrdoob/three.js/releases/tag/r69
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
Copy io_three folder three.js-r69 ... utils exporters blender 2.65 scripts
addons io_three
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/
Can’t Open Blender as a folder in your Mac? Just
right click, then Show Package Contents
Macintosh HD/Applications/blender.app/Contents/Resources/2.7X/scripts/addons/ C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons\
Launch Blender
File > User Preferences
Type in three in the search box
Mark to activate
Press Save User Setting button
Now three.js Exporter is ready!
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
How to publish a 3D model
we are gonna use alfaromeo.blend html5conf/session2 _original 1_object alfaromeo.blend ...
...
None
Mouse TrackPad Rotate Pan Zoom Select CBTJDPQFSBUJPO + shift +
shift
Mouse TrackPad Translate Rotate Scale Delete CBTJDPQFSBUJPO → G →
R → S → G → R → S Z Z
None
Mark following options, then save it.
You will have a JSON file and texture images model
data texture textu
How to append the 3D model into a Web page
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
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
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
! 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
! 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
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
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
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!
None
How to publish a 3D model with animations
None
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
Mark following options, and set Frame step. then save it.
load JSON
active skinning
make a SkinnedMesh
make animations
add it
start an animation
update animations
None
TIPS
Blender exporter does not support CJK letters for names of
geometries, materials, bones and others. Replace them to ascii
Since WebGL work on web browsers, .tga image format is
not supported. use PNG images instead.
three.js does not support IK, Bake as FK in Blender
see http://yomotsu.net/blog/2014/02/19/convert-mmd-for- threejs.html
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
The New Blender Exporter Features
• BufferGeometry • Precision for float numbers • Debug logging
gl.finish(); @yomotsu