浏览代码

shader demo

hsiao 5 年前
父节点
当前提交
b65409c40b
共有 2 个文件被更改,包括 98 次插入50 次删除
  1. 60
    49
      public/scenes/foo.gltf
  2. 38
    1
      src/index.ts

+ 60
- 49
public/scenes/foo.gltf
文件差异内容过多而无法显示
查看文件


+ 38
- 1
src/index.ts 查看文件

1
 import * as THREE from "three"
1
 import * as THREE from "three"
2
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
2
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
3
-import { Object3D } from "three";
3
+import { Object3D, Mesh, ShaderMaterial } from "three";
4
 
4
 
5
 import { GameController } from "./controller"
5
 import { GameController } from "./controller"
6
 
6
 
114
 
114
 
115
 let game = new FooGame();
115
 let game = new FooGame();
116
 
116
 
117
+let vertexShader =  `
118
+uniform float time;
119
+varying vec3 vPos;
120
+void main() {
121
+	vPos=position;
122
+	vPos.x += sin(time * vPos.z) * 2.0;
123
+	vPos.y += cos(time * vPos.z) * 2.0;
124
+	//vPos.z += tan(time * vPos.z) * 4.0;
125
+	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
126
+}
127
+`;
128
+
129
+let fragmentShader =  `
130
+varying vec3 vPos;
131
+void main() {
132
+	gl_FragColor = vec4( vPos, 1.0 );
133
+}
134
+`;
135
+
117
 game.loadScene(() => {
136
 game.loadScene(() => {
118
     let box = game.scene.getObjectByName("Box");
137
     let box = game.scene.getObjectByName("Box");
119
     if (box) {
138
     if (box) {
120
         game.bindKeyAction(box);
139
         game.bindKeyAction(box);
140
+        let mat:ShaderMaterial;
141
+        if (box instanceof Mesh) {
142
+            let mesh: Mesh = box;
143
+            
144
+            mat = new ShaderMaterial({
145
+                uniforms: {
146
+                    time: {
147
+                        value: 0
148
+                    }
149
+                },
150
+                vertexShader: vertexShader,
151
+                fragmentShader: fragmentShader
152
+            });
153
+            mesh.material = mat;
154
+        }
155
+
121
         game.setUpdate(box, (obj: Object3D) => {
156
         game.setUpdate(box, (obj: Object3D) => {
122
             //game.camera.rotateOnAxis(obj.position, 0.01)
157
             //game.camera.rotateOnAxis(obj.position, 0.01)
123
             //obj.position.x += performance.now() * 0.000001;
158
             //obj.position.x += performance.now() * 0.000001;
124
             //obj.position.z += performance.now() * 0.000001;
159
             //obj.position.z += performance.now() * 0.000001;
125
             obj.rotateY(0.01);
160
             obj.rotateY(0.01);
161
+
126
             //game.camera.lookAt(obj.position)
162
             //game.camera.lookAt(obj.position)
163
+            mat.uniforms.time.value = performance.now()/500;
127
         });
164
         });
128
     }
165
     }
129
 })
166
 })

正在加载...
取消
保存