轨道控件显示错误未捕获的TypeError：无法读取未定义的属性“ ROTATE”

时间：2019-07-31 07:12:13

标签： javascript three.js

代码昨天工作正常，但突然开始在第82行的orbit control js文件中显示上述错误，如下所示。

未捕获到的TypeError：无法在新的THREE.OrbitControls（OrbitControls.js：82）上读取未定义的属性“ ROTATE”

此问题完全破坏了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);



})

1 个答案:

答案 0 :(得分：0)

根据https://discourse.threejs.org/t/recent-change-to-orbitcontrols-breaks-some-projects/8780，此问题源于版本不匹配。使用https://threejs.org/build/three.js作为您的three.js包含应该可以解决此问题。不匹配的原因是Three.js（原始文件）和轨道控制示例一起被更新，但是您的Three.js版本可能是较旧的版本。希望这可以帮助！

相关问题
最新问题