Question

错误在这一行：var controls = new THREE.TrackballControls（camera）;我在HTML文件中检查了我的脚本的顺序，看起来很好，所以我不知道错误的原因。

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>

    <!-- 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="js/TrackballControls.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.js"></script>
    <script src="js/graphics.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;

    var controls = new THREE.TrackballControls( camera );
    controls.target.set( 0, 0, 0 )

    var scene = new THREE.Scene();
    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);
    controls.update();
    window.requestAnimationFrame(renderLoop);
    }
    window.requestAnimationFrame(renderLoop);

}

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

Answer 1

请尝试将TrackballControls.js放在Three.js下面。

为什么会出现错误，“Uncaught TypeError：undefined不是函数”？

1 个答案: