webglFramework/Thirdparty/three.js-master/examples/webgl_lights_pointlights.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>three.js webgl - lights - point lights</title>
   5                 <meta charset="utf-8">
   6                 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   7                 <style>
   8                         body {
   9                                 background-color: #000;
  10                                 margin: 0px;
  11                                 overflow: hidden;
  12                         }
  13
  14                         #info {
  15                                 position: absolute;
  16                                 top: 0px; width: 100%;
  17                                 color: #ffffff;
  18                                 padding: 5px;
  19                                 font-family: Monospace;
  20                                 font-size: 13px;
  21                                 text-align: center;
  22                         }
  23
  24                         a {
  25                                 color: #ff0080;
  26                                 text-decoration: none;
  27                         }
  28
  29                         a:hover {
  30                                 color: #0080ff;
  31                         }
  32                 </style>
  33         </head>
  34         <body>
  35
  36                 <div id="container"></div>
  37                 <div id="info">
  38                         <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - point lights WebGL demo.<br />
  39                         Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a>
  40                 </div>
  41
  42                 <script src="../build/three.js"></script>
  43
  44                 <script src="js/loaders/BinaryLoader.js"></script>
  45
  46                 <script src="js/Detector.js"></script>
  47
  48                 <script>
  49
  50                         if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  51
  52                         var camera, scene, renderer,
  53                         particle1, particle2,
  54                         light1, light2, light3, light4,
  55                         object, loader;
  56
  57                         var clock = new THREE.Clock();
  58
  59                         init();
  60                         animate();
  61
  62                         function init() {
  63
  64                                 var container = document.getElementById( 'container' );
  65
  66                                 camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
  67                                 camera.position.z = 100;
  68
  69                                 scene = new THREE.Scene();
  70
  71                                 loader = new THREE.BinaryLoader();
  72
  73                                 var callback = function( geometry ) {
  74
  75                                         object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0x111111, shininess: 50 }  )  );
  76                                         object.scale.x = object.scale.y = object.scale.z = 0.80;
  77                                         scene.add( object );
  78
  79                                 };
  80
  81                                 loader.load( "obj/walt/WaltHead_bin.js", callback );
  82
  83                                 var sphere = new THREE.SphereGeometry( 0.5, 16, 8 );
  84
  85                                 light1 = new THREE.PointLight( 0xff0040, 2, 50 );
  86                                 light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
  87                                 scene.add( light1 );
  88
  89                                 light2 = new THREE.PointLight( 0x0040ff, 2, 50 );
  90                                 light2.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) ) );
  91                                 scene.add( light2 );
  92
  93                                 light3 = new THREE.PointLight( 0x80ff80, 2, 50 );
  94                                 light3.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) ) );
  95                                 scene.add( light3 );
  96
  97                                 light4 = new THREE.PointLight( 0xffaa00, 2, 50 );
  98                                 light4.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ) );
  99                                 scene.add( light4 );
 100
 101                                 renderer = new THREE.WebGLRenderer();
 102                                 renderer.setPixelRatio( window.devicePixelRatio );
 103                                 renderer.setSize( window.innerWidth, window.innerHeight );
 104                                 container.appendChild( renderer.domElement );
 105
 106                                 //
 107
 108                                 window.addEventListener( 'resize', onWindowResize, false );
 109
 110                         }
 111
 112                         function onWindowResize() {
 113
 114                                 camera.aspect = window.innerWidth / window.innerHeight;
 115                                 camera.updateProjectionMatrix();
 116
 117                                 renderer.setSize( window.innerWidth, window.innerHeight );
 118
 119                         }
 120
 121                         //
 122
 123                         function animate() {
 124
 125                                 requestAnimationFrame( animate );
 126
 127                                 render();
 128
 129                         }
 130
 131                         function render() {
 132
 133                                 var time = Date.now() * 0.0005;
 134                                 var delta = clock.getDelta();
 135
 136                                 if( object ) object.rotation.y -= 0.5 * delta;
 137
 138                                 light1.position.x = Math.sin( time * 0.7 ) * 30;
 139                                 light1.position.y = Math.cos( time * 0.5 ) * 40;
 140                                 light1.position.z = Math.cos( time * 0.3 ) * 30;
 141
 142                                 light2.position.x = Math.cos( time * 0.3 ) * 30;
 143                                 light2.position.y = Math.sin( time * 0.5 ) * 40;
 144                                 light2.position.z = Math.sin( time * 0.7 ) * 30;
 145
 146                                 light3.position.x = Math.sin( time * 0.7 ) * 30;
 147                                 light3.position.y = Math.cos( time * 0.3 ) * 40;
 148                                 light3.position.z = Math.sin( time * 0.5 ) * 30;
 149
 150                                 light4.position.x = Math.sin( time * 0.3 ) * 30;
 151                                 light4.position.y = Math.cos( time * 0.7 ) * 40;
 152                                 light4.position.z = Math.sin( time * 0.5 ) * 30;
 153
 154                                 renderer.render( scene, camera );
 155
 156                         }
 157
 158                 </script>
 159         </body>
 160 </html>