OffscreenCanvas.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. self.importScripts( '../../../build/three.js' );
  2. self.onmessage = function ( message ) {
  3. var data = message.data;
  4. init( data.drawingSurface, data.width, data.height, data.pixelRatio );
  5. };
  6. var camera, scene, renderer, mesh, clock;
  7. function init( offscreen, width, height, pixelRatio ) {
  8. camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
  9. camera.position.z = 400;
  10. scene = new THREE.Scene();
  11. clock = new THREE.Clock();
  12. // we don't use ImageLoader since it has a DOM dependency (HTML5 image element)
  13. var loader = new THREE.ImageBitmapLoader();
  14. loader.load( '../../textures/crate.gif', function ( imageBitmap ) {
  15. var texture = new THREE.CanvasTexture( imageBitmap );
  16. var material = new THREE.MeshBasicMaterial( { map: texture } );
  17. var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
  18. mesh = new THREE.Mesh( geometry, material );
  19. scene.add( mesh );
  20. animate();
  21. } );
  22. //
  23. renderer = new THREE.WebGLRenderer( { antialias: true, canvas: offscreen } );
  24. renderer.setPixelRatio( pixelRatio );
  25. renderer.setSize( width, height, false );
  26. }
  27. function animate() {
  28. var delta = clock.getDelta();
  29. mesh.rotation.x += delta * 0.2;
  30. mesh.rotation.y += delta * 0.5;
  31. renderer.render( scene, camera );
  32. renderer.context.commit().then( animate );
  33. }