javascript
/
three.js
peilaus alkaen https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../build/three.min.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
    <script src='js/libs/inflate.min.js'></script>
		<script src="js/loaders/VTKLoader.js"></script>
		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>
    <style>
      body {
        font-family: Monospace;
        background-color: #000000;
        margin: 0px;
        overflow: hidden;
      }

      #info {
        color: #fff;
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        z-index: 100;
        display:block;
      }

      a { color: skyblue }
      .button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer }
      .highlight { background:orange; color:#fff; }

      span {
        display: inline-block;
        width: 60px;
        float: left;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <script>
    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

    var container, stats, camera, cameraTarget, scene, renderer, controls;

    init();
    animate();

    function init() {
      scene = new THREE.Scene();
      scene.fog = new THREE.FogExp2( 0x2d2d2d, 0.002 );

      // renderer
      renderer = new THREE.WebGLRenderer( { antialias: false } );
      renderer.setClearColor( scene.fog.color );
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );

      container = document.createElement( 'div' );
      document.body.appendChild(container);
      container.appendChild( renderer.domElement );

      camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
      camera.position.set( 1, 1, 1 );
      controls = new THREE.OrbitControls( camera, renderer.domElement );
      controls.enableDamping = true;
      controls.dampingFactor = 0.25;
      controls.enableZoom = true;

      // vtk file
      var loader = new THREE.VTKLoader();
      loader.load( 'models/vtk/cube_ascii.vtp', function ( geometry ) {
        //geometry.mergeVertices();
        geometry.computeFaceNormals();
        geometry.computeVertexNormals();
        //geometry.center();

        var material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
        var mesh = new THREE.Mesh( geometry, material );

        mesh.position.set(0,0,0);
        mesh.rotation.set(Math.PI/2,0,0);
        mesh.scale.multiplyScalar( 0.1 );
        mesh.updateMatrix();
        mesh.matrixAutoUpdate = false;

        scene.add( mesh );
      });

      loader.load( 'models/vtk/cube_binary.vtp', function ( geometry1 ) {
        //geometry.mergeVertices();
        geometry1.computeFaceNormals();
        geometry1.computeVertexNormals();
        //geometry.center();

        var material1 = new THREE.MeshLambertMaterial( { color: 0x0000ff } );
        var mesh1 = new THREE.Mesh( geometry1, material1 );

        mesh1.position.set(0.5,0,0);
        mesh1.rotation.set(Math.PI/2,0,0);
        mesh1.scale.multiplyScalar( 0.1 );
        mesh1.updateMatrix();
        mesh1.matrixAutoUpdate = false;

        scene.add( mesh1 );
      });

      loader.load( 'models/vtk/cube_no_compression.vtp', function ( geometry2 ) {
        //geometry.mergeVertices();
        geometry2.computeFaceNormals();
        geometry2.computeVertexNormals();
        //geometry.center();

        var material2 = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
        var mesh2 = new THREE.Mesh( geometry2, material2 );

        mesh2.position.set(-0.5,0,0);
        mesh2.scale.multiplyScalar( 0.1 );
        mesh2.matrixAutoUpdate = true;

        scene.add( mesh2 );
      });

      // Lights
      light = new THREE.DirectionalLight( 0xffffff );
      light.position.set( 5, 5, 5 );
      scene.add( light );

      light = new THREE.DirectionalLight( 0xffffff );
      light.position.set( -5, -5, -5 );
      scene.add( light );

      light = new THREE.AmbientLight( 0x222222 );
      scene.add( light );

      // stats
      stats = new Stats();
      stats.domElement.style.position = 'absolute';
      stats.domElement.style.top = '0px';
      stats.domElement.style.zIndex = 100;
      container.appendChild( stats.domElement );

      // resize
      window.addEventListener( 'resize', onWindowResize, false );
    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {
      requestAnimationFrame( animate );
      stats.update();
      controls.update();
      render();
    }

    function render() {
      renderer.render( scene, camera );
    }

    </script>
  </body>
</html>