init

src/controller.ts

@@ -1,38 +0,0 @@
-
-export class GameController {
-    root: HTMLElement;
-
-    callbackMap: any;
-
-    constructor(root: HTMLElement) {
-        this.root = root;
-        this.callbackMap = {};
-        this.bindKey();
-    }
-
-    onKey_A(callback: Function) {
-        this.callbackMap["A"] = callback;
-    }
-
-    onKey_S(callback: Function) {
-        this.callbackMap["S"] = callback;
-    }
-
-    onKey_W(callback: Function) {
-        this.callbackMap["W"] = callback;
-    }
-    onKey_D(callback: Function) {
-        this.callbackMap["D"] = callback;
-    }
-
-    private bindKey() {
-        this.root.onkeypress = (event) => {
-            let c = event.key.toUpperCase();
-            if (this.callbackMap[c]) {
-                this.callbackMap[c]();
-            }
-        };
-        console.log(this.root);
-
-    }
-}

src/index.ts

@@ -1,8 +1,6 @@
 import * as THREE from "three"
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Object3D, Mesh, ShaderMaterial } from "three";
-
-import { GameController } from "./controller"
+import { Object3D, Mesh, ShaderMaterial, DirectionalLight, BoxBufferGeometry, TextureLoader, MeshStandardMaterial, Texture, AmbientLight, Vector3, PlaneBufferGeometry } from "three";
 
 
 export class FooGame {
@@ -15,16 +13,14 @@ export class FooGame {
     cam_aspect = window.innerWidth / window.innerHeight;
 
     loader: GLTFLoader;
-
+    texLoader: TextureLoader;
     updateMap: Object;
 
-    controller: GameController;
-
     constructor() {
-        this.camera = new THREE.PerspectiveCamera(this.cam_fov, this.cam_aspect, 0.01, 10)
+        this.camera = new THREE.PerspectiveCamera(this.cam_fov, this.cam_aspect, 0.01, 1000)
         this.camera.position.x = 0;
-        this.camera.position.y = 3;
-        this.camera.position.z = 5;
+        this.camera.position.y = 15;
+        this.camera.position.z = 0;
 
         this.scene = new THREE.Scene();
 
@@ -34,29 +30,11 @@ export class FooGame {
         document.body.appendChild(this.renderer.domElement);
 
         this.loader = new GLTFLoader();
+        this.texLoader = new TextureLoader();
 
         this.updateMap = {};
 
-        this.controller = new GameController(document.body);
-
         this.animate();
-        //this.loadScene();
-    }
-
-    bindKeyAction(box: Object3D) {
-        this.controller.onKey_A(() => {
-            if (box) box.position.x -= 0.1;
-        });
-        this.controller.onKey_D(() => {
-            if (box) box.position.x += 0.1;
-        });
-        this.controller.onKey_S(() => {
-            if (box) box.position.z += 0.1;
-        });
-        this.controller.onKey_W(() => {
-            if (box) box.position.z -= 0.1;
-        });
-
     }
 
     animate() {
@@ -103,65 +81,32 @@ export class FooGame {
     }
 
     loadScene(callback: Function) {
-        this.loader.load("./scenes/foo.gltf", gltf => {
-            this.scene.add(gltf.scene);
-            let box = this.scene.getObjectByName("Box");
-            box && this.camera.lookAt(box.position);
-            callback();
-        });
+        let light = new DirectionalLight(0xffffff, 0.8);
+        light.position.set(5, 20, 0);
+        let light2 = new AmbientLight(0xffffff, 0.9);
+        this.scene.add(light);
+        this.scene.add(light2);
+        this.camera.lookAt(new Vector3(0, 0, 0));
+        callback();
     }
 }
 
 let game = new FooGame();
-
-let vertexShader =  `
-uniform float time;
-varying vec3 vPos;
-void main() {
-	vPos=position;
-	vPos.x += sin(time * vPos.z) * 2.0;
-	vPos.y += cos(time * vPos.z) * 2.0;
-	//vPos.z += tan(time * vPos.z) * 4.0;
-	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-}
-`;
-
-let fragmentShader =  `
-varying vec3 vPos;
-void main() {
-	gl_FragColor = vec4( vPos, 1.0 );
-}
-`;
-
 game.loadScene(() => {
-    let box = game.scene.getObjectByName("Box");
-    if (box) {
-        game.bindKeyAction(box);
-        let mat:ShaderMaterial;
-        if (box instanceof Mesh) {
-            let mesh: Mesh = box;
-            
-            mat = new ShaderMaterial({
-                uniforms: {
-                    time: {
-                        value: 0
-                    }
-                },
-                vertexShader: vertexShader,
-                fragmentShader: fragmentShader
-            });
-            mesh.material = mat;
-        }
-
-        game.setUpdate(box, (obj: Object3D) => {
-            //game.camera.rotateOnAxis(obj.position, 0.01)
-            //obj.position.x += performance.now() * 0.000001;
-            //obj.position.z += performance.now() * 0.000001;
-            obj.rotateY(0.01);
-
-            //game.camera.lookAt(obj.position)
-            mat.uniforms.time.value = performance.now()/500;
-        });
-    }
-})
+    let mat = new MeshStandardMaterial();
+    let mesh = new PlaneBufferGeometry(50, 50, 100, 100);
+
+    game.texLoader.load("./textures/sand.jpg", (tex) => {
+        tex.wrapS = THREE.RepeatWrapping;
+        tex.wrapT = THREE.RepeatWrapping;
+        tex.mapping = THREE.EquirectangularReflectionMapping;
+        mat.map = tex;
+        let obj = new Mesh(mesh, mat);
+        obj.rotation.x = -Math.PI / 2;
+        obj.position.y = -3
+        game.scene.add(obj);
+    });
+
+
+});