0

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.

  • try putting the `monogram.scale.z += Math.sin(frame)/600;` line inside the `if ( monogram ) {...}`. The load function is **asynchronous**, which means that it takes some time for the object to load, and while it is loading, the code keeps running. For the first few render calls the monogram variable will be undefined. – micnil Feb 22 '16 at 12:27
  • Thank you! I can already understand. – Valentin Verdegales Feb 22 '16 at 14:26

0 Answers0