test: add canvas texture case

deepkolos · Feb 28, 2021 · 34e260e · 34e260e
1 parent 61985ec
commit 34e260e
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 46,886 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 node_modules
 three
 tests/WaterBottle-*.glb
-tests/*.bundle.js
+tests/**/*.bundle.js
diff --git a/config/rollup.config.tests.js b/config/rollup.config.tests.js
@@ -6,4 +6,11 @@ export default [
       file: `tests/memory/memory.bundle.js`,
     },
   },
+  {
+    input: `tests/texture/index.js`,
+    output: {
+      format: 'esm',
+      file: `tests/texture/index.bundle.js`,
+    },
+  },
 ];
diff --git a/tests/canvas-texture/index.html b/tests/canvas-texture/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      * {
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <h3>测试 canvasTexture耗时</h3>
+    <script src="./index.bundle.js"></script>
+  </body>
+</html>
diff --git a/tests/canvas-texture/index.js b/tests/canvas-texture/index.js
@@ -0,0 +1,48 @@
+import * as THREE from '../../build/three.module';
+import { BrowserPlatform } from '../../src/BrowserPlatform/index';
+
+THREE.PLATFORM.set(new BrowserPlatform());
+
+const renderer = new THREE.WebGL1Renderer({ alpha: true });
+const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
+const scene = new THREE.Scene();
+// const canvas = document.createElement('canvas');
+// const ctx = canvas.getContext('2d');
+// const canvasTexture = new THREE.CanvasTexture(canvas);
+
+// const geometry = new THREE.BoxGeometry(1, 1, 1);
+// const material = new THREE.MeshBasicMaterial({ map: canvasTexture });
+// const box = new THREE.Mesh(geometry, material);
+
+for (let i = 0; i < 100; i++) {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  const canvasTexture = new THREE.CanvasTexture(canvas);
+
+  const geometry = new THREE.BoxGeometry();
+  const material = new THREE.MeshBasicMaterial({ map: canvasTexture });
+  const box = new THREE.Mesh(geometry, material);
+
+  canvas.width = 2 ** 10;
+  canvas.height = 2 ** 10;
+  ctx.fillStyle = `rgb(${~~(Math.random() * 255)},${~~(Math.random() * 255)},${~~(Math.random() * 255)})`;
+  ctx.fillRect(0, 0, 2 ** 9, 2 ** 9);
+
+  box.position.set(Math.random(), Math.random(), -Math.random());
+
+  scene.add(box);
+}
+
+const render = () => {
+  requestAnimationFrame(render);
+  renderer.render(scene, camera);
+};
+
+document.body.appendChild(renderer.domElement);
+
+renderer.setSize(innerWidth, innerHeight);
+renderer.setPixelRatio(devicePixelRatio);
+
+camera.position.z = 1;
+
+render();