diff --git a/README.md b/README.md index bf5f5d2..766d60d 100644 --- a/README.md +++ b/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/ \ No newline at end of file +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 diff --git a/day.js b/day.js index 54742c4..a406af4 100644 --- a/day.js +++ b/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 ); diff --git a/night.js b/night.js index 76889f0..1f14be6 100644 --- a/night.js +++ b/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 ); diff --git a/package-lock.json b/package-lock.json index 5fc0948..a43deb9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,14 @@ { - "name": "graphic course work pillbug adventure", + "name": "graphic course work pillbug", "version": "0.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "graphic course work pillbug adventure", + "name": "graphic course work pillbug", "version": "0.0.1", "dependencies": { - "three": "^0.159.0", - "three-gltf-loader": "^1.111.0" + "three": "^0.159.0" }, "devDependencies": { "vite": "^5.0.10" @@ -682,15 +681,6 @@ "resolved": "https://registry.npmjs.org/three/-/three-0.159.0.tgz", "integrity": "sha512-eCmhlLGbBgucuo4VEA9IO3Qpc7dh8Bd4VKzr7WfW4+8hMcIfoAVi1ev0pJYN9PTTsCslbcKgBwr2wNZ1EvLInA==" }, - "node_modules/three-gltf-loader": { - "version": "1.111.0", - "resolved": "https://registry.npmjs.org/three-gltf-loader/-/three-gltf-loader-1.111.0.tgz", - "integrity": "sha512-f2d6J5sMEC+dvRcpRjE8g9vqtvpNfnR7bgd+R7Y0dj2mmHwKN5luKe/WYA0Z9+j7mhjla/AC5DGxdXsu8wFhug==", - "deprecated": "Starting with three.js r103, GLTFLoader is included in the three package itself and installing three-gltf-loader is no longer necessary. It can be imported from 'three/examples/jsm/loaders/GLTFLoader'", - "peerDependencies": { - "three": ">=0.111.0" - } - }, "node_modules/vite": { "version": "5.0.10", "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz", diff --git a/package.json b/package.json index 586da1d..875e866 100644 --- a/package.json +++ b/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" } }