Can't use OrbitControls

Questions
,
1

I put these 2 js file into my html

https://github.com/mrdoob/three.js/tree/dev/build/three.js
https://github.com/mrdoob/three.js/blob/6e8d505e7eb461733e8d51738930fe82eccf2cf1/examples/js/controls/OrbitControls.js

when i use

const controls = new OrbitControls( camera, renderer.domElement );

webpage go blank and says

Uncaught ReferenceError: OrbitControls is not defined

and when i use

const controls = new THREE.OrbitControls( camera, renderer.domElement );

webpage also go blank and says

Uncaught TypeError: THREE.OrbitControls is not a constructor

here’s my code, it really confusing me.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test1</title>
	<style>body {margin: 0;overflow: hidden;}</style>
    <script language="javascript" type="text/javascript" src="js/p5.min.js"></script>
	<script src="js/dat.gui.min.js"></script>
	<script src="js/three.js"></script>
	<script src="js/OrbitControls.js"></script>
</head>
<body>
<div id="WebGL-output"></div>
	
<script type="text/javascript">
        var renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setClearColor(new THREE.Color(0xAAAAAA));
        renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild( renderer.domElement );
	
		var scene = new THREE.Scene();
	
		var camera = new THREE.PerspectiveCamera(45,
        window.innerWidth / window.innerHeight, 1, 10000);
		//const controls = new OrbitControls( camera, renderer.domElement );
		//const controls = new THREE.OrbitControls( camera, renderer.domElement );
        camera.position.z = 100;
		//controls.update();
	    //-------------------------------------------------------------------------------------
		let picGeo = new THREE.PlaneGeometry(50,50,128,128);
		var texture = new THREE.TextureLoader().load("images/uv.jpg");
		let picMat = new THREE.MeshBasicMaterial({color:0xFF0000,transparent:true,opacity:1,map:texture});
		let pic = new THREE.Mesh(picGeo,picMat);
	    pic.position.z =10;
		scene.add(pic);
	
		animate();
			function animate() {
				requestAnimationFrame( animate );
				renderer.render( scene, camera );
			};
</script>
</body>
</html>
2

It seems to work as expected in this fiddle: Edit fiddle - JSFiddle - Code Playground

I have copied most of your code. Just used the URLs from a CDN.

1 Like
3

it worked, and i just copy cdn’s OrbitControls.js instead of offcial one, maybe the official js are actually unofficial LOL，thanks my friend!

4

Your URLs are no source files. They link to pages at GitHub.

1 Like
5

Sometime I have to run this code without internet, local file is the only option. :joy: