Yesterday, the code was functioning properly until it suddenly started displaying an error in the orbit control JS file on line 82. The error message reads as follows:
Uncaught TypeError: Cannot read property 'ROTATE' of undefined at new THREE.OrbitControls (OrbitControls.js:82)
This issue is causing a complete breakdown of the 3D scene. By commenting out the code for controls, the 3D scene is operational again. Can someone assist me with resolving this problem?
// Establish 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;
///////////////////////////////////////////////////////////////////////
/// Configure 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"),
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)
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 spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );
var sprite = new THREE.Sprite( spriteMaterial );
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);
////////////////////////////////////
/// Render the object with animation loop /////////////////////////
var render = function (actions) {
renderer.render(scene, camera);
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);
})