webgl_test_memory.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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. </style>
  15. </head>
  16. <body>
  17. <script src="../build/three.min.js"></script>
  18. <script>
  19. var container;
  20. var camera, scene, renderer;
  21. init();
  22. setInterval( render, 1000 / 60 );
  23. function init() {
  24. container = document.createElement( 'div' );
  25. document.body.appendChild( container );
  26. camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
  27. camera.position.z = 200;
  28. scene = new THREE.Scene();
  29. renderer = new THREE.WebGLRenderer();
  30. renderer.setSize( window.innerWidth, window.innerHeight );
  31. container.appendChild( renderer.domElement );
  32. }
  33. function createImage() {
  34. var canvas = document.createElement( 'canvas' );
  35. canvas.width = 256;
  36. canvas.height = 256;
  37. var context = canvas.getContext( '2d' );
  38. context.fillStyle = 'rgb(' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ')';
  39. context.fillRect( 0, 0, 256, 256 );
  40. return canvas;
  41. }
  42. //
  43. function animate() {
  44. requestAnimationFrame( animate );
  45. render();
  46. }
  47. function render() {
  48. var geometry = new THREE.SphereGeometry( 50, Math.random() * 64, Math.random() * 32 );
  49. var texture = new THREE.Texture( createImage() );
  50. texture.needsUpdate = true;
  51. var material = new THREE.MeshBasicMaterial( { map: texture, wireframe: true } )
  52. var mesh = new THREE.Mesh( geometry, material );
  53. scene.add( mesh );
  54. renderer.render( scene, camera );
  55. scene.remove( mesh );
  56. //
  57. renderer.deallocateObject( mesh );
  58. renderer.deallocateTexture( texture );
  59. }
  60. </script>
  61. </body>
  62. </html>