0

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

After a reading a few articles i am at a loss.

Rotate camera around object with Three.js

Below is simple code for a cube rotating with a floor. This should hopefully be a simple example to follow.

I am trying to add a camera so on click and drag it rotates around the scene. Similar to this http://threejs.org/examples/#misc_controls_trackball

For anyone with the same quesiton lets get you to my point below:

Download three.js here:

http://threejs.org/

You need to have something call orbit controls in your js folder. You will find a link to orbitcontrols to download here:

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

Copy this and put it in your site folder.

You then need to link to orbit control and three.js it in your html. Like the below:

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

Then see below for a simple wireframe cube with a floor.

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();
3
  • 1
    You could create a jsFiddle to help us a little. Try leaving out the renderer.domElement argument maybe? What exactly does happen when you run the code, any errors? Commented May 6, 2014 at 22:22
  • Get the OrbitControls, and the three.js library from the three.js site. Make sure they are all from the same release. Commented May 6, 2014 at 22:24
  • js fiddle added, the floor doesn't seem to be rendering. Commented May 11, 2014 at 17:37

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.