in website/src/components/HeroCanvas.tsx [131:217]
function init(width: number, height: number) {
const ctx = canvasRef.current;
renderer = new WebGLRenderer({ canvas: ctx });
renderer.autoClearColor = false;
camera = new PerspectiveCamera(45, width / height, 0.1, 100);
controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
controls.enablePan = false;
controls.enabled = false;
geometry = new PlaneBufferGeometry(width / height, 1, 250, 250);
const { count } = geometry.attributes.position;
const arrSize = new BufferAttribute(new Float32Array(count), 1);
for (let i = 0; i < arrSize.count; i += 1) {
arrSize.array[i] = getRandom(0, 1);
}
geometry.setAttribute('aSize', arrSize, 1);
geometry.scale(2.0, 1.0, 1.0);
scene = new Scene();
renderer.setSize(canvasWidth, canvasHeight);
const uniforms = {
u_time: {
type: 'f',
value: 1.0,
},
u_resolution: {
type: 'v2',
value: new Vector2(),
},
u_mouse: {
type: 'v2',
value: new Vector2(0.5, 0.5),
},
u_fragMouse: {
type: 'v2',
value: new Vector2(0.5, 0.5),
},
};
scene.background = new Color('red');
camera.position.z = 5;
controls.update();
material = new ShaderMaterial({
uniforms,
vertexShader: vertex,
fragmentShader: fragment,
wireframe: true,
side: DoubleSide,
});
mesh = new Points(geometry, material);
const backGeometry = new PlaneBufferGeometry(width / height, 1, 200, 200);
const bgMaterial = new MeshBasicMaterial({ color: 0x121212, wireframe: false });
const background = new Mesh(backGeometry, bgMaterial);
backGeometry.scale(50, 50, 1);
background.position.set(10, 10, -10);
background.rotation.set(Math.PI / 2, 0, 0);
scene.add(mesh);
scene.add(background);
// Tested and checked
camera.position.set(
0.16430412417444037,
-1.5202138879420155,
0.20892968987792318,
);
controls.update();
renderer.setPixelRatio(window.devicePixelRatio);
onWindowResize();
isLoaded = true;
}