I'm facing an issue with adding a basic shader with animated displacement to an OBJ object. The shader works perfectly on a CubeBufferGeometry, but I can't seem to make it work with OBJLoader.
// OBJ Loader
var loader = new THREE.OBJLoader();
loader.load( "obj/statue.obj", function ( group ) {
geometry = group.children[ 0 ].geometry;
geometry.attributes.uv2 = geometry.attributes.uv;
geometry.center();
mesh = new THREE.Mesh( geometry, material );
mesh.scale.multiplyScalar( 15 );
mesh.position.y = -700;
mesh.traverse( function( node ) {
if( node.material ) {
node.material.side = THREE.DoubleSide;
}
});
mesh.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.geometry.computeFaceNormals();
}
});
scene.add( mesh );
// Vertex Displacement
vertexDisplacement = new Float32Array(geometry.attributes.position.count);
for (var i = 0; i < vertexDisplacement.length; i += 1){
vertexDisplacement[i] = Math.sin(i);
}
geometry.addAttribute('vertexDisplacement', new THREE.BufferAttribute(vertexDisplacement, 1));
} );
In the render/animate function, I encountered an issue where my mesh variable is showing up as undefined (even though I have defined it as a global variable). This might be happening because I am also defining the mesh within the OBJLoader function?
The error message I receive is: 'TypeError: mesh is undefined'
Below is my render/animate function:
var delta = 0;
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
delta +=0.1;
mesh.material.uniforms.delta.value = 0.5 + Math.sin(delta) * 0.5;
for (var i = 0; i < vertexDisplacement.length; i += 1) {
vertexDisplacement[i] = 0.5 + Math.sin(i * delta) * 0.25;
}
mesh.geometry.attributes.vertexDisplacement.needsUpdate = true;
renderer.render( scene, camera );
}