three.js. cube demo

mrdoob

2010-06-20 02:22:37

License: MIT License

Fork: 0

Fav: 1

View: 734

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 146 lines
HTML 2 lines
CSS 6 lines

three.js. cube demo
three.js (lib)
stats.js (lib)

init();
setInterval(loop, 1000/60);

function init() {
  
  container = document.createElement('div');
  document.body.appendChild(container);
  
  var info = document.createElement('div');
  info.style.position = 'absolute';
  info.style.top = '10px';
  info.style.width = '100%';
  info.style.textAlign = 'center';
  info.innerHTML = 'Drag to spin the cube';
  container.appendChild(info);
  
  camera = new THREE.Camera(0, 150, 400);
  camera.focus = 300;
  camera.target.position.y = 150;
  camera.updateMatrix();
  
  scene = new THREE.Scene();
  
  // Cube
  
  geometry = new Cube(200, 200, 200);
  
  for (var i = 0; i < geometry.faces.length; i++) {
    
    geometry.faces[i].color.setRGBA( Math.floor( Math.random() * 128), Math.floor( Math.random() * 128 + 128), Math.floor( Math.random() * 128 + 128), 255 );
  }
  
  cube = new THREE.Mesh(geometry, new THREE.FaceColorFillMaterial());
  cube.position.y = 150;
  scene.add(cube);
  
  // Plane
  
  plane = new THREE.Mesh(new Plane(200, 200), new THREE.ColorFillMaterial(0xe0e0e0));
  plane.rotation.x = -90 * (Math.PI / 180);
  scene.add(plane);
  
  renderer = new THREE.CanvasRenderer();
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  
  container.appendChild(renderer.domElement);
  
  stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.top = '0px';
  container.appendChild(stats.domElement);
  
  document.addEventListener('mousedown', onDocumentMouseDown, false);
  document.addEventListener('touchstart', onDocumentTouchStart, false);
  document.addEventListener('touchmove', onDocumentTouchMove, false);
}

function onDocumentMouseDown( event ) {
  
  event.preventDefault();
  
  document.addEventListener('mousemove', onDocumentMouseMove, false);
  document.addEventListener('mouseup', onDocumentMouseUp, false);
  document.addEventListener('mouseout', onDocumentMouseOut, false);
  
  mouseXOnMouseDown = event.clientX - windowHalfX;
  targetRotationOnMouseDown = targetRotation;
}

function onDocumentMouseMove( event ) {
  
  mouseX = event.clientX - windowHalfX;
  
  targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
}

function onDocumentMouseUp( event ) {
  
  document.removeEventListener('mousemove', onDocumentMouseMove, false);
  document.removeEventListener('mouseup', onDocumentMouseUp, false);
  document.removeEventListener('mouseout', onDocumentMouseOut, false);
}

function onDocumentMouseOut( event ) {
  
  document.removeEventListener('mousemove', onDocumentMouseMove, false);
  document.removeEventListener('mouseup', onDocumentMouseUp, false);
  document.removeEventListener('mouseout', onDocumentMouseOut, false);
}

function onDocumentTouchStart( event ) {
  
  if(event.touches.length == 1) {
    
    event.preventDefault();
    
    mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
    targetRotationOnMouseDown = targetRotation;
    
  }
}

function onDocumentTouchMove( event ) {
  
  if(event.touches.length == 1) {
    
    event.preventDefault();
    
    mouseX = event.touches[0].pageX - windowHalfX;
    targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
    
  }
}

function loop() {
  
  plane.rotation.z = cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
  
  renderer.render(scene, camera);
  stats.update();
}

three.js. cube demo

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/pBPQ/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/mrdoob/pBPQ" title="three.js. cube demo">three.js. cube demo - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

Favorite by

siouxcitizen..

three.js. cube demo

tags

Tweet

twitter

Favorite by