Cube with TrackballControls / Three.js
Demonstration the behavior similar to Rodrigues' rotation formula.
CSS
body {
background:#CCC;
padding:0;
margin:0;
overflow:hidden;
}
JavaScript
var container
var camera, scene, renderer;
var bgScene;
var bg;
var bgCam;
var controls;
init();
animate();
function init() {
//var group=THREE.Group();
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.x = -500;
camera.position.y = 500;
camera.position.z = 500;
camera.rotation.x = -Math.Pi/5;
camera.rotation.y = -Math.Pi/5;
camera.rotation.z = 0;
scene.add( camera );
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 0.2;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.05;
controls.keys = [ 65, 83, 68 ];
window.addEventListener( 'resize', onWindowResize, false );
bgScene = new THREE.Scene();
bgCam = new THREE.Camera();
bgScene.add(bgCam);
var geometry = new THREE.CubeGeometry( 400, 400, 400 );
var material = new THREE.MeshBasicMaterial( { color: 0xF03030, wireframeLinewidth:4, wireframe: true} );
var cube = new THREE.Mesh( geometry, material );
scene.add(cube);
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
render();
}
function render() {
renderer.autoClear = false;
renderer.clear();
renderer.render(bgScene, bgCam);
renderer.render( scene, camera );
}
function onWindowResize( event ) {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = SCREEN_WIDTH /...