Silly Javascript and ThreeJs issue

Question

This is probably something stupid but it's got me stuck. The first three.js function 'loadTexture' isn't being found

Uncaught ReferenceError: loadTexture is not defined

Here is the HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Beek in Three.js</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    </head>
    <body onload="init()">

        <div id="container"></div>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="three.min.js"></script>
        <script type="text/javascript" src="beek3.js" onload="init()"></script>

    </body>
</html>

And the Javascript

var camera, scene, renderer;

        var texture_placeholder,
        isUserInteracting = false,
        onMouseDownMouseX = 0, onMouseDownMouseY = 0,
        lon = 90, onMouseDownLon = 0,
        lat = 0, onMouseDownLat = 0,
        phi = 0, theta = 0,
        target = new THREE.Vector3();

        var jsonpPrefix= 'https://gms.beek.co';
        var cdnPrefix= 'http://cdn.beek.co';
        var guide =  66;
        varscene = 27;

        init();
        //initBeek();
        animate();

        function init() {

            var container, mesh;

            container = document.getElementById( 'container' );

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );

            scene = new THREE.Scene();

            texture_placeholder = document.createElement( 'canvas' );
            texture_placeholder.width = 128;
            texture_placeholder.height = 128;

            var context = texture_placeholder.getContext( '2d' );
            context.fillStyle = 'rgb( 200, 200, 200 )';
            context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );

            var materials = [

                loadTexture( 'http://cdn.beek.co/scene_27_pano_4_r/9/0_0.jpg' ), // right
                loadTexture( 'http://cdn.beek.co/scene_27_pano_4_l/9/0_0.jpg' ), // left
                loadTexture( 'http://cdn.beek.co/scene_27_pano_4_u/9/0_0.jpg' ), // top
                loadTexture( 'http://cdn.beek.co/scene_27_pano_4_d/9/0_0.jpg' ), // bottom
                loadTexture( 'http://cdn.beek.co/scene_27_pano_4_b/9/0_0.jpg' ), // back
                loadTexture( 'http://cdn.beek.co/scene_27_pano_4_f/9/0_0.jpg' )  // front

            ];

            mesh = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300, 7, 7, 7 ), new THREE.MeshFaceMaterial( materials ) );
            mesh.scale.x = - 1;
            scene.add( mesh );

            renderer = new THREE.CanvasRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.appendChild( renderer.domElement );

            document.addEventListener( 'mousedown', onDocumentMouseDown, false );
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'mouseup', onDocumentMouseUp, false );
            document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

            document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            document.addEventListener( 'touchmove', onDocumentTouchMove, false );

            //

            window.addEventListener( 'resize', onWindowResize, false );



        }


    function initBeek() {

        beekScene = 27;
        getScene();
        $.getJSON(this.jsonpPrefix + '/guide/' + 66 + '/jsonp?callback=?', $.proxy(function(data) {
                //this.createGuide(data);
                if (!scene) this.beekScene = {
                        sceneId:
                            data.firstScene ||
                            data.guideSections[0].firstScene ||
                            data.guideSections[0].guideScenes[0].sceneId
                    };

            }, this));
        }; 

        function getScene() {
            var jsonpURL = jsonpPrefix + '/scene/' + 27 + '/jsonp?callback=?';
            $.getJSON(jsonpURL, $.proxy(startScene, this));
        };

     function beekParams(param) {
        var ret = {};
        if (guide) ret.guide = guide.toString();
        if (scene) ret.scene = scene.toString();
        return ret;
    }

 var FACES = "frblud";
    var noDeepZoom = {
        u:  true,
        d:  true
    };
    var TILES = ['0_0','0_1','1_0','1_1'];

function startScene(scene) {
    if (!this.beekScene) return;
    this.sides = [];
    for (var face in FACES) {
        var tiles = [];
      //  if (FACES[face] in noDeepZoom) {
            tiles.push (cdnPrefix + '/scene_' + scene.id + "_pano_" + 

scene.panoIncrement + "_" + FACES[face] + "/9/0_0.jpg");
          //  }
//            else {
//                for (var tile in TILES) tiles.push (
//                    cdnPrefix + '/scene_' + scene.id + "_pano_" + scene.panoIncrement + "_" + FACES[face] + "/10/" + TILES[tile] + ".jpg"
//                )
     // }
        this.sides.push(tiles);

        for (var tile in tiles)
            console.log(tiles)

    }



        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function loadTexture( path ) {

            var texture = new THREE.Texture( texture_placeholder );
            var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );

            var image = new Image();
            image.onload = function () {

                texture.image = this;
                texture.needsUpdate = true;

            };
            image.src = path;

            return material;

        }

        function onDocumentMouseDown( event ) {

            event.preventDefault();

            isUserInteracting = true;

            onPointerDownPointerX = event.clientX;
            onPointerDownPointerY = event.clientY;

            onPointerDownLon = lon;
            onPointerDownLat = lat;

        }

        function onDocumentMouseMove( event ) {

            if ( isUserInteracting === true ) {

                lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
                lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

            }

        }

        function onDocumentMouseUp( event ) {

            isUserInteracting = false;

        }

        function onDocumentMouseWheel( event ) {

            camera.fov -= event.wheelDeltaY * 0.05;
            camera.updateProjectionMatrix();

        }


        function onDocumentTouchStart( event ) {

            if ( event.touches.length == 1 ) {

                event.preventDefault();

                onPointerDownPointerX = event.touches[ 0 ].pageX;
                onPointerDownPointerY = event.touches[ 0 ].pageY;

                onPointerDownLon = lon;
                onPointerDownLat = lat;

            }

        }

        function onDocumentTouchMove( event ) {

            if ( event.touches.length == 1 ) {

                event.preventDefault();

                lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;
                lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

            }

        }

        function animate() {

            requestAnimationFrame( animate );
            update();

        }

        function update() {

            if ( isUserInteracting === false ) {

                lon += 0.1;

            }

            lat = Math.max( - 85, Math.min( 85, lat ) );
            phi = THREE.Math.degToRad( 90 - lat );
            theta = THREE.Math.degToRad( lon );

            target.x = 500 * Math.sin( phi ) * Math.cos( theta );
            target.y = 500 * Math.cos( phi );
            target.z = 500 * Math.sin( phi ) * Math.sin( theta );

            camera.lookAt( target );

            renderer.render( scene, camera );

        };
}

John Sterling · Accepted Answer · 2014-08-07 21:25:11Z

1

You're not closing function startScene(scene) { correctly. You're missing a left brace just before the function onWindowResize() { and the last line contains superfluous one.

Working plunker

answered Aug 7, 2014 at 21:25

John Sterling

1,1118 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Silly Javascript and ThreeJs issue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related