Javascript Three.js添加旋转摄影机

jsfiddle：

读了几篇文章后，我不知所措

下面是立方体随地板旋转的简单代码。希望这是一个简单的例子

我试图添加一个相机，所以点击并拖动它绕场景旋转。与此类似

对于有相同问题的人，让我们来谈谈我下面的观点：

在此处下载three.js：

你需要在你的js文件夹中有一些叫做轨道控制的东西。您可以在此处找到要下载的orbitcontrols链接：

复制此文件并将其放入站点文件夹中

然后，您需要链接到orbit控件，并在html中添加三个.js。如下图所示：

<script src="js/OrbitControls.js"></script>
<script src="js/three.min.js"></script>

---

你可以创建一个帮助我们一点的。试着省去renderer.doElement参数，也许吧？运行代码时会发生什么，有什么错误吗？从three.js站点获取OrbitControls和three.js库。确保它们都来自同一个版本。js fiddle补充道，地板似乎没有渲染。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 1000);

var axisHelper = new THREE.AxisHelper( 5 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//This breaks it?
//controls = new THREE.OrbitControls( camera, renderer.domElement );

var geometry = new THREE.CubeGeometry(2,1,1);
var material = new THREE.MeshBasicMaterial({wireframe: true});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);


var floorMaterial = new THREE.MeshBasicMaterial( {wireframe: true} );
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -50.0;
floor.rotation.x = Math.PI / 2;

scene.add(floor);

camera.position.z = 3;

var render = function () {
    requestAnimationFrame(render);

    cube.rotation.z += 0.005;
    cube.rotation.x += 0.005;

    renderer.render(scene, camera);
};

render();