Orbit controls showing error Uncaught TypeError: Cannot read property 'ROTATE' of undefined

Question

The Code was working fine yesterday but suddenly started showing the error above in orbit control js file in line 82 as follows.

Uncaught TypeError: Cannot read property 'ROTATE' of undefined at new THREE.OrbitControls (OrbitControls.js:82)

this issue completely breaks the 3d scene. commenting out the code for controls made the 3d scene work. Can some one help me with this issue.

//Create a Parent container for the 3d scene
var container = document.getElementById("threedscene");

///////////////////////////////////////////////////////////////////////
/// Set UP The SCENE/CAMERA  /////////////////////////

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
camera.position.set(0, 0, 20);


//Orbit Controls
var controls = new THREE.OrbitControls( camera, renderer.domElement )
controls.minDistance = 4.11;
controls.maxDistance = 20;
controls.enableZoom = false;

///////////////////////////////////////////////////////////////////////
/// Set UP The Lights  /////////////////////////

var light = new THREE.AmbientLight( 0x888888 )
scene.add( light )
var light = new THREE.DirectionalLight( 0xfdfcf0, 1 )
light.position.set(10,10,10)
scene.add( light )

///////////////////////////////////////////////////////////////////////
/// Create the Objects  /////////////////////////
//Earth
var earthGeometry = new THREE.SphereGeometry(4, 50,50 );
var earthMaterial = new THREE.MeshPhongMaterial({
    map: new THREE.ImageUtils.loadTexture("https://thefederal.com/embed/earth-moon/images/land_ocean_ice_cloud_2048.jpg"),
    // map: new THREE.ImageUtils.loadTexture("images/earth_3.jpg"),
    color: 0xaaaaaa,
    specular: 0x333333,
    shininess: 25
});
var earth = new THREE.Mesh(earthGeometry, earthMaterial);
scene.add(earth);
earth.rotation.y = 3.6;
earth.rotation.x = 0.3;

var markerGeometry = new THREE.SphereGeometry(0.10, 50,50 );
var markerMaterial = new THREE.MeshPhongMaterial({
    // map: new THREE.ImageUtils.loadTexture("images/land_ocean_ice_cloud_2048.jpg"),
    // map: new THREE.ImageUtils.loadTexture("images/marker_3.jpg"),
    color: 0xA40000,
    specular: 0x333333,
    shininess: 25
});
var marker = new THREE.Mesh(markerGeometry, markerMaterial);
scene.add(marker);
marker.position.set(1,-0.2,3.8)
// marker.rotation.y = 3.6;
// marker.rotation.x = 0.3;

elementgroup = new THREE.Object3D();//create an empty container
elementgroup.add( earth );//add a mesh with geometry to it
elementgroup.add( marker );//add a mesh with geometry to it
scene.add( elementgroup );//when done, add the group to the scene


var spriteMap = new THREE.TextureLoader().load( "https://thefederal.com/embed/earth-moon/images/sprite.png" );
// var spriteMap = new THREE.TextureLoader().load( "sprite.png" );
var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );
var sprite = new THREE.Sprite( spriteMaterial );
// sprite.position.x = -8;
// sprite.scale.set(8, 8, 1)

//Mobile Position


scene.add( sprite );

var spriteMap2 = new THREE.TextureLoader().load( "https://thefederal.com/embed/earth-moon/images/sprite2.png" );
var spriteMaterial2 = new THREE.SpriteMaterial( { map: spriteMap2, color: 0xffffff } );
var sprite2 = new THREE.Sprite( spriteMaterial2 );
sprite2.position.x = 8;
sprite2.scale.set(8, 8, 8)

scene.add( sprite );
scene.add( sprite2 );


//Clouds
var cloudGeometry = new THREE.SphereGeometry(4.1,  50, 50);
var cloudMaterial = new THREE.MeshPhongMaterial({
    map: new THREE.ImageUtils.loadTexture("https://thefederal.com/embed/earth-moon/images/clouds_2.jpg"),
    transparent: true,
    opacity: 0.1
});
var clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
scene.add(clouds);


