显示错误的动态观察控件未捕获类型错误：无法读取未定义的属性"ROTATE"

Question

昨天该代码正常工作，但突然开始在第82行中的Orbit Control JS文件中显示上述错误。

uck offult typeError：无法在新的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);

})

Answer 1

根据https://discourse.threejs.org/t/recent-change-change-to-orbitcontrols-breaks-breaks-some-projects/8780，问题源于版本不匹配。使用https://threejs.org/build/three.js作为您的三个。不匹配来自三分 - 原始文件 - 正在更新，以及轨道控件的示例，但是，您的三个版本可能是较旧的。希望这可以帮助！