drcmda

// Authors:
//   N8, https://twitter.com/N8Programs
//   drcmda, https://twitter.com/0xca0a
// https://github.com/N8python/maskBlur

import * as THREE from 'three'
import * as React from 'react'
import { extend, useFrame, useThree } from '@react-three/fiber'
import { useFBO } from './useFBO'
import { RenderTexture } from './RenderTexture'

drcmda

// assuming "geo", a THREE.BufferGeometry

geo.computeBoundingBox()
geo.computeVertexNormals()
let bboxSize = geo.boundingBox.getSize(new THREE.Vector3())
let uvMapSize = Math.min(bboxSize.x, bboxSize.y, bboxSize.z)

// calculate UV coordinates, if uv attribute is not present, it will be added
let boxGeometry = new THREE.BoxGeometry(uvMapSize, uvMapSize, uvMapSize)
let cube = new THREE.Mesh(boxGeometry)

drcmda

import { Suspense, createContext, useTransition, useState, useContext, useMemo } from 'react'
import debounce from 'lodash/debounce'

const pendingContext = createContext()
export function Pending({ fallback, debounce, children }) {
  return (
    <Suspense fallback={fallback}>
      <PendingChildren debounce={debounce}>{children}</PendingChildren>
    </Suspense>
  )

drcmda

import * as THREE from "three"

// credits for the box-projecting shader code go to codercat (https://codercat.tk)

const worldposReplace = /* glsl */`
#if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP )
    vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );

    #ifdef BOX_PROJECTED_ENV_MAP
        vWorldPosition = worldPosition.xyz;

drcmda

import * as THREE from 'three'
import { Suspense, useRef, useState } from 'react'
import { Canvas, createPortal, applyProps, useFrame, useThree } from '@react-three/fiber'
import { useFBO, PerspectiveCamera, ScrollControls, Scroll, useScroll, Image } from '@react-three/drei'

function Images() {
  const { width, height } = useThree(state => state.viewport)
  const data = useScroll()
  const group = useRef()
  useFrame(() => {

drcmda

// This is a stress test, it simulates load. In a real app you should try to avoid adding stuff runtime and
// re-use as much as you can, for instance by creating geometry once, then re-using it. But moren often than not
// app performance is affected by a "thousand cuts", and this is where scheduling can make a real difference.
// If React can schedule a 1-2 second CPU choke away (like the one below), it can balance a thousand cuts.
// The whole idea of virtualisation and scheduling is that the app is not beholden to load, just like a virtual
// list does not care if it has to render 10 or 100.000.000 items, it just renders enough.

async function test() {
  const chars = `!"§$%&/()=?*#<>-_.:,;+0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`
  const font = await new Promise((res) => new THREE.FontLoader().load("https://raw.githubusercontent.com/drcmda/scheduler-test/master/public/Inter%20UI_Bold.json", res))

drcmda

{
	"$schema": "vscode://schemas/color-theme",
	"type": "dark",
	"colors": {
		"activityBar.activeBorder": "#a6accd",
		"activityBar.background": "#1b1e28",
		"activityBar.dropBorder": "#a6accd",
		"activityBar.foreground": "#a6accd",
		"activityBar.inactiveForeground": "#a6accd66",
		"activityBarBadge.background": "#303340",

drcmda

// https://github.com/react-spring/react-three-fiber/discussions/440#discussioncomment-20655
// https://github.com/youroff/planet_disco

import React, { useRef, useEffect } from 'react'
import { Vector3, Matrix4, Quaternion, MathUtils } from 'three'
import { useThree, useFrame } from 'react-three-fiber'
import { useGesture } from 'react-use-gesture'
import { useSpring, a } from '@react-spring/three'

function Controls({ speed = 5, maxDist = 4, minDist = 1.5, distance, phi = Math.PI / 2, theta = 2 * Math.PI }) {

drcmda

{
  "name": "project",
  "version": "0.0.1",
  "description": "...",
  "module": "dist/index.js",
  "sideEffects": false,
  "scripts": {
    "build": "rollup -c",
    "prepare": "npm run build",
    "test": "echo no tests yet",

drcmda

const easeInOutCubic = t => (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1)

function timeline(t, number, slot, cb) {
  const range = slot * (1 / number)
  if (t >= range && t <= range + 1 / number) cb(easeInOutCubic((t - range) * number))
}

function useTimeline(factor = 1, number, offset, callback) {
  useFrame(state => {
    const t = (Math.sin(state.clock.getElapsedTime() * factor) + 1) / 2