I am making my first steps coding with JavaScript and playing with Three.js too.
In my code I made this function:
var loader = new THREE.BinaryLoader();
loader.load( "sources/obj/mmlogo/mm_logo.js", function ( geometry ) {
uniforms = {
color: {
type: "c",
value: new THREE.Color(0x000000),
},
envMap: {
type: "t",
value: reflectionCube
},
fresnelBias: {
type: "f",
value: 0.1
},
fresnelScale: {
type: "f",
value: 1.0
},
fresnelPower: {
type: 'f',
value: 2.0
}
};
material = new THREE.ShaderMaterial( {
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader,
wireframe: false,
side: THREE.DoubleSide,
});
monogram = new THREE.Mesh( geometry, material );
monogram.scale.set( 1, 1, 1 );
monogram.position.z = -9;
scene.add( monogram );
});
and then I made this render function:
function render() {
frame += 0.1/3;
monogram.scale.z += Math.sin(frame)/600;
TWEEN.update();
targetX = mouseX * .0005;
targetY = mouseY * .0005;
if ( monogram ) {
monogram.rotation.y += 0.05 * ( targetX - monogram.rotation.y );
monogram.rotation.x += 0.05 * ( targetY - monogram.rotation.x );
}
renderer.render( scene, camera );
}
I can see everything and everything works ok. But my console says that there is an error: Uncaught ReferenceError: monogram is not defined.
I think that I have to make a Global Scope of monogram. So I wrote var before monogram and it doesnt work, then I wrote
monogram = new THREE.Mesh( geometry, material );
monogram.scale.set( 1, 1, 1 );
monogram.position.z = -9;
scene.add( monogram );
outside my function and it doesnt work.
Do you have some suggestion? My app works, even if the console says that there is n error, I think that is better if my console says that everything is ok.