Uncaught ReferenceError: OrbitControls is not defined

Questions
1

Hi,

I am using the latest build of three.min.js and OrbitContorols.js.
The error has happened with Orbit-controls. Why this error is happened?

Uncaught ReferenceError: OrbitControls is not defined
    at main.js:18

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05</title>
    <script src="js/three.min.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <canvas id="myCanvas"></canvas>
</body>
</html>

main.js

document.addEventListener('load', init)

const width = 960
const height = 540

function init(){
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#myCanvas'),
    })
renderer.setSize(width, height)
}

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000)
camera.position.set(0, 0, 1000)
const controls = new OrbitControls( camera, renderer.domElement );
const mesh = THREE.Mesh(
    new THREE.MeshNormalMaterial())
scene.add(mesh)

tick()

function tick(){
    renerer.render(scene, camera)
    requestAnimationFrame(tick)
}
2

If you’re using OrbitControls.js (not jsm), OrbitControls are appended to the global THREE object. You can use them as:

const controls = new THREE.OrbitControls();
3 Likes
3

I just encounter this as I am also a beginner.
Be careful, there are two different: OrbitControls.js
one is in examples/js/controls/, another is in examples/jsm/controls/.
The usage are different.
the former one should be “new THREE.OrbitControls();”
the latter one should be “import OrbitControls from path_to_jsm_version_OrbitControls.js”

I switch to the other version OrbitControls.js, and my problem immediately solved.