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

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>three.js webgl - geometry hierarchy 2</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:#fff;
  10                                 padding:0;
  11                                 margin:0;
  12                                 font-weight: bold;
  13                                 overflow:hidden;
  14                         }
  15                 </style>
  16         </head>
  17         <body>
  18
  19                 <script src="../build/three.js"></script>
  20                 <script src="js/libs/stats.min.js"></script>
  21
  22                 <script>
  23
  24                         var container, stats;
  25
  26                         var camera, scene, renderer;
  27
  28                         var geometry, root;
  29
  30                         var mouseX = 0, mouseY = 0;
  31
  32                         var windowHalfX = window.innerWidth / 2;
  33                         var windowHalfY = window.innerHeight / 2;
  34
  35                         document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  36
  37                         init();
  38                         animate();
  39
  40                         function init() {
  41
  42                                 container = document.createElement( 'div' );
  43                                 document.body.appendChild( container );
  44
  45                                 camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 15000 );
  46                                 camera.position.z = 500;
  47
  48                                 scene = new THREE.Scene();
  49                                 scene.background = new THREE.Color( 0xffffff );
  50
  51                                 var geometry = new THREE.BoxGeometry( 100, 100, 100 );
  52                                 var material = new THREE.MeshNormalMaterial();
  53
  54                                 root = new THREE.Mesh( geometry, material );
  55                                 root.position.x = 1000;
  56                                 scene.add( root );
  57
  58                                 var amount = 200, object, parent = root;
  59
  60                                 for ( var i = 0; i < amount; i ++ ) {
  61
  62                                         object = new THREE.Mesh( geometry, material );
  63                                         object.position.x = 100;
  64
  65                                         parent.add( object );
  66                                         parent = object;
  67
  68                                 }
  69
  70                                 parent = root;
  71
  72                                 for ( var i = 0; i < amount; i ++ ) {
  73
  74                                         object = new THREE.Mesh( geometry, material );
  75                                         object.position.x = - 100;
  76
  77                                         parent.add( object );
  78                                         parent = object;
  79
  80                                 }
  81
  82                                 parent = root;
  83
  84                                 for ( var i = 0; i < amount; i ++ ) {
  85
  86                                         object = new THREE.Mesh( geometry, material );
  87                                         object.position.y = - 100;
  88
  89                                         parent.add( object );
  90                                         parent = object;
  91
  92                                 }
  93
  94                                 parent = root;
  95
  96                                 for ( var i = 0; i < amount; i ++ ) {
  97
  98                                         object = new THREE.Mesh( geometry, material );
  99                                         object.position.y = 100;
 100
 101                                         parent.add( object );
 102                                         parent = object;
 103
 104                                 }
 105
 106                                 parent = root;
 107
 108                                 for ( var i = 0; i < amount; i ++ ) {
 109
 110                                         object = new THREE.Mesh( geometry, material );
 111                                         object.position.z = - 100;
 112
 113                                         parent.add( object );
 114                                         parent = object;
 115
 116                                 }
 117
 118                                 parent = root;
 119
 120                                 for ( var i = 0; i < amount; i ++ ) {
 121
 122                                         object = new THREE.Mesh( geometry, material );
 123                                         object.position.z = 100;
 124
 125                                         parent.add( object );
 126                                         parent = object;
 127
 128                                 }
 129
 130                                 renderer = new THREE.WebGLRenderer();
 131                                 renderer.setPixelRatio( window.devicePixelRatio );
 132                                 renderer.setSize( window.innerWidth, window.innerHeight );
 133                                 container.appendChild( renderer.domElement );
 134
 135                                 stats = new Stats();
 136                                 container.appendChild( stats.dom );
 137
 138                                 //
 139
 140                                 window.addEventListener( 'resize', onWindowResize, false );
 141
 142                         }
 143
 144                         function onWindowResize() {
 145
 146                                 windowHalfX = window.innerWidth / 2;
 147                                 windowHalfY = window.innerHeight / 2;
 148
 149                                 camera.aspect = window.innerWidth / window.innerHeight;
 150                                 camera.updateProjectionMatrix();
 151
 152                                 renderer.setSize( window.innerWidth, window.innerHeight );
 153
 154                         }
 155
 156                         function onDocumentMouseMove(event) {
 157
 158                                 mouseX = ( event.clientX - windowHalfX ) * 10;
 159                                 mouseY = ( event.clientY - windowHalfY ) * 10;
 160
 161                         }
 162
 163                         //
 164
 165                         function animate() {
 166
 167                                 requestAnimationFrame( animate );
 168
 169                                 render();
 170                                 stats.update();
 171
 172                         }
 173
 174                         function render() {
 175
 176                                 var time = Date.now() * 0.001;
 177
 178                                 var rx = Math.sin( time * 0.7 ) * 0.2;
 179                                 var ry = Math.sin( time * 0.3 ) * 0.1;
 180                                 var rz = Math.sin( time * 0.2 ) * 0.1;
 181
 182                                 camera.position.x += ( mouseX - camera.position.x ) * .05;
 183                                 camera.position.y += ( - mouseY - camera.position.y ) * .05;
 184
 185                                 camera.lookAt( scene.position );
 186
 187                                 root.traverse( function ( object ) {
 188
 189                                         object.rotation.x = rx;
 190                                         object.rotation.y = ry;
 191                                         object.rotation.z = rz;
 192
 193                                 } );
 194
 195                                 renderer.render( scene, camera );
 196
 197                         }
 198
 199                 </script>
 200
 201         </body>
 202 </html>