2

LeroyK111 · Oct 8, 2023 · 965eb63 · 965eb63
1 parent 90e33ad
commit 965eb63
Show file tree

Hide file tree

Showing 10 changed files with 33,333 additions and 0 deletions.
diff --git a/3D/5载入船型.html b/3D/5载入船型.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <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;
+      }
+    </style>
+  </head>
+  <body></body>
+
+  <script
+    async
+    src="https://unpkg.com/[email protected]/dist/es-module-shims.js"
+  ></script>
+  <!-- 映射器，恶心 -->
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "/webGpu/3D/node_modules/three/build/three.module.js",
+        "three/addons/": "/webGpu/3D/node_modules/three/examples/jsm/"
+      }
+    }
+  </script>
+
+  <script type="module">
+    import * as THREE from "three";
+    import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+
+    // console.log("GLTFLoader", GLTFLoader);
+    // 渲染器
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+
+    renderer.setClearColor(0x808080);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.shadowMap.enabled = true;
+    renderer.gammaOuput = true;
+    document.body.appendChild(renderer.domElement);
+
+    // 摄像机
+    const camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      100
+    );
+    camera.position.set(0, 0, 1);
+
+    // 创建场景
+    const scene = new THREE.Scene();
+
+    // 我们还需要光照，
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
+    directionalLight.position.set(0, 0, 100);
+    scene.add(directionalLight);
+
+    const loader = new GLTFLoader();
+
+    let root;
+
+    loader.load(
+      "/webGpu/3D/assets/small_cargo_ship/scene.gltf",
+      function (glb) {
+        root = glb.scene;
+        root.position.set(0,0,0)
+        root.scale.set(.7, .7, .7)
+        root.rotation.set(.30, 0, 0)
+        scene.add(root);
+        // console.log(glb);
+      },
+      (xhr) => {
+        console.log(xhr);
+      },
+      function (error) {
+        console.error(error);
+      }
+    );
+
+    // 如果不调用动画，则不会显示模型。。。
+    function animate(params) {
+      requestAnimationFrame(animate);
+      root.rotation.y +=.01
+      renderer.render(scene, camera);
+    }
+
+    animate()
+  </script>
+</html>
diff --git a/3D/assets/small_cargo_ship/license.txt b/3D/assets/small_cargo_ship/license.txt
@@ -0,0 +1,11 @@
+Model Information:
+* title:	Small Cargo Ship
+* source:	https://sketchfab.com/3d-models/small-cargo-ship-6362d3e9b11e4396aaafa854c3aa6f06
+* author:	Styx (https://sketchfab.com/588276)
+
+Model License:
+* license type:	CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
+* requirements:	Author must be credited. Commercial use is allowed.
+
+If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
+This work is based on "Small Cargo Ship" (https://sketchfab.com/3d-models/small-cargo-ship-6362d3e9b11e4396aaafa854c3aa6f06) by Styx (https://sketchfab.com/588276) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
diff --git a/3D/assets/small_cargo_ship/scene.bin b/3D/assets/small_cargo_ship/scene.bin