As I delve into the world of three.js, I've encountered an issue that has me stumped. Despite declaring the use of OrbitControls.js (CODE1) and seeing it in the THREE tree in the DOM (Figure 1), I keep running into the error: "TypeError: THREE.OrbitControls is not a constructor" (Figure 2). It's a seemingly simple problem, but I can't seem to find a satisfactory solution.
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>
https://i.sstatic.net/qPBdj.png
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();