Home

Materials

• Examples
• General http://threejs.org/examples/#webgl_materials2
• Normal map
  • http://mrdoob.github.io/three.js/examples/webgl_materials_normalmap.html
  • http://mrdoob.github.io/three.js/examples/webgl_materials_normalmap2.html
• Bump map http://threejs.org/examples/#webgl_materials_bumpmap

Blend to three.js with normal map+diffuse+specular

1. Create a normalmap shader with THREE.ShaderLib
2. 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

3. 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/White_Tail_Deer_all.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 );

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

Errors

• gl error invalid operation
• solution: geometry.computeTangets() in the beginning of your loader callback