SHARE
TWEET

Untitled

a guest Jul 27th, 2017 323 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3.         <title>Test</title>
  4.         <style>
  5.             body { margin: 0; }
  6.             canvas { width: 100%; height: 100% }
  7.         </style>
  8.     </head>
  9.     <body>
  10.         <script src="three.js"></script>
  11.         <script>
  12.            
  13.             // Global vars...
  14.             var container, camera, scene, renderer, colors;
  15.             var selected = 0;
  16.             var selectedObject;
  17.             var objects = [];
  18.            
  19.             // DOM element...
  20.             container = document.createElement('div');
  21.             document.body.appendChild(container);
  22.            
  23.             // Camera...
  24.             camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  25.             camera.position.set(0, 0, 150);
  26.            
  27.             // Scene...
  28.             scene = new THREE.Scene();
  29.             scene.add(camera);
  30.            
  31.             // Renderer...
  32.             renderer = new THREE.WebGLRenderer({
  33.                 clearAlpha: 1
  34.             });
  35.             renderer.setSize(window.innerWidth, window.innerHeight);
  36.             renderer.setClearColor(0xffffff, 1);
  37.             document.body.appendChild(renderer.domElement);
  38.            
  39.             // Scatter plot...
  40.             scatterPlot = new THREE.Object3D();
  41.             scene.add(scatterPlot);
  42.            
  43.             // Plot some random points...
  44.             circle = new THREE.CircleGeometry(1, 20);
  45.            
  46.            
  47.             colors = [];
  48.             var max = 50;
  49.             var min = -50;
  50.                
  51.             for (var i = 0; i < 10; i++) {         
  52.                            
  53.                 var object = new THREE.Mesh( circle.clone(), new THREE.MeshBasicMaterial( { color: new THREE.Color('black'), opacity: 0.5 } ) );
  54.                 object.position.x = Math.random() * (max - min) + min;
  55.                 object.position.y = Math.random() * (max - min) + min;
  56.                 object.position.z = 0;                 
  57.            
  58.                 scene.add( object );
  59.                 objects.push( object );
  60.            
  61.             }
  62.            
  63.             animate();
  64.            
  65.             function animate() {
  66.                 requestAnimationFrame(animate);
  67.                 renderer.render(scene, camera);
  68.             }
  69.            
  70.             raycaster = new THREE.Raycaster();
  71.             mouse = new THREE.Vector2();
  72.             document.addEventListener( 'mousedown', onDocumentMouseDown, false );
  73.            
  74.             function onDocumentMouseDown( event ) {
  75.                 event.preventDefault();
  76.                 mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
  77.                 mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
  78.                 raycaster.setFromCamera( mouse, camera );
  79.                 var intersects = raycaster.intersectObjects( objects );
  80.                 if ( intersects.length > 0 ) {
  81.                     //intersects[ 0 ].object.material.color.set('red');
  82.                     //intersects[ 0 ].object.geometry.scale(1.1,1.1,1.1);
  83.                     if (selected === 0) {
  84.                         selected = 1;
  85.                         selectedObject = intersects[ 0 ].object;
  86.                         selectedObject.material.color.set('red');
  87.                         console.log(selectedObject.position.x);
  88.                     } else {
  89.                         selected = 0;
  90.                         var geometry = new THREE.Geometry();
  91.                         geometry.vertices.push(intersects[ 0 ].object.position);
  92.                         geometry.vertices.push(selectedObject.position);
  93.                         var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x0000ff }));
  94.                         scene.add(line);
  95.                        
  96.                         selectedObject.material.color.set('black');
  97.                     }
  98.                    
  99.                 }
  100.             }
  101.            
  102.             function onWindowResize() {        
  103.                 camera.left = window.innerWidth / - 2;
  104.                 camera.right = window.innerWidth / 2;
  105.                 camera.top = window.innerHeight / 2;
  106.                 camera.bottom = window.innerHeight / - 2;
  107.                 camera.aspect = window.innerWidth / window.innerHeight;        
  108.    
  109.                 renderer.setSize( window.innerWidth, window.innerHeight );
  110.             }
  111.            
  112.             function onDocumentMouseWheel( event ) {
  113.  
  114.                 var fovMAX = 160;
  115.                 var fovMIN = 1;
  116.  
  117.                 camera.fov -= event.wheelDeltaY * 0.05;
  118.                 camera.fov = Math.max( Math.min( camera.fov, fovMAX ), fovMIN );
  119.                 camera.projectionMatrix = new THREE.Matrix4().makePerspective(camera.fov, window.innerWidth / window.innerHeight, camera.near, camera.far);
  120.  
  121.             }          
  122.         </script>
  123.     </body>
  124. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top