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

Animation

• Morph targets
• http://threejs.org/examples/webgl_morphtargets.html
• Morph targets are sets of geometry vertices positions for automatic interpolation between them. You can change geometry appearance in real time, using different vertices positions written in morphTargetInfluences[0], morphTargetInfluences[1], morphTargetInfluences[nSet]. You can mix many appearances (morphTargetInfluences) of geometry at the same time. Best way is JSONLoader format, wchich you can export from 3DSMax for example: frame0 as morphTargetInfluences[0], frame1 as morphTargetInfluences[1], ect.

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

Errors

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