diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx index 760d02c..7f3cbdd 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -35,8 +35,6 @@ import { & { - modelUrlHi: string - modelUrlLow: string modelId?: string preset?: LookPresetItemValues mode?: 'simple' | 'abstract' @@ -36,12 +37,12 @@ const useLookPreset = ( mode: 'abstract' | 'simple', preset?: LookPresetItemValues, modelId?: string, -): LookPresetItemValues => { +): LookPresetItem => { return useMemo(() => { - if (preset) return preset - if (!modelId) return defaultPresets[mode] + if (preset) return { ...defaultPresets, [mode]: preset } + if (!modelId) return defaultPresets const existingPreset = OBJECTS_PRESETS.find((p) => p.modelId === modelId) - return existingPreset ? existingPreset[mode] : defaultPresets[mode] + return existingPreset ? existingPreset : defaultPresets }, [preset, modelId]) } @@ -51,8 +52,6 @@ const getInitialY = (mode: 'abstract' | 'simple'): number => { export const HeroModel = (props: HeroModelProps) => { const { - modelUrlHi, - modelUrlLow, modelId, preset: presetProp, mode = 'simple', @@ -67,9 +66,9 @@ export const HeroModel = (props: HeroModelProps) => { } = props const preset = useLookPreset(mode, presetProp, modelId) - // const index = 1; - // const preset = OBJECTS_PRESETS[1]? OBJECTS_PRESETS[index][mode] : defaultPresets[mode]; - const scrollY = useScrollY() + // const index = 0; + // const preset = OBJECTS_PRESETS[index] ? OBJECTS_PRESETS[index] : defaultPresets; + // const scrollY = useScrollY() return (
{ }} camera={{ fov: 50, - position: preset.cameraPos, - rotation: preset.cameraRot, + position: preset[mode].cameraPos, + rotation: preset[mode].cameraRot, }} > @@ -111,11 +110,13 @@ export const HeroModel = (props: HeroModelProps) => { - }> - + } + > + diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/_HeroModel.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/_HeroModel.tsx deleted file mode 100644 index ab7b907..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/_HeroModel.tsx +++ /dev/null @@ -1,336 +0,0 @@ -/* -import {OrbitControls, useGLTF} from '@react-three/drei' -import {Canvas, useFrame, useThree} from '@react-three/fiber' -import clsx from 'clsx' -import React, { - PropsWithChildren, - Suspense, - useEffect, - useLayoutEffect, - useMemo, - useRef, - useState, -} from 'react' -import * as THREE from 'three' -import {AsciiEffect} from 'three-stdlib' -import './HeroModel.scss' -import { - calcScrollThreshold, - isTouchDevice, - mapFloat, - random, -} from '../../../lib/ui.utils' -import {useScrollY} from '../../../lib/useScrollY' - -let ROTATE_SPEED = 0.1 -const MIN_ROTATE_SPEED = 0.1 -const MAX_ROTATE_SPEED = 1 - -const MAX_Z = 20 * 1.4 // or another value that suits your needs -const MIN_Z = 0.2 * 1.4 -const MIN_Y = -0.25 -const MAX_Y = 0.25 -const MIN_X = -0.25 -const MAX_X = 0.25 - -const MIN_ZOOM = 0.22 -const RESIZE_SPEED_FACTOR = 0.9 -const INITIAL_ZOOM = 3 -const calcZoom = (scrollY = 0, initZ = INITIAL_ZOOM) => { - return Math.max( - mapFloat( - scrollY, - 0, - calcScrollThreshold() * RESIZE_SPEED_FACTOR, - initZ, - MIN_ZOOM, - ), - MIN_ZOOM, - ) -} - -const calcRotateSpeed = (scrollY = 0, speed) => { - const sFactor = mapFloat(scrollY, 0, window.innerHeight, 1, 10) - return Math.max(Math.min(speed * sFactor, MAX_ROTATE_SPEED), MIN_ROTATE_SPEED) -} - -function Model({url, ...props}) { - // useGLTF suspends the component, it literally stops processing - const {scene} = useGLTF(url) as any - // useLayoutEffect(() => { - // if (!camera) return - // const c = camera as THREE.PerspectiveCamera - // const fov = c.fov * (Math.PI / 180) - // const distance = Math.abs(Math.max(size.x, size.y) / Math.sin(fov / 2)) - // c.position.setZ(distance) - // }, [size, camera]) - return ( - - ) -} - -type RotateProps = PropsWithChildren<{ - initialZ?: number - rotateSpeed?: number - enableZoom?: boolean - enableRotateOnScroll?: boolean -}> - -function Movements({ - initialZ, - rotateSpeed = ROTATE_SPEED, - enableZoom = true, - enableRotateOnScroll = true, - ...props - }: RotateProps) { - const ref = useRef() - const scrollY = useScrollY() - - useFrame((state, delta) => { - // const f = mapFloat(scrollY, 0, 1000, 1, 2); - // ref.current.rotation.x += delta * (ROTATE_SPEED); - // ref.current.rotation.y += delta * (ROTATE_SPEED); - const speed = enableRotateOnScroll - ? calcRotateSpeed(scrollY, rotateSpeed) - : rotateSpeed - ref.current.rotation.y += delta * speed - }) - - return ( - - ) -} - -type AsciiConfigs = { - characters?: string - invert?: boolean - color?: boolean - bgColor?: string - fgColor?: string - resolution?: number - renderIndex?: number -} - -const defaultAsciiConfigs = { - renderIndex: 1, - bgColor: 'rgb(var(--lsd-surface-primary))', - fgColor: 'rgb(var(--lsd-text-primary))', - characters: ' l.o.g.o.s ', - invert: false, - color: false, - resolution: 0.2, -} - -type AsciiEffectProps = { - config?: AsciiConfigs - initialZ?: number -} - -function useAsciiEffect({config = {}, initialZ}: AsciiEffectProps) { - const { - renderIndex = defaultAsciiConfigs.renderIndex, - characters = defaultAsciiConfigs.characters, - invert = defaultAsciiConfigs.invert, - color = defaultAsciiConfigs.color, - resolution = defaultAsciiConfigs.resolution, - bgColor = defaultAsciiConfigs.bgColor, - fgColor = defaultAsciiConfigs.fgColor, - } = config - - // Reactive state - const {gl, size, scene, camera, viewport} = useThree() - - const effect = useMemo(() => { - const effect = new AsciiEffect(gl, " characters ", { - invert: true, - color: false, - resolution: 0.1, - }) - effect.domElement.style.position = 'absolute' - effect.domElement.style.top = '0px' - effect.domElement.style.left = '0px' - effect.domElement.style.pointerEvents = 'none' - return effect - }, [characters, invert, color, resolution]) - - useLayoutEffect(() => { - effect.domElement.style.color = fgColor - // effect.domElement.style.backgroundColor = bgColor - }, [fgColor, bgColor]) - - // Append on mount, remove on unmount - useEffect(() => { - gl.domElement.style.opacity = '0' - gl.domElement.parentNode!.appendChild(effect.domElement) - return () => { - gl.domElement.style.opacity = '1' - gl.domElement.parentNode!.removeChild(effect.domElement) - } - }, [effect]) - - // Set size - useEffect(() => { - effect.setSize(size.width, size.height) - }, [effect, size]) - - // Take over render-loop (that is what the index is for) - useFrame((state) => { - effect.render(scene, camera) - }, renderIndex) -} - -const AsciiRenderer = (props: AsciiEffectProps) => { - useAsciiEffect(props) - return <> -} - -export type HeroModelProps = React.HTMLAttributes & { - modelUrl: string - layout?: 'floating' | 'cropped' - renderer?: '3d' | 'ascii' - asciiConfig?: AsciiConfigs - initialZ?: number - initialX?: number - initialY?: number - rotateSpeed?: number - enableZoom?: boolean - enableRotateOnScroll?: boolean - withParallelEffect?: boolean -} - -function Box(props) { - // This reference will give us direct access to the mesh - const mesh = useRef() - // Set up state for the hovered and active state - const [hovered, setHover] = useState(false) - const [active, setActive] = useState(false) - // Subscribe this component to the render-loop, rotate the mesh every frame - useFrame((state, delta) => { - if (mesh && mesh.current){ - // @ts-ignore - return mesh.current.rotation.x += delta - } - }) - // Return view, these are regular three.js elements expressed in JSX - return ( - setActive(!active)} - onPointerOver={(event) => setHover(true)} - onPointerOut={(event) => setHover(false)}> - - - - ) -} -export const HeroModel: React.FC = ({}) => { - return ( - - - - - - - ) -} - -// export const HeroModel: React.FC = ({ -// layout = 'floating', -// renderer = '3d', -// modelUrl, -// className, -// children, -// asciiConfig, -// initialX, -// initialY, -// initialZ, -// rotateSpeed = ROTATE_SPEED, -// enableZoom, -// enableRotateOnScroll, -// withParallelEffect, -// ...props -// }) => { - const scrollY = useScrollY() - const initialPosition = useMemo(() => { - if (typeof window === 'undefined') return new THREE.Vector3(0, 0, 0) - if (renderer === 'ascii') { - return new THREE.Vector3( - initialX || random(MIN_X, MAX_X), - initialY || random(MIN_Y, MAX_Y), - 0, - ) - } - // if not ascii then use the max z - return new THREE.Vector3(3.1, initialY || random(MIN_Y, MAX_Y), 0) - }, [initialX, initialY, initialZ, renderer]) -// return ( -//
-
-// -// -// -// -// }> -// -// -// }> - - - - -// -// -// -// -// {!isTouchDevice() && } - {renderer === 'ascii' && ( - - )} -// -// -//
- -//
-// ) -// } - - */ -export default {}