three.js ~ example ~ Mr.doob

2012-01-05 ~

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

JavaScript

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

  scene = new THREE.Scene();

  var WIDTH = 800;
  var HEIGHT = 600;
  var BLOCK_WIDTH = 40;

  camera = new THREE.OrthographicCamera(0, WIDTH, 0, HEIGHT, -10, 1000);
  camera.position.set(0, 0, 100);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  scene.add(camera);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(WIDTH, HEIGHT);

  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.CubeGeometry(BLOCK_WIDTH, BLOCK_WIDTH, 4);

  var cube2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    color: 0xFF0000
  }));
  cube2.position.set(20 + BLOCK_WIDTH, 20 + BLOCK_WIDTH, 0);
  scene.add(cube2);

  // when the mouse moves, call the given function
  document.addEventListener('mousedown', onDocumentMouseDown, false);
   window.addEventListener( 'resize', onWindowResize, false );
}

function onDocumentMouseDown(event) {

  console.log("Click");

  var mouse = new THREE.Vector2();
 mouse.x = ( (event.clientX -renderer.domElement.offsetLeft) / renderer.domElement.width ) * 2 - 1;
    mouse.y = -( (event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height ) * 2 + 1;

 //mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  //mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  var raycaster = new THREE.Raycaster();
  // update the picking ray with the camera and mouse position	
  raycaster.setFromCamera(mouse, camera);

  // calculate objects intersecting the picking ray
  var intersects = raycaster.intersectObjects(scene.children);

  console.log("intersects: " + intersects.length);
  for (var i = 0; i < intersects.length; i++) {
    console.log(intersects[i].point);
  }

}

function animate() {

  requestAnimationFrame(animate);
  render();

}

function render() {

  renderer.render(scene, camera);

}
function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
       ...