-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.ts
33 lines (25 loc) · 967 Bytes
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import * as THREE from "three";
import { onCanvasResize } from "common";
import { vertex, fragment } from "common/src/shaders/gradient.ts";
const canvas = document.querySelector("canvas")!;
const renderer = new THREE.WebGLRenderer({ canvas });
const scene = new THREE.Scene();
const camera = new THREE.Camera();
const material = new THREE.RawShaderMaterial({
vertexShader: vertex.replaceAll("aPosition", "position"), // three provides the position attribute
fragmentShader: fragment,
uniforms: {
uTime: { value: 0.0 },
},
});
const geometry = new THREE.PlaneGeometry(2, 2);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
requestAnimationFrame(function animate() {
requestAnimationFrame(animate);
mesh.material.uniforms.uTime.value = performance.now() / 500;
renderer.render(scene, camera);
});
onCanvasResize(canvas, ({ devicePixelSize }) => {
renderer.setSize(devicePixelSize.width, devicePixelSize.height, false);
});