Advertisement
Guest User

Codepin

a guest
Sep 19th, 2017
202
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script src="js/three.min.js"></script>
  2. <script src="js/Projector.js"></script>
  3. <script src="js/CanvasRenderer.js"></script>
  4.  
  5.         <script>
  6.             var SCREEN_WIDTH = window.innerWidth,
  7.             SCREEN_HEIGHT = window.innerHeight,
  8.             mouseX = 0, mouseY = 0,
  9.             windowHalfX = window.innerWidth / 2,
  10.             windowHalfY = window.innerHeight / 2,
  11.             camera, scene, renderer;
  12.             init();
  13.             animate();
  14.             function init() {
  15.                 container = document.createElement('div');
  16.                 document.body.appendChild(container);
  17.                 camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
  18.                 camera.position.z = 1000;
  19.                 scene = new THREE.Scene();
  20.                 renderer = new THREE.CanvasRenderer();
  21.                 renderer.setPixelRatio( window.devicePixelRatio );
  22.                 renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  23.                 container.appendChild( renderer.domElement );
  24.                 var loader = new THREE.JSONLoader();
  25.                 loader.load( 'js/Neuron.json', );
  26.                 document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  27.                 document.addEventListener( 'touchstart', onDocumentTouchStart, false );
  28.                 document.addEventListener( 'touchmove', onDocumentTouchMove, false );
  29.                 //
  30.                 window.addEventListener( 'resize', onWindowResize, false );
  31.             }
  32.             function onWindowResize() {
  33.                 windowHalfX = window.innerWidth / 2;
  34.                 windowHalfY = window.innerHeight / 2;
  35.                 camera.aspect = window.innerWidth / window.innerHeight;
  36.                 camera.updateProjectionMatrix();
  37.                 renderer.setSize( window.innerWidth, window.innerHeight );
  38.             }
  39.             //
  40.             function onDocumentMouseMove(event) {
  41.                 mouseX = event.clientX - windowHalfX;
  42.                 mouseY = event.clientY - windowHalfY;
  43.          }
  44.             function onDocumentTouchStart( event ) {
  45.                 if ( event.touches.length > 1 ) {
  46.                     event.preventDefault();
  47.                     mouseX = event.touches[ 0 ].pageX - windowHalfX;
  48.                     mouseY = event.touches[ 0 ].pageY - windowHalfY;
  49.                 }
  50.             }
  51.             function onDocumentTouchMove( event ) {
  52.                 if ( event.touches.length == 1 ) {
  53.                     event.preventDefault();
  54.                     mouseX = event.touches[ 0 ].pageX - windowHalfX;
  55.                     mouseY = event.touches[ 0 ].pageY - windowHalfY;
  56.                 }
  57.             }
  58.             //
  59.             function animate() {
  60.                 requestAnimationFrame( animate );
  61.                 render();
  62.             }
  63.             function render() {
  64.                 camera.position.x += ( mouseX - camera.position.x ) * .05;
  65.                 camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
  66.                 camera.lookAt( scene.position );
  67.                 renderer.render( scene, camera );
  68.             }
  69.     </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement