【发布时间】：2019-12-08 15:26:05
【问题描述】：
代码昨天运行良好，但突然开始在第 82 行的轨道控制 js 文件中显示上述错误，如下所示。
Uncaught TypeError: Cannot read property 'ROTATE' of undefined at new THREE.OrbitControls (OrbitControls.js:82)
这个问题完全破坏了 3d 场景。注释掉控件的代码使 3d 场景工作。有人可以帮我解决这个问题吗？
//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);
})
【问题讨论】：
标签： javascript three.js