Posts Tagged ‘ Three.js ’

Creating Cube map / Environment map in Three.js with preloaded assets

[tweetmeme source=”neoRiley” only_single=false] All the Three.js samples I found were all using the same technique of just passing the image URL’s in an array to  ImageUtils.loadTextureCube() , and used whatever it returned as the necessary texture for a environment, reflection or refraction map.  Well, I’d written an AssetManager to preload all necessary assets for creating our scene, and when it came time to assemble the reflection map, I had to dig through the source code to see what ImageUtils.loadTextureCube() was actually producing and how.

In my scenario, I have a class that is called CubeMap and after passing it the image URL’s, it takes care of preparing what is to be preloaded with the AssetManager.  When the AssetManager has completed the preload, I then have access to CubeMap.texturesArray, which is an array of the preloaded images, and I can then put together the environment map texture I need:

// create a new THREE.Texture
var envMap = new THREE.Texture();

// After preloading your images, set the image property of your new texture to the array of images you preloaded
envMap.image = this.tankReflectionBox.texturesArray; // array of images = [];

// Set the mapping type
envMap.mapping = new THREE.CubeReflectionMapping();

// You have to set this to false, otherwise your images will be inverted on the Y axis
envMap.flipY = false;

// Mark as dirty, otherwise you won't see anything
envMap.needsUpdate = true;

Have a bandit day!

Advertisements

Error with Three.js shader – ERROR :GL_INVALID_OPERATION – fix

[tweetmeme source=”neoRiley” only_single=false] I was just in the process of trying to narrow down what does and doesn’t work in IE11 with Three.js’ shaders and ran into this error message while working with the normalmap shader:

ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

The fix is to simply call computeTangents() on your mesh’s geometry object, and bingo, we’re in business:

model.geometry.computeTangents();

Here’s the block for context:

var shader = THREE.ShaderLib[ "normalmap" ];</pre>
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

uniforms[ "enableAO" ].value = false;
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;

uniforms[ "tDiffuse" ].value = fdo.colorMap;
uniforms[ "tNormal" ].value = fdo.normalMap;
uniforms[ "tSpecular" ].value = fdo.specularMap;

uniforms[ "diffuse" ].value.setHex( 0xFFFFFF );
uniforms[ "specular" ].value.setHex( 0xFFFFFF );
uniforms[ "ambient" ].value.setHex( 0x222222 );

uniforms[ "shininess" ].value = 10;
parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
mat = new THREE.ShaderMaterial( parameters );

model.geometry.computeTangents();
model.material = mat;