如果没有ReferenceError,Three.js将无法渲染我的场景?

时间:2016-08-01 17:17:55

标签: javascript three.js

我目前正在制作一个简单的随机生成的小型迷宫游戏,它在上一次会议上运行良好。突然间,当我重新开始尝试集成OBJ加载时,我的场景将不再渲染。我尝试删除它在破坏之前所做的所有事情,现在我有这个奇怪的错误,除非我的代码中有一个ReferenceError它根本不会渲染。

<html>
<head>
    <title>MazeGamer 2.0</title>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="./favicon.png">
    <script type="text/javascript" src="js/three.js-master/build/three.js"></script>
    <script type="text/javascript" src="js/glcode.js"></script>
    <script type="text/javascript" src="js/mazeGen.js"></script>
    <script type="text/javascript" src="js/Tree.js"></script>
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/scene.js"></script>
    <script type="text/javascript" src="js/keyPress.js"></script>
    <script type="text/javascript" src="js/input.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <style>
        body { margin: 0; background-color: black; }
        canvas { width: 100%; height: 100%;}
    </style>
</head>
<body>
    <script>
        var width = 3;
        var height = 3;


        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 90, window.innerWidth/window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        document.body.addEventListener("keydown",keypress_calls);
        renderer.domElement.addEventListener("click", on_click);
        window.addEventListener("resize",resizeWindow);

        var web_scene = new SCENE(scene,camera,renderer,width,height);
        scene = web_scene.setup();

//            var billboard;
//            for(var i = 0; i < scene.children.length; i++)
//            { 
//                if(scene.children[i].name === "billboard")
//                { 
//                    billboard = scene.children[i]; 
//                } 
//            }

        var render = function () {
            requestAnimationFrame( render );
            renderer.render(scene, camera);
            billboard.rotation.y = camera.rotation.y; //this line is the one that determines whether my scene renders or not and I have no idea why
            gamePadInput();
        };

        render();
    </script>
</body>

正如您所看到的,注释行应该是一个ReferenceError,因为它使用了一个未实例化的变量,即:

index.html:52 Uncaught ReferenceError: billboard is not defined

当我注释掉该行时,并且在我的控制台中没有报告错误时,我的场景完全是空白的。老实说,为什么会发生这种情况,我感到困惑和慌乱。任何建议都将不胜感激。

编辑#1

//the following is in the file input.js

var buttonList = {};
var gamepad;

function gamePadInput(){    
    if(gamepad === undefined){
        gamepad = navigator.getGamepads()[0];
    }
    if(navigator.getGamepads()[0] !== undefined){
        buttonList.a = gamepad.buttons[0].pressed;
        buttonList.b = gamepad.buttons[1].pressed;
        buttonList.x = gamepad.buttons[2].pressed;
        buttonList.y = gamepad.buttons[3].pressed;
        buttonList.rb = gamepad.buttons[5].pressed;
        buttonList.lb = gamepad.buttons[4].pressed;
        buttonList.rt = gamepad.buttons[7];
        buttonList.lt = gamepad.buttons[6];
        buttonList.l3 = gamepad.buttons[10].pressed;
        buttonList.r3 = gamepad.buttons[11].pressed;
        buttonList.u = gamepad.buttons[12].pressed;
        buttonList.d = gamepad.buttons[13].pressed;
        buttonList.l = gamepad.buttons[14].pressed;
        buttonList.r = gamepad.buttons[15].pressed;
        buttonList.sel = gamepad.buttons[8].pressed;
        buttonList.strt = gamepad.buttons[9].pressed;
        buttonList.lxAxis = (Math.abs(gamepad.axes[0]) <= 0.25) ? 0 : gamepad.axes[0];
        buttonList.lyAxis = (Math.abs(gamepad.axes[1]) <= 0.25) ? 0 : gamepad.axes[1];
        buttonList.rxAxis = (Math.abs(gamepad.axes[2]) <= 0.20) ? 0 : gamepad.axes[2];
        buttonList.ryAxis = (Math.abs(gamepad.axes[3]) <= 0.20) ? 0 : gamepad.axes[3];
    }

    if(buttonList.rxAxis !== 0)
    {
        camera.rotation.y += (buttonList.rxAxis * -0.0625);
    }
    if(buttonList.lxAxis !== 0)
    {
        camera.translateX(buttonList.lxAxis * 0.0625);
    }
    if(buttonList.lyAxis !== 0)
    {
        camera.translateZ(buttonList.lyAxis * 0.0625);
    }
    if(buttonList.d){
        console.log("reset");
    }
    return buttonList;
};

0 个答案:

没有答案