I followed this quick tutorial from YouTube
When I comment this line out I have the working example without the controls.
//controls = new THREE.OrbitControls( camera, renderer.domElement ); But when I try to use the OrbitControls the log tells me the following:
(index):21 Uncaught ReferenceError: controls is not defined at (index):21 The content of my 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/three.js"></script> <script src="js/OrbitControls.js"></script> <script type="module"> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); controls = new THREE.OrbitControls( camera, renderer.domElement ); var geometry = new THREE.SphereGeometry( 1, 64, 64 ); var material = new THREE.MeshBasicMaterial( {color: 0x00ff00 } ); var sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); camera.position.z = 5; var animate = function () { requestAnimationFrame( animate ); renderer.render( scene, camera ); }; animate(); </script> </body> </html> 
