JavaScript代码到原型

Question

我试图＆＃34;转换＆＃34;此代码用于JavaScript中的原型样式。

该代码之前有效，但在原型设计之后它不起作用，也不会在我的开发者控制台中回应。

（我最近开始进行原型设计）

var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
var cube;

(function init() {
    scene = new THREE.Scene();
    var SCREEN_WIDTH = window.innerWidth,
        SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 10, 
        ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
        NEAR = 0.1,
        FAR = 20000;
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);

    scene.add(camera);
    camera.position.set(0, 150, 400);
    camera.lookAt(scene.position);

    // Create new renderer instance
    if (Detector.webgl) {
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
    } else {
        renderer = new THREE.CanvasRenderer();
    }

    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    container = document.getElementById('canvas-body');
    container.appendChild(renderer.domElement);
    renderer.domElement.setAttribute("id", "imageView");

    // EVENTS
    THREEx.WindowResize(renderer, camera);
    THREEx.FullScreen.bindKey({
        charCode: 'm'.charCodeAt(0)
    });

    // CONTROLS
    controls = new THREE.OrbitControls(camera, renderer.domElement);

    // LIGHT
    var light = new THREE.PointLight(0xffffff);
    light.position.set(0, 250, 0);
    scene.add(light);

    setFloor('images/checkerboard.jpg');

    createCanvasText();
    createCanvasImage("images/Dice-Blue-1.png");

    animate();
}())

function createCanvasText() {
    let canvas  = document.createElement('canvas');
    let context = canvas.getContext('2d');
        context.font = "Bold 40px Arial";
        context.fillStyle = "rgba(255,0,0,0.95)";
        context.fillText('Test!', 150, 50);
        context.fillStyle = "#FF0000";
        context.fillRect(0, 0, 150, 75); // x,y,width,height
        // canvas contents will be used for a texture
    let texture = new THREE.Texture(canvas)
        texture.needsUpdate = true;

    var material = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide
    });
    material.transparent = true;

    var mesh = new THREE.Mesh(
        new THREE.PlaneGeometry(canvas.width, canvas.height),
        material
    );
    mesh.position.set(200, 200, 200);
    scene.add(mesh);
}

function createCanvasImage(img) {
    let canvas  = document.createElement('canvas');
    let context = canvas.getContext('2d');
    // canvas contents will be used for a texture
    let texture = new THREE.Texture(canvas);
    let imageObj = new Image();
        imageObj.src = img;

        imageObj.onload = function() {
            context.drawImage(imageObj, 0, 0);
            if (texture) { // checks if texture exists
                texture.needsUpdate = true;
            }
        };

    let material = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide
    });
    material.transparent = true;

    let mesh = new THREE.Mesh(
        new THREE.PlaneGeometry(canvas.width, canvas.height),
        material
    );
    mesh.position.set(0, 50, -50);
    scene.add(mesh);
}

// set floor
function setFloor(img) {
    let floorTexture = new THREE.ImageUtils.loadTexture(img);
        floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
        floorTexture.repeat.set(10, 10);
    let floorMaterial = new THREE.MeshBasicMaterial({
        map: floorTexture,
        side: THREE.DoubleSide
    });
    let floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
    let floor = new THREE.Mesh(floorGeometry, floorMaterial);
        floor.rotation.x = Math.PI / 2;
        floor.doubleSided = false;
        scene.add(floor);
}

function animate() {
    requestAnimationFrame(animate);
    render();
    update();
}

function update() {
    if (keyboard.pressed("z")) {
        // do something
    }

    controls.update();
}

function render() {
    renderer.render(scene, camera);
}

这是我的原型风格：

var roomModule = (function() {
    var RoomEditor = function RoomEditor(settings) {
        var container, scene, camera, renderer, controls, stats;
        var keyboard = new THREEx.KeyboardState();
        var clock = new THREE.Clock();
        var cube;
        var SCREEN_WIDTH = window.innerWidth,
            SCREEN_HEIGHT = window.innerHeight;
        var VIEW_ANGLE = 10,                ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
            NEAR = 0.1,
            FAR = 20000;
    };

    RoomEditor.prototype = {
        'constructor': RoomEditor,
        'init': function() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
            scene.add(camera);
            camera.position.set(0, 150, 400);
            camera.lookAt(scene.position);
            setRenderer();
            setEvents();
            setControls();
            setLight();
            setFloor();
            createCanvasText();
            createCanvasImage();
            setFloor('images/checkerboard.jpg');
            createCanvasText();
            createCanvasImage("images/Dice-Blue-1.png");
            animate();
        },
        'setRenderer': function() {
            if (Detector.webgl) {
                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
            } else {
                renderer = new THREE.CanvasRenderer();
            }
            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            container = document.getElementById('canvas-body');
            container.appendChild(renderer.domElement);
            renderer.domElement.setAttribute("id", "imageView");
        },
        'setEvents': function() {
            THREEx.WindowResize(renderer, camera);
            THREEx.FullScreen.bindKey({
                charCode: 'm'.charCodeAt(0)
            });
        },
        'setControls': function() {
            controls = new THREE.OrbitControls(camera, renderer.domElement);
        },
        'setLight': function() {
            var light = new THREE.PointLight(0xffffff);
            light.position.set(0, 250, 0);
            scene.add(light);
        },
        'setFloor': function(img) {
            let floorTexture = new THREE.ImageUtils.loadTexture(img);
                floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
                floorTexture.repeat.set(10, 10);
            let floorMaterial = new THREE.MeshBasicMaterial({
                map: floorTexture,
                side: THREE.DoubleSide
            });
            let floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
            let floor = new THREE.Mesh(floorGeometry, floorMaterial);
                floor.rotation.x = Math.PI / 2;
                floor.doubleSided = false;
                scene.add(floor);
        },
        'createCanvasText': function() {
            let canvas  = document.createElement('canvas');
            let context = canvas.getContext('2d');
                context.font = "Bold 40px Arial";
                context.fillStyle = "rgba(255,0,0,0.95)";
                context.fillText('SkillEye Test!', 150, 50);
                context.fillStyle = "#FF0000";
                context.fillRect(0, 0, 150, 75); // x,y,width,height
                // canvas contents will be used for a texture
            let texture = new THREE.Texture(canvas)
                texture.needsUpdate = true;

            var material = new THREE.MeshBasicMaterial({
                map: texture,
                side: THREE.DoubleSide
            });
            material.transparent = true;
            var mesh = new THREE.Mesh( new THREE.PlaneGeometry(canvas.width, canvas.height), material );
            mesh.position.set(200, 200, 200);
            scene.add(mesh);
        },
        'createCanvasImage': function(img) {
            let canvas  = document.createElement('canvas');
            let context = canvas.getContext('2d');
            // canvas contents will be used for a texture
            let texture = new THREE.Texture(canvas);
            // load an image
            let imageObj = new Image();
                imageObj.src = img;

                imageObj.onload = function() {
                    context.drawImage(imageObj, 0, 0);
                    if (texture) { // checks if texture exists
                        texture.needsUpdate = true;
                    }
                };
            let material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
            material.transparent = true;

            let mesh = new THREE.Mesh( new THREE.PlaneGeometry(canvas.width, canvas.height), material );
            mesh.position.set(0, 50, -50);
            scene.add(mesh);
        },
        'animate': function() {
            requestAnimationFrame(animate);
            render();
            update();
        },
        'update': function() {
            if (keyboard.pressed("z")) {
                // do something
            }
            controls.update();
        },
        'render': function() {
            renderer.render(scene, camera);
        }
    }
}());