2023年3月1日

LeroyK111 · Mar 1, 2023 · fdb1c16 · fdb1c16
1 parent 98a30a0
commit fdb1c16
Show file tree

Hide file tree

Showing 947 changed files with 491,461 additions and 4 deletions.
diff --git a/3D/1起步.html b/3D/1起步.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>My first three.js app</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+    // 这里就是引用webgl
+    class WebGL {
+      static isWebGLAvailable() {
+        try {
+          const canvas = document.createElement("canvas");
+          return !!(
+            window.WebGLRenderingContext &&
+            (canvas.getContext("webgl") ||
+              canvas.getContext("experimental-webgl"))
+          );
+        } catch (e) {
+          return false;
+        }
+      }
+
+      static isWebGL2Available() {
+        try {
+          const canvas = document.createElement("canvas");
+          return !!(
+            window.WebGL2RenderingContext && canvas.getContext("webgl2")
+          );
+        } catch (e) {
+          return false;
+        }
+      }
+
+      static getWebGLErrorMessage() {
+        return this.getErrorMessage(1);
+      }
+
+      static getWebGL2ErrorMessage() {
+        return this.getErrorMessage(2);
+      }
+
+      static getErrorMessage(version) {
+        const names = {
+          1: "WebGL",
+          2: "WebGL 2",
+        };
+
+        const contexts = {
+          1: window.WebGLRenderingContext,
+          2: window.WebGL2RenderingContext,
+        };
+
+        let message =
+          'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>';
+
+        const element = document.createElement("div");
+        element.id = "webglmessage";
+        element.style.fontFamily = "monospace";
+        element.style.fontSize = "13px";
+        element.style.fontWeight = "normal";
+        element.style.textAlign = "center";
+        element.style.background = "#fff";
+        element.style.color = "#000";
+        element.style.padding = "1.5em";
+        element.style.width = "400px";
+        element.style.margin = "5em auto 0";
+
+        if (contexts[version]) {
+          message = message.replace("$0", "graphics card");
+        } else {
+          message = message.replace("$0", "browser");
+        }
+
+        message = message.replace("$1", names[version]);
+
+        element.innerHTML = message;
+
+        return element;
+      }
+    }
+  </script>
+
+  <script async type="module" crossorigin="anonymous">
+    import * as THREE from "/webGpu/3D/node_modules/three/src/Three.js";
+
+    // 场景
+    const scene = new THREE.Scene();
+    // three.js里有几种不同的相机，在这里，我们使用的是PerspectiveCamera（透视摄像机）。
+    const camera = new THREE.PerspectiveCamera(
+      // 视野角度（FOV）
+      75,
+      // 长宽比（aspect ratio）
+      window.innerWidth / window.innerHeight,
+      // 近截面（near）
+      0.1,
+      // 远截面（far）
+      1000
+    );
+
+    // 渲染器
+    const renderer = new THREE.WebGLRenderer();
+    // 渲染器宽高设置
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    // 加入canvas
+    document.body.appendChild(renderer.domElement);
+
+    // 添加个立方体
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    // 立方体材质
+    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+    // 网格，
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+
+    // 摄像机移动位置
+    camera.position.z = 5;
+
+    // 渲染场景，否则没有事物产生
+    function animate() {
+      // 启动了一个定时器（渲染循环）
+      requestAnimationFrame(animate);
+      cube.rotation.x += 0.01;
+      cube.rotation.y += 0.01;
+      renderer.render(scene, camera);
+    }
+
+    if (WebGL.isWebGLAvailable()) {
+      // Initiate function or other initializations here
+      animate();
+    } else {
+      const warning = WebGL.getWebGLErrorMessage();
+      document.getElementById("container").appendChild(warning);
+    }
+  </script>
+</html>
diff --git a/3D/2.画线.html b/3D/2.画线.html
@@ -0,0 +1,49 @@
+<!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>
+  </head>
+  <body></body>
+  <script async type="module" crossorigin="anonymous">
+    import * as THREE from "/webGpu/3D/node_modules/three/src/Three.js";
+
+    // 渲染器
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+
+    // 摄像机
+    const camera = new THREE.PerspectiveCamera(
+      45,
+      window.innerWidth / window.innerHeight,
+      1,
+      500
+    );
+    camera.position.set(0, 0, 100);
+    camera.lookAt(0, 0, 0);
+
+    // 创建场景
+    const scene = new THREE.Scene();
+    // 定义一个材质
+    const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
+    // 创建几何体
+    const points = [];
+    points.push(new THREE.Vector3(-10, 0, 0));
+    points.push(new THREE.Vector3(0, 10, 0));
+    points.push(new THREE.Vector3(10, 0, 0));
+
+    // 使用缓冲器，将三个点存储起来
+    const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    // 使用连线
+    const line = new THREE.Line( geometry, material );
+    // 加入场景
+    scene.add( line );
+    // 渲染
+    renderer.render( scene, camera );
+
+
+  </script>
+</html>
diff --git a/3D/3文字.html b/3D/3文字.html
@@ -0,0 +1,58 @@
+<!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;
+        box-sizing: border-box;
+      }
+
+      body {
+        position: relative;
+      }
+
+      span {
+        z-index: 100;
+        color: red;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <span>hello three.js</span>
+  </body>
+  <script async type="module" crossorigin="anonymous">
+    import * as THREE from "/webGpu/3D/node_modules/three/src/Three.js";
+    // 这个包埋得深
+
+    // 官方更喜欢DOM + CSS写文字，而不是用threejs。
+
+    // 渲染器
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+
+    // 摄像机
+    const camera = new THREE.PerspectiveCamera(
+      45,
+      window.innerWidth / window.innerHeight,
+      1,
+      500
+    );
+    camera.position.set(0, 0, 100);
+    camera.lookAt(0, 0, 0);
+
+    // 创建场景
+    const scene = new THREE.Scene();
+
+    // 渲染
+    renderer.render(scene, camera);
+  </script>
+</html>
diff --git a/3D/4载入模型.html b/3D/4载入模型.html
@@ -0,0 +1,12 @@
+<!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>
+</head>
+<body>
+  <h1>有问题出现，后续再说</h1>
+</body>
+</html>
diff --git a/3D/assets/SmileySans-Oblique.otf b/3D/assets/SmileySans-Oblique.otf
diff --git a/3D/assets/SmileySans-Oblique.otf.woff2 b/3D/assets/SmileySans-Oblique.otf.woff2
diff --git a/3D/assets/SmileySans-Oblique.ttf b/3D/assets/SmileySans-Oblique.ttf
diff --git a/3D/assets/SmileySans-Oblique.ttf.woff2 b/3D/assets/SmileySans-Oblique.ttf.woff2
diff --git a/3D/assets/scene.bin b/3D/assets/scene.bin