Skip to content

Home

Jump to bottom Edit New page
erno edited this page Nov 13, 2014 · 32 revisions

Helpful links

The following exporting examples use this source blend: https://github.com/realXtend/chesapeakebay/tree/master/objects/White_Tailed_Deer

Export from blender to three.js with skeleton animations

Example: https://github.com/playsign/WebTundraGFX/blob/master/DeerDemo/ExportedShaderMaterial.html

  • Three.js requires mesh to be unparented to the armature. Else you will notice clear graphical glitches. Unparenting in the deer blend: https://github.com/playsign/WebTundraGFX/blob/master/doc/BlenderSkeletonAnimation.PNG
  • In Three.js export settings skinning and bones should be selected, check previous screenshot for an example.
  • Instead of regular THREE.Mesh, we need to use THREE.SkinnedMesh deer = new THREE.SkinnedMesh(geometry,material);
  • Enable skinning in all materials:
function enableSkinning(skinnedMesh) {
	var materials = skinnedMesh.material.materials;
	for (var i = 0, length = materials.length; i < length; i++) {
		var mat = materials[i];
		mat.skinning = true;
  • Add animations to animation handler THREE.AnimationHandler.add( geometry.animations[0] );
  • Play animation var animation = new THREE.Animation( deer, "Run-1-15" ); animation.play();
  • Update animation handler with delta time THREE.AnimationHandler.update( delta );

Export from blender to three.js with morph target animations

Example: https://github.com/playsign/WebTundraGFX/blob/master/DeerDemo/ThreePhongMaterial.html

  • From timeline editor set start and end frames. Frames between them will get exported. If you don't know how many frames to select then open NLA editor to see animation tracks.
  • Export with Blender exporter for Three.js. From export settings select (at least) vertices, faces, normals, UVs, Flip YZ, Embed meshes and Morph animation. If you want to export whole blender scene then also select All meshes, otherwise it will export selected mesh.

Export from blender to three.js with normal map+diffuse+specular

Option 1: Preset mapping in Blender (exported shader material --> morphTargets do not work with some shaders from threejs shaderlib)

Example: https://github.com/playsign/WebTundraGFX/blob/master/DeerDemo/ExportedShaderMaterial.html

var jsonLoader = new THREE.JSONLoader();
// addModelToScene function is called back after model has loaded
jsonLoader.load( "models/Deer_with_specular_and_normal_mapping.js", addModelToScene );
{
	var material = new THREE.MeshFaceMaterial( materials );
	model = new THREE.Mesh( geometry, material );
	model.scale.set(10,10,10);
	scene.add( model );
}

Option 2: With THREE material that supports normal map, diffuse and specular e.g. THREE.MeshPhongMaterial https://github.com/playsign/WebTundraGFX/blob/master/DeerDemo/ThreePhongMaterial.html

var jsonLoader = new THREE.JSONLoader();
// addModelToScene function is called back after model has loaded
jsonLoader.load( "models/Deer_no_material.js", addModelToScene);

json callback -->

 var phongMaterial = new THREE.MeshPhongMaterial( { ambient: 0x050505, specular: 0xffffff, shininess: 10, shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture( "models/MAP_deer_G-03.png" ), normalMap: THREE.ImageUtils.loadTexture( "models/MAP_deer_G-03_NRM.png" ), specularMap: THREE.ImageUtils.loadTexture( "models/MAP_deer_G-03_SPEC.png" ) } );
 var deer = new THREE.Mesh( geometry, phongMaterial );

Option 3: With THREE.ShaderMaterial (couldn't get animations work with this method, there is no ShaderChunk["morphtarget_vertex"] in normalmap shader) https://github.com/playsign/WebTundraGFX/blob/master/DeerDemo/ThreeShaderMaterial.html

  • Create a normalmap shader with THREE.ShaderLib
  • Modify uniforms
  • normal map needs following uniforms[ "tNormal" ].value = THREE.ImageUtils.loadTexture( "models/MAP_deer_G-03_NRM.png" );
  • specular needs following uniforms[ "enableSpecular" ].value = true;
  • set texture to "tSpecular" and color to "specular" uniforms[ "tSpecular" ].value = THREE.ImageUtils.loadTexture( "models/MAP_deer_G-03_SPEC.png" ); uniforms[ "specular" ].value.setHex( specular ); // specular = 0xffffff
  • If your model is black or texture is not visible then "uniforms[ "enableAO" ].value = true;" might cause it
  • Apply material to Three.Mesh
  • If youre using single texture (+diffuse, specular) or single material (check from blender) then you're fine by just directly applying the material to a mesh jsonLoader.load( "models/Deer_no_material.js", function( geometry ) { addModelToScene(geometry, material)} ) --> new THREE.Mesh( geometry, material );
  • If you're model uses multiple textures then you may use MeshFaceMaterial var material = new THREE.MeshFaceMaterial( materials ); // parameter should be an array of materials deer = new THREE.Mesh( geometry, material );

Animation

The original geometry vertices are untouched, which you can check using geometry.computeBoundingBox();geometry.boundingBox);

Obj

  • use converter three.js\utils\converters\obj\convert_obj_three.py
  • help included in the py file. Blender section talks about export settings that do not exist anymore. That's a problem
  • you probably need to use python26

Collada

  • Bones might cause errors

DDS

Override source jpg textures with dds textures example https://github.com/playsign/OuluThreeJS/blob/master/Oulu.js#L179-L207 In nutshell geometry.dispose()/texture.dispose()/material.dispose()

CTM

Loader example https://github.com/playsign/OuluThreeJS/blob/ctm/Grid.js#L166-L203

Memory management

By disposing textures and geometry: https://github.com/playsign/OuluThreeJS/blob/cull/Oulu.js#L328-L350 But it's pointless if we are using CTM? https://github.com/playsign/OuluThreeJS/blob/ctm/Oulu.js#L328-L350

Errors

  • gl error invalid operation
  • solution: geometry.computeTangets() in the beginning of your loader callback
  • WebGL: INVALID_OPERATION: useProgram: object not from this context
  • You can share geometry along different Scenes.
  • You can't share meshes along different Scenes.
  • You can't share geometry/meshes/scenes along different Renderers (yet).
Add a custom footer
Add a custom sidebar
Clone this wiki locally