Почему возникает ошибка: «Не указано TypeError: undefined не является функцией»?

Я искал несогласованные фигурные скобки, но все еще не смог понять, почему ошибка показывает строку: lab3.init($('#viewport')); в HTML.Почему возникает ошибка: «Не указано TypeError: undefined не является функцией»?

HTML:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title>Graphics Lab</title> 
    <script src="js/graphics.js"></script> 
    <!-- Bootstrap core CSS --> 
    <link href="/css/bootstrap.min.css" rel="stylesheet"> 
    <style> 
    .starter-template { 
     padding: 40px 15px; 
     text-align: center; 
    } 
    #viewport { 
    height: 500px; 
    width: 600px; 
    background: white; 
    margin: 0px auto; 
    } 
    #viewport-container { 

    } 
    </style> 
    <script src="http://code.jquery.com/jquery-2.1.0.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.js"></script> 
    </head> 

    <body> 

    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Lab 3</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

    <div class="container"> 

     <div class="starter-template"> 
     <h1>Graphics</h1> 
     <p class="lead">This is my 3d Graphics scene</p> 

     <div id="viewport-container" class="well"> 
      <div id="viewport"> 
      </div> 
     </div> 

     </div> 

     <script> 

     //initialize the viewport 
     lab3.init($('#viewport')); 

     </script> 

    </div><!-- /.container --> 
    </body> 
</html>

JavaScript:

(function (lab3 , $, undefined) { 

lab3.init = function(hook) { 
    var WIDTH = 600, 
    HEIGHT = 500; 
    var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(WIDTH, HEIGHT); 
    hook.append(renderer.domElement); 
    var scene = new THREE.Scene(); 

    var pointLight = 
    new THREE.PointLight(0xFFFFFF); 
    pointLight.position = new THREE.Vector3(-10, 100, 100); 
    scene.add(pointLight); 

    var VIEW_ANGLE = 65, //65 FOV is most 'natural' FOV 
    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; 
    scene.add(camera); 

    var material = 
    new THREE.MeshLambertMaterial(
    { 
    color: 0x00bbcc 
    }); 

    var cube = new THREE.Mesh(
    new THREE.CubeGeometry(
    40, 55, 30), 
    material); 
    scene.add(cube); 

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

} 

})(window.lab3 = window.lab3 || {} , jQuery)

источник

2015-04-09 Grafics

где вы в своем html добавляете ли вы свой javascript? – gaitat

после названия: – Grafics

Включить graphic.js после jquery.js. –

Порядок включения сценариев.

<script src="http://code.jquery.com/jquery-2.1.0.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.js"></script> 
<script src="js/graphics.js"></script>

JQuery всегда должен быть включен fiirst.

_{Если ваш JS ссылается на плагин или библиотеку, ссылка должна быть указана ранее.}

источник

2015-04-09 03:36:36

Почему возникает ошибка: «Не указано TypeError: undefined не является функцией»?

ответ

Смежные вопросы