javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!doctype html>
<html lang="en">
  <head>
    <title>three.js webgl - geometry - extrusion materials</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
      body {
        font-family: Monospace;
        background-color: #f0f0f0;
        margin: 0px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="debug" style="position:absolute; left:100px"></canvas>

    <script src="../build/Three.js"></script>
    <script src="js/Stats.js"></script>

    <script>

      var container, stats;

      var camera, scene, renderer;

      var text, plane;

      var targetRotation = 0;
      var targetRotationOnMouseDown = 0;

      var mouseX = 0;
      var mouseXOnMouseDown = 0;

      var windowHalfX = window.innerWidth / 2;
      var windowHalfY = window.innerHeight / 2;

      init();
      animate();

      function loadTexture( path ) {

        var image = new Image();
        image.onload = function () { texture.needsUpdate = true; };
        image.src = path;

        var texture  = new THREE.Texture( image, new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.LinearMipMapLinearFilter );

        return new THREE.MeshPhongMaterial( { map: texture, color: 0x00aaff, shininess: 100 } );

      }

      function init() {

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

        var texturedMaterial = loadTexture( 'textures/water.jpg' );

        var info = document.createElement( 'div' );
        info.style.position = 'absolute';
        info.style.top = '10px';
        info.style.width = '100%';
        info.style.textAlign = 'center';
        info.innerHTML = 'Procedurally generated 3D shapes with different materials on extrusions<br/>Drag to spin';
        container.appendChild( info );

        camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.set( 0, 0, 300 );

        scene = new THREE.Scene();
        scene.add( camera );

		var light = new THREE.PointLight( 0xffffff );
		light.position.set( 0, 0, 100 );
		scene.add( light );

        parent = new THREE.Object3D();
        parent.position.y = 0;
        scene.add( parent );

        var extrudeSettings = { amount: 10, bevelEnabled: true, bevelSegments: 3, steps: 4, bevelThickness: 8, material: 0, extrudeMaterial: 1 };

        var colorMaterials = [ new THREE.MeshPhongMaterial( { color: 0xff5500, shininess: 100 } ), new THREE.MeshPhongMaterial( { color: 0xff0000, shininess: 100 } ) ];
        var imageAndColorMaterials = [ texturedMaterial, new THREE.MeshPhongMaterial( { color: 0x00aaff, shininess: 100 } ) ];

        var pillShape1 = new THREE.Shape();
        pillShape1.moveTo(  30, 80 );
        pillShape1.lineTo(  100, 80 );
        pillShape1.quadraticCurveTo( 130, 90, 100, 100 );
        pillShape1.lineTo( 30, 100 );
        pillShape1.quadraticCurveTo( 0, 90, 30, 80 );

        var pillGeometry1 = pillShape1.extrude( extrudeSettings );
        pillGeometry1.materials = colorMaterials;
		pillGeometry1.computeVertexNormals();

		THREE.GeometryUtils.center( pillGeometry1 );

        var pillMesh1 = new THREE.Mesh( pillGeometry1, new THREE.MeshFaceMaterial() );
		pillMesh1.position.y = -25;
		pillMesh1.scale.x = 0.5;

        parent.add ( pillMesh1 );

        var pillShape2 = new THREE.Shape();
        pillShape2.moveTo(  30, 80 );
        pillShape2.lineTo(  100, 80 );
        pillShape2.quadraticCurveTo( 130, 90, 100, 100 );
        pillShape2.lineTo( 30, 100 );
        pillShape2.quadraticCurveTo( 0, 90, 30, 80 );

        var pillGeometry2 = pillShape2.extrude( extrudeSettings );
        pillGeometry2.materials = imageAndColorMaterials;
		pillGeometry2.computeVertexNormals();

		THREE.GeometryUtils.center( pillGeometry2 );

        var pillMesh2 = new THREE.Mesh( pillGeometry2, new THREE.MeshFaceMaterial() );
		pillMesh2.position.y = 25;
		pillMesh2.scale.x = 0.5;

        parent.add ( pillMesh2 );


        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setSize( window.innerWidth, window.innerHeight );

        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 animate() {

        requestAnimationFrame( animate );

        render();
        stats.update();

      }

      function render() {

        parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
        renderer.render( scene, camera );

      }

    </script>

  </body>
</html>