🌐 fix production error

Author: luosijie

src/pages/bedroom/draco/README.md renamed to public/draco/README.md

@@ -10,7 +10,7 @@ const workList = [
     { link: '', img: '' },
     { link: '/pages/house-in-desert/', img: cover('house-in-desert') },
     { link: '/pages/jump/', img: cover('jump') },
-    { link: 'pages//mini-city/', img: cover('mini-city') },
+    { link: 'pages/mini-city/', img: cover('mini-city') },
     { link: 'pages/china-map/', img: cover('china-map') }
 ]
 

src/pages/bedroom/draco/draco_decoder.js renamed to public/draco/draco_decoder.js

@@ -6,14 +6,19 @@ import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
 
 import createBackgroundMaterial from './materials/createBackground.js'
 
+import urlRoom from './resources/room.glb?url'
+import urlPlants from './resources/plants.glb?url'
+import urlMatcapGreen from './resources/matcap-green.webp?url'
+import urlImageBaked from './resources/baked.webp?url'
+
 const canvas : HTMLCanvasElement = <HTMLCanvasElement> document.querySelector('#canvas')
 
 // Set loaders
 
 const textureLoader = new TextureLoader()
 
 const dracoLoader = new DRACOLoader()
-dracoLoader.setDecoderPath('draco/')
+dracoLoader.setDecoderPath('/draco/')
 
 const gltfLoader = new GLTFLoader()
 gltfLoader.setDRACOLoader(dracoLoader)
@@ -44,12 +49,12 @@ backgroundMesh.updateMatrix()
 scene.add(backgroundMesh)
 
 // Load room
-const roomTexture = textureLoader.load('./resources/baked.webp')
+const roomTexture = textureLoader.load(urlImageBaked)
 roomTexture.flipY = false
 roomTexture.encoding = sRGBEncoding
 
 gltfLoader.load(
-    './resources/room.glb',
+    urlRoom,
     gltf => {
         const bakedMesh : Mesh = <Mesh> gltf.scene.children.find(child => child.name === 'main')
 
@@ -60,12 +65,12 @@ gltfLoader.load(
 )
 
 // Load plants
-const plantsTexture = textureLoader.load('./resources/matcap-green.webp')
+const plantsTexture = textureLoader.load(urlMatcapGreen)
 plantsTexture.flipY = false
 plantsTexture.encoding = sRGBEncoding
 
 gltfLoader.load(
-    './resources/plants.glb',
+    urlPlants,
     gltf => {
         const mesh : Mesh = <Mesh> gltf.scene.children.find(child => child.name === 'plants')
 

src/pages/bedroom/draco/draco_decoder.wasm renamed to public/draco/draco_decoder.wasm

@@ -7,6 +7,10 @@ import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
 import createBackgroundMaterial from './materials/createBackground.js'
 import createFloorShadowMaterial from './materials/createFloorShadow.js'
 
+import urlImageBaked from './resources/baked.jpg?url'
+import urlImageFloorShadow from './resources/floor-shadow.jpg?url'
+import urlModelHouse from './resources/house.glb?url'
+
 const canvas = document.querySelector('#canvas')
 
 if (canvas instanceof HTMLCanvasElement) {
@@ -16,12 +20,12 @@ if (canvas instanceof HTMLCanvasElement) {
     const textureLoader = new TextureLoader()
 
     // texture-baked
-    const bakedTexture = textureLoader.load('./resources/baked.jpg')
+    const bakedTexture = textureLoader.load(urlImageBaked)
     bakedTexture.flipY = false
     bakedTexture.encoding = sRGBEncoding
 
     // texture-floor-shadow
-    const floorShadowTexture = textureLoader.load('./resources/floor-shadow.jpg')
+    const floorShadowTexture = textureLoader.load(urlImageFloorShadow)
     floorShadowTexture.flipY = false
     floorShadowTexture.encoding = sRGBEncoding
 
@@ -38,7 +42,7 @@ if (canvas instanceof HTMLCanvasElement) {
 
     // Draco loader
     const dracoLoader = new DRACOLoader()
-    dracoLoader.setDecoderPath('draco/')
+    dracoLoader.setDecoderPath('/draco/')
 
     // GLTF loader
     const gltfLoader = new GLTFLoader()
@@ -55,7 +59,7 @@ if (canvas instanceof HTMLCanvasElement) {
 
     // load-model
     gltfLoader.load(
-        './resources/house.glb',
+        urlModelHouse,
         gltf => {
             const bakedMesh = gltf.scene.children.find(child => child.name === 'baked')
             if (bakedMesh instanceof Mesh) {

src/pages/bedroom/draco/draco_encoder.js renamed to public/draco/draco_encoder.js

@@ -66,6 +66,7 @@ body {
     margin: 0;
     padding: 0;
 }
+
 .container {
     display: flex;
     align-items: center;
@@ -75,6 +76,7 @@ body {
     background: #ffffff;
     flex-direction: column;
 }
+
 .mask {
     position: fixed;
     display: flex;
@@ -85,9 +87,11 @@ body {
     height: 100%;
     background: rgb(0 0 0 / 40%);
     flex-direction: column;
+
     .title {
         padding-bottom: 30px;
     }
+
     .content {
         display: flex;
         justify-content: center;
@@ -100,21 +104,25 @@ body {
         flex-direction: column;
     }
 }
+
 .score-container {
     text-align: center;
     color: #ffffff;
 }
+
 .title {
     margin-bottom: 10px;
     font-size: 20px;
     font-weight: bold;
     color: rgb(255 255 255 / 60%);
 }
+
 .score {
     margin-top: 20px;
     font-size: 100px;
     font-weight: bold;
 }
+
 button.restart {
     width: 200px;
     height: 40px;
@@ -125,27 +133,32 @@ button.restart {
     background: white;
     cursor: pointer;
 }
+
 button.restart:hover {
     color: #232323;
 }
+
 .info {
     position: absolute;
     margin: 20px 0;
     width: 100%;
     text-align: center;
     opacity: 0.2;
 }
+
 .info a {
     display: block;
     font-size: 16px;
     text-decoration: none;
     color: #ffffff;
     line-height: 28px;
 }
+
 a.title {
     font-size: 20px;
     font-weight: bold;
 }
+
 .score-gaming {
     margin-top: 10px;
     font-size: 16px;

src/pages/bedroom/draco/draco_wasm_wrapper.js renamed to public/draco/draco_wasm_wrapper.js

@@ -4,9 +4,23 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  
+    <link rel="stylesheet" href="./style.scss">
     <title>Mini City</title>
   </head>
   <body>
-    <script type="module" src="./main.ts"></script>
+    
+  <div class="container">
+      <div class="info">
+          <a class="title" href="https://github.com/luosijie/threejs-examples" target="_blank">
+              Mini City
+          </a>
+          <a class="author" href="https://luosijie.github.io/" target="_blank">
+              Created By Jesse Luo
+          </a>
+      </div>
+      <canvas></canvas>
+  </div>
+    <script type="module" src="./js/main.js"></script>
   </body>
 </html>