TypeError：THREE.OrbitControls不是構造函數

我從three.js開始。現在我發現一個問題並需要幫助。看起來很簡單，但我找不到一個好的答案。問題是：即使聲明使用OrbitControls.js（CODE1），即使它在DOM樹中顯示在三棵樹上（圖1）。當我嘗試使用構造函數（CODE 2）時，我收到錯誤：「TypeError：THREE.OrbitControls不是構造函數」圖2。TypeError：THREE.OrbitControls不是構造函數

CODE1 :***index.html*** 
<html> 
    <head> 
     <title>My first three.js app</title> 
     <style> 
      body { margin: 0; } 
      canvas { width: 100%; height: 100% } 
     </style> 
    </head> 
    <body> 

     <script src="js/libs/three.min.js"></script> 
     <script src="js/cena.js"></script> 
     <script src="js/libs/AxisHelper.js"></script> 
     <script src="js/libs/GridHelper.js"></script> 
     <script src="js/libs/OrbitControls.js"></script> 

    </script> 
    </body> 
</html>

CODE2***:cena.js*** 

var cena = new THREE.Scene(); 

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

var renderizador = new THREE.WebGLRenderer({antialias:true}); 

renderizador.setSize(window.innerWidth, window.innerHeight); 

document.body.appendChild(renderizador.domElement); 
//---------------------------- 


var geometry = new THREE.BoxGeometry(3, 1, 2); 

var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 

var cube = new THREE.Mesh(geometry, material); 

var axisHelper = new THREE.AxisHelper(5); 
cena.add(axisHelper) 
var tamanho = 10; 
var elementos = 10; 
var grid = new THREE.GridHelper(tamanho,elementos); 
cena.add(grid); 

cena.add(cube); 

camera.position.z = 10; 
camera.position.y = 10; 
camera.position.x = 5; 

var lookat_vector = new THREE.Vector3(0,0,0); 
camera.lookAt(lookat_vector); 
//++++++++++++++++++++++++++++++++++++++++++++++++++++++ 

var controle = new THREE.OrbitControls(camera, renderizador.domElement); 

var render = function() { 
     requestAnimationFrame(render); 
     controle.update(); 
     cube.rotation.x += 0.01; 
     cube.rotation.y +=0.01; 
     cube.rotation.z +=0.03; 

     renderizador.render(cena, camera); 
     //controle.update(); 
    }; 

render();

來源

2017-01-26 Marcello Marinho Ribeiro

您需要在之前創建THREE.OrbitalControls腳本標記OBJLoader.js

。

來源

2017-01-26 04:50:36 Fox

您需要包含庫並在末尾放置cena.js腳本。腳本標記被同步加載。

<script src="js/libs/three.min.js"></script> 
    <script src="js/libs/AxisHelper.js"></script> 
    <script src="js/libs/GridHelper.js"></script> 
    <script src="js/libs/OrbitControls.js"></script> 
    <script src="js/cena.js"></script>

來源

2017-01-26 10:58:48 MartyBoggs

賓果。你是對的..令人難以置信。 –

TypeError：THREE.OrbitControls不是構造函數

回答

相關問題