Front End Developer & UI/UX DesignerFront End Developer & UI/UX Designer

const scene = new THREE.Scene()
const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true,
  powerPreference: 'high-performance',
})
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setSize(window.innerWidth, window.innerHeight)
lightRays.value.appendChild(renderer.domElement)

const aspect = window.innerWidth / window.innerHeight
const camera = new THREE.OrthographicCamera(-aspect, aspect, 1, -1, 0, 10)
camera.position.z = 1

const geometry = new THREE.PlaneGeometry(2 * aspect, 2)

const material = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader,
  uniforms: {
    u_resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
    u_mouse: { value: new THREE.Vector2() },
    u_time: { value: 0.0 },
    u_colors: {
      value: [
        new THREE.Vector4(0.3882, 0.5333, 0.9686, 1),
        new THREE.Vector4(0.0823, 0.1372, 0.9294, 1),
      ],
    },
    u_intensity: { value: 0.5 },
    u_rays: { value: 0.08 },
    u_reach: { value: 0.05 },
  },
})

const plane = new THREE.Mesh(geometry, material)
scene.add(plane)

</script>