Question

jsfiddle：http://jsfiddle.net/VsWb9/2151/

阅读了几篇文章之后，我感到很茫然。

Rotate camera around object with Three.js

以下是与地板一起旋转的立方体的简单代码。这应该是一个简单的例子。

我正在尝试添加相机以便点击并拖动它在场景周围旋转。与此http://threejs.org/examples/#misc_controls_trackball

类似

对于任何有相同问题的人，请告诉我以下要点：

在这里下载three.js：

http://threejs.org/

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

https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js

复制并将其放入您的站点文件夹。

然后你需要链接到轨道控制和你的HTML中的three.js。如下所示：

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

然后在下面看一个带底板的简单线框立方体。

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();

Three.js添加旋转相机

0 个答案: