I am writing a code to create a plane and put objects on it through three.js Below is my code. When I try to run it, getting

Uncaught ReferenceError: mythree is not defined

for last line.

Uncaught SyntaxError: Unexpected token ) js/myassn3.js:60

Below is the JS code:

(function (mythree , $, undefined) {
    mythree.init = function (hook) {
        var checkerBoard = undefined;
        var WIDTH  = 600,
            HEIGHT = 500;
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(WIDTH, HEIGHT);
        hook.append(renderer.domElement);

        // CAMERA SETUP
        var VIEW_ANGLE = 65, 
            ASPECT = WIDTH / HEIGHT,
            NEAR = 0.1,  // these elements are needed for cameras to
            FAR = 10000; // partition space correctly
        var camera = new THREE.PerspectiveCamera(
            VIEW_ANGLE,
            ASPECT,
            NEAR,
            FAR);
        camera.position.z = 300;
        var controls = new THREE.TrackballControls(camera);
        controls.target.set(0, 0, 0)

        // SCENE SETUP
        var scene = new THREE.Scene();
        scene.add(camera);

        // PLAIN SETUP & APPLYING TEXTURE TO IT
        var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), material);
        plane.overdraw = true;
        scene.add(plane);

        // TEXTURE SETUP
        var texture =THREE.ImageUtils.loadTexture('./images/chessboard.jpg');
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });

        var loader = new THREE.JSONLoader();
        var pointLight = new THREE.PointLight(0xFFFFFF);
        pointLight.position = new THREE.Vector3(-10, 30, 100);
        scene.add(pointLight);
        for (i = 0; i < 4; i++) {
            var a = -130;
            loader.load("piece.json", function (geometry) {
                mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x000000 }));
                mesh.scale.set(30, 30, 30);
                mesh.position = new THREE.Vector3(a, -130, 15); 
                mesh.rotation.x += 1.5;
                a = a + 75;
                scene.add(mesh);
            });
        }

        var render = function () {
            renderer.render(scene, camera);
            controls.update();
            requestAnimationFrame(render);
        };
        render();
        window.requestAnimationFrame(renderLoop);
})(window.mythree = window.mythree || {}, jQuery)

Can anybody help in what's wrong with this?

I am writing a code to create a plane and put objects on it through three.js Below is my code. When I try to run it, getting

Uncaught ReferenceError: mythree is not defined

for last line.

Uncaught SyntaxError: Unexpected token ) js/myassn3.js:60

Below is the JS code:

(function (mythree , $, undefined) {
    mythree.init = function (hook) {
        var checkerBoard = undefined;
        var WIDTH  = 600,
            HEIGHT = 500;
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(WIDTH, HEIGHT);
        hook.append(renderer.domElement);

        // CAMERA SETUP
        var VIEW_ANGLE = 65, 
            ASPECT = WIDTH / HEIGHT,
            NEAR = 0.1,  // these elements are needed for cameras to
            FAR = 10000; // partition space correctly
        var camera = new THREE.PerspectiveCamera(
            VIEW_ANGLE,
            ASPECT,
            NEAR,
            FAR);
        camera.position.z = 300;
        var controls = new THREE.TrackballControls(camera);
        controls.target.set(0, 0, 0)

        // SCENE SETUP
        var scene = new THREE.Scene();
        scene.add(camera);

        // PLAIN SETUP & APPLYING TEXTURE TO IT
        var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), material);
        plane.overdraw = true;
        scene.add(plane);

        // TEXTURE SETUP
        var texture =THREE.ImageUtils.loadTexture('./images/chessboard.jpg');
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });

        var loader = new THREE.JSONLoader();
        var pointLight = new THREE.PointLight(0xFFFFFF);
        pointLight.position = new THREE.Vector3(-10, 30, 100);
        scene.add(pointLight);
        for (i = 0; i < 4; i++) {
            var a = -130;
            loader.load("piece.json", function (geometry) {
                mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x000000 }));
                mesh.scale.set(30, 30, 30);
                mesh.position = new THREE.Vector3(a, -130, 15); 
                mesh.rotation.x += 1.5;
                a = a + 75;
                scene.add(mesh);
            });
        }

        var render = function () {
            renderer.render(scene, camera);
            controls.update();
            requestAnimationFrame(render);
        };
        render();
        window.requestAnimationFrame(renderLoop);
})(window.mythree = window.mythree || {}, jQuery)

Can anybody help in what's wrong with this?

• javascript
• jquery
• three.js

1 Answer 1

Firstly: please, learn to indent your code. Please!
You wouldn't need to be asking for our help if your code was readable, or if you simply used an IDE (any IDE that counts parenthesis, brackets and braces for you).

So, the problem is that your mythree.init function definition block lacks the closing curly bracket (the }). I don't know where your mythree.init ends (only because your code isn't indented and it's really confusing), so fix it yourself.