shader demo

src/index.ts

@@ -1,6 +1,6 @@
 import * as THREE from "three"
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Object3D } from "three";
+import { Object3D, Mesh, ShaderMaterial } from "three";
 
 import { GameController } from "./controller"
 
@@ -114,16 +114,53 @@ export class FooGame {
 
 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;
         });
     }
 })