update readme

README.md

@@ -16,4 +16,11 @@ Output files will be in `dist` folder. Check https://vitejs.dev/guide/static-dep
 This online demo is deployed on github pages. You can use workflow config file as a reference.
 
 ## Online Demo
-https://acyanbird.github.io/pillbug/
+https://acyanbird.github.io/pillbug/
+
+## TODO
+- [ ] Reduce duplicated code in single file
+- [ ] Reduce by create common.js
+- [ ] Loading page
+- [ ] CSS overflow problem
+- [ ] Animation using tween(?) or other library

day.js

@@ -1,5 +1,5 @@
 import * as THREE from "three"
-import {GLTFLoader} from "three/addons";
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 
 import grassimg from "./assets/gm.jpg";
 import modelpath from "./assets/pill.glb";
@@ -21,7 +21,7 @@ let keysPressed = {};
 
 let camera, cameraUpper, CurrentCamera;
 let scene, renderer, canvas, controls, ground;
-let ambientLight, light;
+let ambientLight
 
 let life = 3;
 let score = 0;
@@ -117,7 +117,7 @@ function createPlane(){
     texture.wrapT = THREE.RepeatWrapping;
     texture.repeat.set( 1, 12 );
     // smoother surface
-    let geometry = new THREE.PlaneGeometry(10, 120, 5, 5);
+    let geometry = new THREE.PlaneGeometry(10, 120, 1, 12);
     // self lighting red
     let material = new THREE.MeshPhongMaterial({map: texture, side: THREE.DoubleSide});
     let plane = new THREE.Mesh( geometry, material );

night.js

@@ -1,5 +1,6 @@
 import * as THREE from "three"
-import {GLTFLoader} from "three/addons";
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+
 import modelpath from "./assets/pill.glb";
 import gameover from "./assets/gameover.wav";
 import loselife from "./assets/loselife.wav";
@@ -113,7 +114,7 @@ function createCamera(y) {
 
 function createPlane(){
     // smoother surface
-    let geometry = new THREE.PlaneGeometry(13, 60, 5, 5);
+    let geometry = new THREE.PlaneGeometry(13, 60, 2, 10);
     // self lighting red
     let material = new THREE.MeshPhongMaterial({color: 0x999999, emissive: 0xff0000, emissiveIntensity: 0.2, side: THREE.DoubleSide});
     let plane = new THREE.Mesh( geometry, material );

package.json

@@ -11,7 +11,6 @@
     "vite": "^5.0.10"
   },
   "dependencies": {
-    "three": "^0.159.0",
-    "three-gltf-loader": "^1.111.0"
+    "three": "^0.159.0"
   }
 }