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

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>three.js - webgl</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                                 overflow:hidden;
  13                         }
  14
  15                 </style>
  16         </head>
  17
  18         <body>
  19
  20                 <script src="../build/three.js"></script>
  21
  22                 <script>
  23
  24                         var container;
  25
  26                         var camera, scene, renderer;
  27
  28                         init();
  29                         animate();
  30
  31                         function init() {
  32
  33                                 container = document.createElement( 'div' );
  34                                 document.body.appendChild( container );
  35
  36                                 camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
  37                                 camera.position.z = 200;
  38
  39                                 scene = new THREE.Scene();
  40                                 scene.background = new THREE.Color( 0xffffff );
  41
  42                                 renderer = new THREE.WebGLRenderer();
  43                                 renderer.setPixelRatio( window.devicePixelRatio );
  44                                 renderer.setSize( window.innerWidth, window.innerHeight );
  45                                 container.appendChild( renderer.domElement );
  46
  47                         }
  48
  49                         function createImage() {
  50
  51                                 var canvas = document.createElement( 'canvas' );
  52                                 canvas.width = 256;
  53                                 canvas.height = 256;
  54
  55                                 var context = canvas.getContext( '2d' );
  56                                 context.fillStyle = 'rgb(' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ')';
  57                                 context.fillRect( 0, 0, 256, 256 );
  58
  59                                 return canvas;
  60
  61                         }
  62
  63                         //
  64
  65                         function animate() {
  66
  67                                 requestAnimationFrame( animate );
  68
  69                                 render();
  70
  71                         }
  72
  73                         function render() {
  74
  75                                 var geometry = new THREE.SphereBufferGeometry( 50, Math.random() * 64, Math.random() * 32 );
  76
  77                                 var texture = new THREE.CanvasTexture( createImage() );
  78
  79                                 var material = new THREE.MeshBasicMaterial( { map: texture, wireframe: true } );
  80
  81                                 var mesh = new THREE.Mesh( geometry, material );
  82
  83                                 scene.add( mesh );
  84
  85                                 renderer.render( scene, camera );
  86
  87                                 scene.remove( mesh );
  88
  89                                 // clean up
  90
  91                                 geometry.dispose();
  92                                 material.dispose();
  93                                 texture.dispose();
  94
  95                         }
  96
  97                 </script>
  98
  99         </body>
 100 </html>