Javascript 3.js轨道控制

我已经开始研究THREE.js，并根据一些例子构建了一个基本的旋转地球仪。我试图添加轨道控制，但没有任何运气。我在控制台日志中不断收到以下错误

未捕获的TypeError:_threeJs2.default.OrbitControls不是函数

the code is below
var posX = 200;
var posY = 400;
var posZ = 1800;
var width = document.getElementById('main').getBoundingClientRect().width;
var height = 600;

var FOV = 45;
var NEAR = 2;
var FAR = 4000;

var clock=new THREE.Clock();
var rotationSpeed = 0.02;
var controls;

// some global variables and initialization code
// simple basic renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width,height);
renderer.setClearColor( 0xfff1e0, 1);

// add it to the target element
var globeDiv = document.getElementById("globeDiv");
globeDiv.appendChild(renderer.domElement);

// setup a camera that points to the center
var camera = new THREE.PerspectiveCamera(FOV,width/height,NEAR,FAR);
camera.position.set(posX,posY, posZ);
camera.lookAt(new THREE.Vector3(0,0,0));

// create a basic scene and add the camera
var scene = new THREE.Scene();
scene.add(camera);

//spotlight set up in the same location as the camera
var light = new THREE.DirectionalLight(0xffffff, 1.0, 200 );
light.position.set(posX,posY,posZ);
scene.add(light);

//Add Earth
var earthGeo=new THREE.SphereGeometry(650,60,60);
var earthMat=new THREE.MeshPhongMaterial();
earthMat.map=THREE.ImageUtils.loadTexture("images/world.jpg");
earthMat.bumpMap=THREE.ImageUtils.loadTexture("images/bumpmap.jpg");
earthMat.bumpScale=12;
earthMat.shininess=4
var earthObject = new THREE.Mesh(earthGeo,earthMat);
scene.add(earthObject);

//Add clouds
var cloudGeo=new THREE.SphereGeometry(650,60,60);
    var cloudsMat=new THREE.MeshPhongMaterial({
        opacity: 0.17,
        transparent: true,
        color: 0xffffff
    });
    cloudsMat.map=THREE.ImageUtils.loadTexture("images/clouds.png");
     var meshClouds = new THREE.Mesh( cloudGeo, cloudsMat );
    meshClouds.scale.set(1.015, 1.015, 1.015 );
    scene.add( meshClouds );

render();

function render() {
    var timer = Date.now() * 0.0001;
    camera.position.x=(Math.cos(timer)*1800);
    camera.position.z=(Math.sin(timer)*1800);
    camera.lookAt( scene.position );
    light.position.x = (Math.cos(timer)*1800);
    light.position.z = (Math.sin(timer)*1800) ;
    light.lookAt(scene.position);
    renderer.render(scene,camera);
    requestAnimationFrame(render );
}


  controls = new THREE.OrbitControls(camera);
  controls.addEventListener( 'change', render );

谢谢你的帮助。我也欢迎任何关于这方面的好书或教程的建议。如果有人有经验的话，我很想知道它与d3的集成程度。

---

非常感谢

您必须先包含OrbitControls脚本，然后才能使用它：

---

另外，在继续渲染场景时，您不需要EventListener。

@Bob Haslett如果这解决了您的问题，请将其标记为已回答。