ソースを参照

Examples: Move webgl_worker_offscreencanvas to modules.

Mugen87 5 年 前
コミット
c1e764a829

+ 0 - 38
examples/js/offscreen/jank.js

@@ -1,38 +0,0 @@
-var interval = null;
-
-var button = document.getElementById( 'button' );
-button.addEventListener( 'click', function () {
-
-	if ( interval === null ) {
-
-		interval = setInterval( jank, 1000 / 60 );
-
-		button.textContent = 'STOP JANK';
-
-	} else {
-
-		clearInterval( interval );
-		interval = null;
-
-		button.textContent = 'START JANK';
-		result.textContent = '';
-
-	}
-
-} );
-
-var result = document.getElementById( 'result' );
-
-function jank() {
-
-	var number = 0;
-
-	for ( var i = 0; i < 10000000; i ++ ) {
-
-		number += Math.random();
-
-	}
-
-	result.textContent = number;
-
-}

+ 45 - 0
examples/jsm/offscreen/jank.js

@@ -0,0 +1,45 @@
+var interval = null;
+var result = null;
+
+function initJank() {
+
+	var button = document.getElementById( 'button' );
+	button.addEventListener( 'click', function () {
+
+		if ( interval === null ) {
+
+			interval = setInterval( jank, 1000 / 60 );
+
+			button.textContent = 'STOP JANK';
+
+		} else {
+
+			clearInterval( interval );
+			interval = null;
+
+			button.textContent = 'START JANK';
+			result.textContent = '';
+
+		}
+
+	} );
+
+	result = document.getElementById( 'result' );
+
+}
+
+function jank() {
+
+	var number = 0;
+
+	for ( var i = 0; i < 10000000; i ++ ) {
+
+		number += Math.random();
+
+	}
+
+	result.textContent = number;
+
+}
+
+export default initJank;

+ 1 - 2
examples/js/offscreen/offscreen.js → examples/jsm/offscreen/offscreen.js

@@ -1,5 +1,4 @@
-self.importScripts( '../../../build/three.js' );
-self.importScripts( './scene.js' );
+import init from './scene.js';
 
 
 self.onmessage = function ( message ) {
 self.onmessage = function ( message ) {
 
 

+ 4 - 0
examples/js/offscreen/scene.js → examples/jsm/offscreen/scene.js

@@ -1,3 +1,5 @@
+import * as THREE from '../../../build/three.module.js';
+
 var camera, scene, renderer, group;
 var camera, scene, renderer, group;
 
 
 function init( canvas, width, height, pixelRatio, path ) {
 function init( canvas, width, height, pixelRatio, path ) {
@@ -80,3 +82,5 @@ function random() {
 	return x - Math.floor( x );
 	return x - Math.floor( x );
 
 
 }
 }
+
+export default init;

+ 10 - 6
examples/webgl_worker_offscreencanvas.html

@@ -41,7 +41,7 @@
 				width: 100%;
 				width: 100%;
 				text-align: center;
 				text-align: center;
 			}
 			}
-			
+
 			#button {
 			#button {
 				border: 0;
 				border: 0;
 				padding: 4px 6px;
 				padding: 4px 6px;
@@ -64,25 +64,29 @@
 			<span id="result"></span>
 			<span id="result"></span>
 		</div>
 		</div>
 
 
-		<script src="../build/three.js"></script>
-		<script src="js/offscreen/scene.js"></script>
-		<script src="js/offscreen/jank.js"></script>
-		<script>
+		<script type="module">
+
+			import initJank from './jsm/offscreen/jank.js';
+			import init from './jsm/offscreen/scene.js';
 
 
 			// onscreen
 			// onscreen
 
 
+			var canvas1 = document.getElementById( 'canvas1' );
+			var canvas2 = document.getElementById( 'canvas2' );
+
 			var width = canvas1.clientWidth;
 			var width = canvas1.clientWidth;
 			var height = canvas1.clientHeight;
 			var height = canvas1.clientHeight;
 			var pixelRatio = window.devicePixelRatio;
 			var pixelRatio = window.devicePixelRatio;
 
 
 			init( canvas1, width, height, pixelRatio, './' );
 			init( canvas1, width, height, pixelRatio, './' );
+			initJank();
 
 
 			// offscreen
 			// offscreen
 
 
 			if ( 'transferControlToOffscreen' in canvas2 ) {
 			if ( 'transferControlToOffscreen' in canvas2 ) {
 
 
 				var offscreen = canvas2.transferControlToOffscreen();
 				var offscreen = canvas2.transferControlToOffscreen();
-				var worker = new Worker( 'js/offscreen/offscreen.js' );
+				var worker = new Worker( 'jsm/offscreen/offscreen.js', { type: 'module' } );
 				worker.postMessage( {
 				worker.postMessage( {
 					drawingSurface: offscreen,
 					drawingSurface: offscreen,
 					width: canvas2.clientWidth,
 					width: canvas2.clientWidth,