2015-01-26 2 views
0

Когда я запускаю мой код, я получаю следующее сообщение об ошибке в этой строке:Невозможно инициализировать dat.GUI в Three.js

var gui = new dat.GUI(); 

ошибка: Не удается получить свойство «GetItem» нулевой ссылки или не определено.

Я импортировал библиотеку, я не знаю, что это неправильно, вот мой код:

<html> 
    <head> 
     <title>Stack Overflow</title> 
     <style> 
      body { margin: 0; } 
      canvas { width: 100%; height: 100% } 
     </style> 
    </head> 
    <body> 
     <div id="container"></div> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
     <script src="js/three.min.js"></script> 
     <script src="js/optimer_regular.typeface.js"></script> 
     <script src="js/TrackballControls.js"></script> 
     <script src="js/stats.min.js"></script> 
     <script src="js/threex.dynamictexture.js"></script> 
     <script src="js/dat.gui.min.js"></script> 
     <script> 
      //Basic Three components 
      var scene = new THREE.Scene(); 
      camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000); 
      //position camera 
      camera.position.z = 700; 
      //Set camera controls 
      var controls = new THREE.TrackballControls(camera); 
      controls.rotateSpeed = 1.0; 
      controls.zoomSpeed = 1.2; 
      controls.panSpeed = 0.8; 

      controls.noZoom = false; 
      controls.noPan = false; 

      controls.staticMoving = true; 
      controls.dynamicDampingFactor = 0.3; 

      controls.keys = [ 65, 83, 68 ]; 

      //Set the renderer 
      var renderer = new THREE.WebGLRenderer({ antialias: false }); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 


      //Set the lights 
      var light; 
      scene.add(new THREE.AmbientLight(0x404040)); 

      light = new THREE.DirectionalLight(0xffffff); 
      light.position.set(0, 1, 1); 
      scene.add(light); 

      //Let's add a cute cube 
      var object; 
      var map = THREE.ImageUtils.loadTexture('images/UV_Grid_Sm.jpg'); 
      map.wrapS = map.wrapT = THREE.RepeatWrapping; 
     map.anisotropy = 16; 

      var material = new THREE.MeshLambertMaterial({ ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide }); 

      object = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 4, 4, 4), material); 
      object.position.set(400, 20, 50); 
      scene.add(object); 

      //Let's add a GUI 
      var API = { 
       'show model' : true, 
       'show skeleton' : false 
      }; 

      var gui = new dat.GUI(); 



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


      //Render scene 
      function render() { 
       controls.update(); 
       renderer.render(scene, camera); 
      } 


      animate(); 
     </script> 
    </body> 
</html> 
+0

Нужна дополнительная информация, похоже, что какая-то другая часть вашего кода вызывает проблему, а не код, который вы опубликовали. – Flux

+0

Hi Flux, я отправил весь мой код, не могли бы вы взглянуть? Благодаря! –

+0

Привет всем! Я решил проблему с моим приложением с Firefox (я использовал IE11) –

ответ

0

Решение: Не используйте Internet Explorer, я запустить тот же код в Firefox, и она работает.