diff --git a/example/index.html b/example/index.html index 90c9ff1..0ad96ae 100644 --- a/example/index.html +++ b/example/index.html @@ -8,6 +8,57 @@ +
+ +

STARTER SELECTION

+ +
+
+
+ +

Select option

+ + + + +
+
+
+ +
+
+ +
diff --git a/example/public/index.html b/example/public/index.html index 42ae2d2..16b054f 100644 --- a/example/public/index.html +++ b/example/public/index.html @@ -1,17 +1,16 @@ - - - - - - - - - - React App - + React App + - - -
- - - - \ No newline at end of file + + diff --git a/example/src/App.js b/example/src/App.js index b6dce62..e029473 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,8 +1,8 @@ import * as THREE from "three" import { Canvas, useFrame, useThree } from "@react-three/fiber" -import React, { Suspense, useCallback, useEffect, useRef, useContext } from "react" +import React, { Suspense, useCallback, useEffect, useRef, useContext, useState } from "react" import { ContactShadows, Text, Html } from "@react-three/drei" -import { A11y, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../" +import { A11y, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences } from "../../" import { ResizeObserver } from "@juggle/resize-observer" import { proxy, useProxy } from "valtio" import { EffectComposer, SSAO, SMAA } from "@react-three/postprocessing" @@ -17,21 +17,21 @@ const geometries = [ new THREE.IcosahedronBufferGeometry(1.5), ] -function ToggleButton(props) { - const a11y = useA11y() - return ( - - - - - ) -} +// function ToggleButton(props) { +// const a11y = useA11y() +// return ( +// +// +// +// +// ) +// } function SwitchButton(props) { const a11y = useA11y() return ( <> - + @@ -43,74 +43,80 @@ function SwitchButton(props) { ) } -function Floor(props) { - return ( - <> - - - - - - - ) -} +// function Floor(props) { +// return ( +// <> +// +// +// +// +// +// +// ) +// } -function Nav({ left }) { - const snap = useProxy(state) - const viewport = useThree(state => state.viewport) - const radius = Math.min(12, viewport.width / 2.5) - return ( - { - state.rotation = snap.rotation + ((Math.PI * 2) / 5) * (left ? -1 : 1) - state.active = left ? (snap.active === 0 ? 4 : snap.active - 1) : snap.active === 4 ? 0 : snap.active + 1 - }} - disabled={snap.disabled}> - - - ) -} +// function Nav({ left }) { +// const snap = useProxy(state) +// const viewport = useThree(state => state.viewport) +// const radius = Math.min(12, viewport.width / 2.5) +// return ( +// +// { +// state.rotation = snap.rotation + ((Math.PI * 2) / 5) * (left ? -1 : 1) +// state.active = left ? (snap.active === 0 ? 4 : snap.active - 1) : snap.active === 4 ? 0 : snap.active + 1 +// }} +// disabled={snap.disabled}> +// +// +// +// ) +// } -function Diamond({ position, rotation }) { - const a11y = useA11y() - return ( - - - - - ) -} +// function Diamond({ position, rotation }) { +// const a11y = useA11y() +// return ( +// +// +// +// +// ) +// } -function Shape({ index, active, ...props }) { - const snap = useProxy(state) - const vec = new THREE.Vector3() - const ref = useRef() - const { a11yPrefersState } = useUserPreferences() - useFrame((state, delta) => { - if (snap.disabled) { - return - } - if (a11yPrefersState.prefersReducedMotion) { - const s = active ? 2 : 1 - ref.current.scale.set(s, s, s) - ref.current.rotation.y = ref.current.rotation.x = active ? 1.5 : 4 - ref.current.position.y = 0 - } else { - const s = active ? 2 : 1 - ref.current.scale.lerp(vec.set(s, s, s), 0.1) - ref.current.rotation.y = ref.current.rotation.x += delta / (active ? 1.5 : 4) - ref.current.position.y = active ? Math.sin(state.clock.elapsedTime) / 2 : 0 - } - }) - return ( - - - - ) -} +// function Shape({ index, active, ...props }) { +// const snap = useProxy(state) +// const vec = new THREE.Vector3() +// const ref = useRef() +// const { a11yPrefersState } = useUserPreferences() +// useFrame((state, delta) => { +// if (snap.disabled) { +// return +// } +// if (a11yPrefersState.prefersReducedMotion) { +// const s = active ? 2 : 1 +// ref.current.scale.set(s, s, s) +// ref.current.rotation.y = ref.current.rotation.x = active ? 1.5 : 4 +// ref.current.position.y = 0 +// } else { +// const s = active ? 2 : 1 +// ref.current.scale.lerp(vec.set(s, s, s), 0.1) +// ref.current.rotation.y = ref.current.rotation.x += delta / (active ? 1.5 : 4) +// ref.current.position.y = active ? Math.sin(state.clock.elapsedTime) / 2 : 0 +// } +// }) +// return ( +// +// +// +// ) +// } // const ResponsiveText = () => { // const { viewport } = useThree() @@ -144,63 +150,61 @@ function Shape({ index, active, ...props }) { // ) // } -function Carroussel() { - const viewport = useThree(state => state.viewport) - const snap = useProxy(state) - const group = useRef() - const radius = Math.min(6, viewport.width / 5) - const { a11yPrefersState } = useUserPreferences() - useFrame(() => { - if (a11yPrefersState.prefersReducedMotion) { - group.current.rotation.y = snap.rotation - Math.PI / 2 - } else { - group.current.rotation.y = THREE.MathUtils.lerp(group.current.rotation.y, snap.rotation - Math.PI / 2, 0.1) - } - }) - return ( - - {["sphere", "pyramid", "donut", "octahedron", "icosahedron"].map((name, i) => ( - - ))} - - ) -} +// function Carroussel() { +// const viewport = useThree(state => state.viewport) +// const snap = useProxy(state) +// const group = useRef() +// const radius = Math.min(6, viewport.width / 5) +// const { a11yPrefersState } = useUserPreferences() +// useFrame(() => { +// if (a11yPrefersState.prefersReducedMotion) { +// group.current.rotation.y = snap.rotation - Math.PI / 2 +// } else { +// group.current.rotation.y = THREE.MathUtils.lerp(group.current.rotation.y, snap.rotation - Math.PI / 2, 0.1) +// } +// }) +// return ( +// +// {["sphere", "pyramid", "donut", "octahedron", "icosahedron"].map((name, i) => ( +// +// ))} +// +// ) +// } -const CarrousselAll = () => { - const snap = useProxy(state) +// const CarrousselAll = () => { +// const snap = useProxy(state) - return ( - <> - -