loading the model

bosiraphael · Dec 28, 2022 · 2f86e2d · 2f86e2d
1 parent ede0cd4
commit 2f86e2d
Show file tree

Hide file tree

Showing 15 changed files with 880 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -4,10 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + TS</title>
+    <title>Lowpoly Island</title>
   </head>
   <body>
     <div id="app"></div>
+    <canvas class="webgl"></canvas>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -9,7 +9,13 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@types/dat.gui": "^0.7.7",
+    "@types/three": "^0.146.0",
     "typescript": "^4.9.3",
     "vite": "^4.0.0"
+  },
+  "dependencies": {
+    "dat.gui": "^0.7.9",
+    "three": "^0.148.0"
   }
-}
+}
diff --git a/public/draco/README.md b/public/draco/README.md
@@ -0,0 +1,32 @@
+# Draco 3D Data Compression
+
+Draco is an open-source library for compressing and decompressing 3D geometric meshes and point clouds. It is intended to improve the storage and transmission of 3D graphics.
+
+[Website](https://google.github.io/draco/) | [GitHub](https://github.com/google/draco)
+
+## Contents
+
+This folder contains three utilities:
+
+* `draco_decoder.js` — Emscripten-compiled decoder, compatible with any modern browser.
+* `draco_decoder.wasm` — WebAssembly decoder, compatible with newer browsers and devices.
+* `draco_wasm_wrapper.js` — JavaScript wrapper for the WASM decoder.
+
+Each file is provided in two variations:
+
+* **Default:** Latest stable builds, tracking the project's [master branch](https://github.com/google/draco).
+* **glTF:** Builds targeted by the [glTF mesh compression extension](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression), tracking the [corresponding Draco branch](https://github.com/google/draco/tree/gltf_2.0_draco_extension).
+
+Either variation may be used with `THREE.DRACOLoader`:
+
+```js
+var dracoLoader = new THREE.DRACOLoader();
+dracoLoader.setDecoderPath('path/to/decoders/');
+dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.
+```
+
+Further [documentation on GitHub](https://github.com/google/draco/tree/master/javascript/example#static-loading-javascript-decoder).
+
+## License
+
+[Apache License 2.0](https://github.com/google/draco/blob/master/LICENSE)
diff --git a/public/draco/draco_decoder.js b/public/draco/draco_decoder.js
diff --git a/public/draco/draco_decoder.wasm b/public/draco/draco_decoder.wasm
diff --git a/public/draco/draco_encoder.js b/public/draco/draco_encoder.js
diff --git a/public/draco/draco_wasm_wrapper.js b/public/draco/draco_wasm_wrapper.js
diff --git a/public/draco/gltf/draco_decoder.js b/public/draco/gltf/draco_decoder.js
diff --git a/public/draco/gltf/draco_decoder.wasm b/public/draco/gltf/draco_decoder.wasm
diff --git a/public/draco/gltf/draco_encoder.js b/public/draco/gltf/draco_encoder.js
diff --git a/public/draco/gltf/draco_wasm_wrapper.js b/public/draco/gltf/draco_wasm_wrapper.js
diff --git a/public/models/lowPolyIslandWithoutWater.glb b/public/models/lowPolyIslandWithoutWater.glb
diff --git a/src/main.ts b/src/main.ts
@@ -1,23 +1,205 @@
-import './style.css'
-import typescriptLogo from './typescript.svg'
-import { setupCounter } from './counter'
-
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://www.typescriptlang.org/" target="_blank">
-      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
-    </a>
-    <h1>Vite + TypeScript</h1>
-    <div class="card">
-      <button id="counter" type="button"></button>
-    </div>
-    <p class="read-the-docs">
-      Click on the Vite and TypeScript logos to learn more
-    </p>
-  </div>
-`
-
-setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
+import "./style.css";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import * as dat from "dat.gui";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
+
+/**
+ * Base
+ */
+// Debug
+const gui = new dat.GUI();
+const debugObject = {
+  waterColor: 0x7ec0ee,
+};
+
+// Canvas
+const canvas: HTMLCanvasElement | null = document.querySelector("canvas.webgl");
+
+if (!canvas) {
+  throw new Error("Canvas not found");
+}
+
+// Scene
+const scene = new THREE.Scene();
+
+/**
+ * Update all materials
+ */
+
+const updateAllMaterials = () => {
+  scene.traverse((child) => {
+    if (
+      child instanceof THREE.Mesh &&
+      child.material instanceof THREE.MeshStandardMaterial &&
+      child.name !== "Water"
+    ) {
+      //child.material.envMap = environmentMapTexture;
+      child.material.needsUpdate = true;
+      child.castShadow = true;
+      child.receiveShadow = true;
+      console.log(child);
+    }
+    if (child instanceof THREE.Mesh && child.name === "Water") {
+      child.material.transparent = true;
+      child.material.opacity = 0.5;
+      child.material.needsUpdate = true;
+      child.castShadow = true;
+      child.receiveShadow = true;
+    }
+  });
+};
+
+/**
+ * Models
+ */
+const dracoLoader = new DRACOLoader();
+dracoLoader.setDecoderPath("/draco/");
+
+const gltfLoader = new GLTFLoader();
+gltfLoader.setDRACOLoader(dracoLoader);
+
+let mixer: any = null;
+gltfLoader.load("models/lowPolyIslandWithoutWater.glb", (gltf) => {
+  gltf.scene.scale.set(1, 1, 1);
+
+  scene.add(gltf.scene);
+  updateAllMaterials();
+});
+
+/**
+ * Water
+ */
+const waterGeometry = new THREE.PlaneGeometry(10, 10, 32, 32);
+const waterMaterial = new THREE.MeshStandardMaterial({
+  color: debugObject.waterColor,
+  transparent: true,
+  opacity: 0.5,
+});
+const water = new THREE.Mesh(waterGeometry, waterMaterial);
+water.rotation.x = -Math.PI * 0.5;
+water.position.y = 0.01;
+water.name = "Water";
+scene.add(water);
+
+gui.addColor(debugObject, "waterColor").onChange(() => {
+  waterMaterial.color.set(debugObject.waterColor);
+});
+
+/**
+ * Lights
+ */
+const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
+scene.add(ambientLight);
+
+const directionalLight = new THREE.DirectionalLight(0xffffff, 5);
+directionalLight.castShadow = true;
+directionalLight.shadow.mapSize.set(1024, 1024);
+directionalLight.shadow.camera.far = 100;
+directionalLight.shadow.camera.left = -50;
+directionalLight.shadow.camera.top = 50;
+directionalLight.shadow.camera.right = 50;
+directionalLight.shadow.camera.bottom = -50;
+directionalLight.position.set(5, 5, 5);
+directionalLight.shadow.bias = -0.01;
+scene.add(directionalLight);
+
+/**
+ * Sizes
+ */
+const sizes = {
+  width: window.innerWidth,
+  height: window.innerHeight,
+};
+
+window.addEventListener("resize", () => {
+  // Update sizes
+  sizes.width = window.innerWidth;
+  sizes.height = window.innerHeight;
+
+  // Update camera
+  camera.aspect = sizes.width / sizes.height;
+  camera.updateProjectionMatrix();
+
+  // Update renderer
+  renderer.setSize(sizes.width, sizes.height);
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+});
+
+/**
+ * Camera
+ */
+// Base camera
+const camera = new THREE.PerspectiveCamera(
+  75,
+  sizes.width / sizes.height,
+  0.1,
+  100
+);
+camera.position.set(2, 2, 2);
+scene.add(camera);
+
+// Controls
+const controls = new OrbitControls(camera, canvas);
+controls.target.set(0, 0.75, 0);
+controls.enableDamping = true;
+
+/**
+ * Renderer
+ */
+const renderer = new THREE.WebGLRenderer({
+  canvas: canvas,
+  antialias: true,
+});
+renderer.setSize(sizes.width, sizes.height);
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.physicallyCorrectLights = true;
+renderer.outputEncoding = THREE.sRGBEncoding;
+renderer.toneMapping = THREE.ReinhardToneMapping;
+renderer.toneMappingExposure = 3;
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+renderer.setClearColor(0x99ccff, 1);
+
+gui
+  .add(renderer, "toneMapping", {
+    No: THREE.NoToneMapping,
+    Linear: THREE.LinearToneMapping,
+    Reinhard: THREE.ReinhardToneMapping,
+    Cineon: THREE.CineonToneMapping,
+    ACESFilmic: THREE.ACESFilmicToneMapping,
+  })
+  .onChange(() => {
+    renderer.toneMapping = Number(renderer.toneMapping);
+    updateAllMaterials();
+  });
+
+gui.add(renderer, "toneMappingExposure").min(0).max(10).step(0.001);
+/**
+ * Animate
+ */
+const clock = new THREE.Clock();
+let previousTime = 0;
+
+const tick = () => {
+  const elapsedTime = clock.getElapsedTime();
+  const deltaTime = elapsedTime - previousTime;
+  previousTime = elapsedTime;
+
+  // Update Mixer
+  if (mixer) {
+    mixer.update(deltaTime);
+  }
+
+  // Update controls
+  controls.update();
+
+  // Render
+  renderer.render(scene, camera);
+
+  // Call tick again on the next frame
+  window.requestAnimationFrame(tick);
+};
+
+tick();
diff --git a/tsconfig.json b/tsconfig.json
@@ -15,5 +15,5 @@
     "noImplicitReturns": true,
     "skipLibCheck": true
   },
-  "include": ["src"]
+  "include": ["src", "public/draco"]
 }