CODEWITHSUNDEEP
javascriptthree.js
Ramón Wilhelm
Ramón Wilhelm

Reputation: 997

Three.js - OrbitControls doesn't work

If I run the script, the console displays me "THREE.OrbitControls is not a constructor".

enter image description here

What did I wrong? I used the same code from a manual.

var controls;
    controls = new THREE.OrbitControls( camera );
    controls.addEventListener( 'change', render );

var render = function () {
    requestAnimationFrame( render );
    renderer.render(scene, camera);
                //Hier wird die Größe des Fensters manipuliert!
    renderer.setSize(window.innerWidth - 20, window.innerHeight - 20);

};

    var animate = function () {
        requestAnimationFrame( animate );
        controls.update();                  
    };


var geometry1 = new THREE.BoxGeometry( 10, 10, 10);
var material = new THREE.MeshPhongMaterial( {specular: "#fdfb57", color: "#d8d613", emissive: "#6b6a0d", side: THREE.DoubleSide} );
var box = new THREE.Mesh(geometry1, material);


scene.add(box);   

camera.position.z = 50;


render();   
animate();

Upvotes: 25

Views: 32234

Answers (5)

WestLangley
WestLangley

Reputation: 104783

You must explicitly include OrbitControls in your application. For example:

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
    
<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three/build/three.module.js",
            "three/addons/": "https://unpkg.com/three/examples/jsm/"
        }
    }
</script>

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

Also, read the comments in the three.js OrbitControls example carefully so you understand when to use

controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)

and when to use

controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true

https://github.com/mrdoob/three.js/blob/dev/examples/misc_controls_orbit.html

three.js r.147

Upvotes: 26

charmi shah
charmi shah

Reputation: 1

I faced similar issue and after lot of research, the below thing worked

In your HTML the order matters when adding OrbitControls as it needs certain things from Three.js.

It should be

<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>

Upvotes: 0

playbyan1453
playbyan1453

Reputation: 43

I have a same problem too, it's because you put in wrong line. you need to put it under of this line

document.body.appendChild( renderer.domElement );

then you add orbit controls

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', posUpdate );
controls.update();

if it wasn't work, add the script file download here

<script src="OrbitControls.js"></script>

Upvotes: 2

Tethys Zhang
Tethys Zhang

Reputation: 474

https://github.com/nicolaspanel/three-orbitcontrols-ts :

npm install --save three-orbitcontrols-ts
import { OrbitControls } from 'three-orbitcontrols-ts'

orbitcontrols should be installed separately in angular, this issue bothers me for several days.

Upvotes: 6

FraggaMuffin
FraggaMuffin

Reputation: 4225

I had the same issue with a webpack build of the three library

var THREE = require('three')
THREE.OrbitControls === undefined  // true

Solution, install a 3rd party orbit control

npm install three-orbit-controls

details here: https://github.com/mattdesl/three-orbit-controls

then change the above code fragment to

var THREE = require('three')
var OrbitControls = require('three-orbit-controls')(THREE)
OrbitControls === undefined  // false

ok, not the best example, but when applied in place of THREE.OrbitControls, it works just fine ;)

Upvotes: 11

Related Questions