if(window.innerWidth <= 800){
    sprite.position.y = 5.5; // to push to top
    sprite.position.x = 0; // to push to top
    sprite.scale.set(5, 5, 1) // to push to top
    sprite2.position.y = -5.5; // to push to top
    sprite2.position.x = 0; // to push to top
    sprite2.scale.set(7, 7, 1) // to push to top
    earth.scale.set(0.7, 0.7, 0.7) // to push to top
    marker.position.set(1,-0.2,2.55);
    clouds.scale.set(0.75, 0.75, 0.75) // to push to top
}else{
    sprite.position.y = 0; 
    sprite.position.x = -8;
    sprite.scale.set(8, 8, 1);
}


//Stars
var starGeometry = new THREE.SphereGeometry(1000, 50, 50);
var starMaterial = new THREE.MeshPhongMaterial({
    map: new THREE.ImageUtils.loadTexture("https://thefederal.com/embed/earth-moon/images/galaxy_starfield.jpg"),
    color: 0xaaaaaa,
    side: THREE.DoubleSide,
    shininess: 0
});
var starField = new THREE.Mesh(starGeometry, starMaterial);
scene.add(starField);

starField.position.set(0,0,0)


 //Moon 
var moonGeometry = new THREE.SphereGeometry(3.5, 50,50);
var moonMaterial = new THREE.MeshPhongMaterial({
    map: THREE.ImageUtils.loadTexture("https://thefederal.com/embed/earth-moon/images/moon_texture.jpg"),
    color: 0xffffff
});
var moon = new THREE.Mesh(moonGeometry, moonMaterial);
moon.position.set(35,0,0);
scene.add(moon);

//Set the moon's orbital radius, start angle, and angle increment value
var r = 35;
var angle = 5;
var dAngle = 0.5 * Math.PI / 1000;

window.addEventListener('resize', function(){
    var width=window.innerWidth, height=window.innerHeight;
    renderer.setSize( width, height );
    container.appendChild( renderer.domElement );
    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    if(window.innerWidth <= 600){
        sprite.position.y = 5; // to push to top
        sprite.position.x = 0; // to push to top
        sprite.scale.set(5, 5, 1) // to push to top
    }else{
        sprite.position.y = 0;
        sprite.position.x = -8;
        sprite.scale.set(8, 8, 1);
    }
})

///////////////////////////////////////////////////////////////////////
/// Render the object with animation loop  /////////////////////////
var render = function (actions) {

    renderer.render(scene, camera);

    //Rotate the earth & cloud about the y-axis
    // elementgroup.rotation.y += .0005;
    // earth.rotation.y += .0005;
    // clouds.rotation.y -= .00025;

    // earth.position.z += 0.01;
    // camera.position.z -= 0.1;


    //Increment theta, and update moon x and y
    //position based off new theta value        
    angle += dAngle;
    moon.position.x = r * Math.cos(angle);
    moon.position.z = r * Math.sin(angle);


    requestAnimationFrame( render );

};

render();



var domEvents = new THREEx.DomEvents(camera, renderer.domElement);

domEvents.addEventListener(marker, 'mouseover', function(event){

    marker.scale.set(1.5, 1.5, 1.5);
})

domEvents.addEventListener(marker, 'mouseout', function(event){

    marker.scale.set(1, 1, 1);
})

domEvents.addEventListener(marker, 'click', function(event){



    fullpage_api.moveTo('pageone', 1);


}, false)


domEvents.addEventListener(marker, 'touchstart', function(event){

    console.log("Test");
    fullpage_api.moveTo('pageone', 1);



})

Answer 1

According to https://discourse.threejs.org/t/recent-change-to-orbitcontrols-breaks-some-projects/8780, the problem stems from version mismatch. Using https://threejs.org/build/three.js as your three.js include should fix the issue. The mismatch is from three.js - the original file - being updated, along with the example for orbit controls, however, your version of three.js may be an older one. Hope this helps!