From 89f9f2561286c361684ac012cef0cf0b7c7c28e2 Mon Sep 17 00:00:00 2001 From: Marty McGee Date: Wed, 2 Oct 2024 05:54:25 -0700 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=A5=95=20v0.16.1-b2=20=F0=9F=8C=B1=20?= =?UTF-8?q?ThreeD:=20Character=20Animations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/threed/components/controls/LevaControls.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/lib/threed/components/controls/LevaControls.tsx b/src/lib/threed/components/controls/LevaControls.tsx index afd4a2211..7dde91e14 100644 --- a/src/lib/threed/components/controls/LevaControls.tsx +++ b/src/lib/threed/components/controls/LevaControls.tsx @@ -437,7 +437,16 @@ export function ThreeDLevaControls() { ) } -export const ThreeDLevaComponent = ({ projectName, setProjectName }) => { +export const ThreeDLevaComponent = ( + { + projectName, + setProjectName, + }: + { + projectName: string, + setProjectName: Function, + } +) => { // ** const word = `[MM] ThreeDLevaComponent @ ${new Date().toISOString()}` // ** From c17dba31ff38edf064937173fbd4344acf512ea0 Mon Sep 17 00:00:00 2001 From: Marty McGee Date: Wed, 2 Oct 2024 05:59:03 -0700 Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=A5=95=20v0.16.1-b2=20=F0=9F=8C=B1=20?= =?UTF-8?q?ThreeD:=20Character=20Animations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/controls/LevaControls.tsx | 65 ++++++++++--------- 1 file changed, 33 insertions(+), 32 deletions(-) diff --git a/src/lib/threed/components/controls/LevaControls.tsx b/src/lib/threed/components/controls/LevaControls.tsx index 7dde91e14..b781da9c9 100644 --- a/src/lib/threed/components/controls/LevaControls.tsx +++ b/src/lib/threed/components/controls/LevaControls.tsx @@ -441,47 +441,48 @@ export const ThreeDLevaComponent = ( { projectName, setProjectName, + projectNameFromLeva, + setProjectNameFromLeva, }: { projectName: string, setProjectName: Function, + projectNameFromLeva: string, + setProjectNameFromLeva: Function, } ) => { // ** const word = `[MM] ThreeDLevaComponent @ ${new Date().toISOString()}` // ** - // var [{ projectNameFromLeva }, set] = useControls( - // () => ( - // { - // // projectNameFromLeva: projectName, - // projectName: projectName, - // doAutoLoadData: doAutoLoadData, - // doAutoRotate: doAutoRotate, - // word: word, - // } - // ) - // ) - - // // ** onMount (on component loaded) - // useEffect(() => { - // // leva set store (from react state) - // set({ projectNameFromLeva: projectName }) - // // react set state - // setProjectName(projectName) - // // ** - // }, [projectName, set]) - // // }, [projectName]) - - // // console.debug('MyComponent') - // useEffect(() => { - // setProjectName(projectName) - // // console.debug('MyComponent onMount') - // // return () => { - // // console.debug('MyComponent onUnmount') - // // } - // }, [projectName]) - - // return
{projectNameFromLeva}: {projectName}
+ var [{ projectNameFromLeva }, set] = useControls( + () => ( + { + projectNameFromLeva: projectName, + projectName: projectName, + word: word, + } + ) + ) + + // ** onMount (on component loaded) + useEffect(() => { + // leva set store (from react state) + setProjectNameFromLeva(projectName) + // react set state + setProjectName(projectName) + // ** + }, [projectName]) + + // console.debug('MyComponent') + useEffect(() => { + setProjectName(projectName) + // console.debug('MyComponent onMount') + // return () => { + // console.debug('MyComponent onUnmount') + // } + }, [projectName]) + + return
{projectNameFromLeva}: {projectName}
} export default ThreeDLevaControls From d3d01d04d84e68ffee5135167378040379763c12 Mon Sep 17 00:00:00 2001 From: Marty McGee Date: Wed, 2 Oct 2024 06:57:47 -0700 Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=A5=95=20v0.16.1-b2=20=F0=9F=8C=B1=20?= =?UTF-8?q?ThreeD:=20Character=20Animations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/participate/page.tsx | 24 +++++++--- .../threed/components/controls/Controls.tsx | 28 ++++++++--- .../components/controls/LevaControls.tsx | 46 ++++++++++--------- src/lib/threed/{ => demos}/Demo-old.tsx | 0 src/lib/threed/{ => demos}/Demo.tsx | 0 src/lib/threed/{ => demos}/demo-b3.mm.js | 0 .../threed/{ThreeDGarden.tsx => threed.tsx} | 0 7 files changed, 63 insertions(+), 35 deletions(-) rename src/lib/threed/{ => demos}/Demo-old.tsx (100%) rename src/lib/threed/{ => demos}/Demo.tsx (100%) rename src/lib/threed/{ => demos}/demo-b3.mm.js (100%) rename src/lib/threed/{ThreeDGarden.tsx => threed.tsx} (100%) diff --git a/src/app/participate/page.tsx b/src/app/participate/page.tsx index 4775c2e99..c4ed28077 100644 --- a/src/app/participate/page.tsx +++ b/src/app/participate/page.tsx @@ -28,13 +28,16 @@ import { // import CardContent from '@mui/material/CardContent' // ** THREED GARDEN Imports -// import ThreeDGarden from '#/lib/threed/ThreeDGarden' -const ThreeDGarden = dynamic(() => import('#/lib/threed/ThreeDGarden'), { ssr: false }) +import ThreeD from '~/src/lib/threed/threed' +// const ThreeDGarden = dynamic(() => import('#/lib/threed/ThreeDGarden'), { ssr: false }) +// ** THREED CONTROLS Imports +// import ThreeDControls from '#/lib/threed/components/controls/Controls' +// const ThreeDControls = dynamic(() => import('#/lib/threed/components/controls/Controls'), { ssr: false }) // ** HELPER Imports // // import Spinner from '#/layout/ui/spinner' // ** HELPFUL UTIL: COLORFUL CONSOLE MESSAGES (ccm) -import ccm from '#/lib/utils/console-colors' +// import ccm from '#/lib/utils/console-colors' const ParticipatePage: TNextPageWithProps = (): JSX.Element => { // const ParticipatePage: TNextPageWithProps = async () => { @@ -75,11 +78,16 @@ const ParticipatePage: TNextPageWithProps = (): JSX.Element => { > {/* [MM] HEY HEY HEY -- ThreeDGarden Component */} - + + {/* */} + {/* */} {/* [MM] HEY HEY HEY -- End ThreeDGarden Component */} - {/* {ability?.can('read', 'analytics') && ( */} - {/* { + { )} - */} + + */} diff --git a/src/lib/threed/components/controls/Controls.tsx b/src/lib/threed/components/controls/Controls.tsx index 2fb5462cb..fc7b2c7da 100644 --- a/src/lib/threed/components/controls/Controls.tsx +++ b/src/lib/threed/components/controls/Controls.tsx @@ -1,7 +1,14 @@ -// @ts-no-check +// @ :) ts-no-check + +// THREED: COMPONENTS +// ** ThreeD: Garden +import ThreeDGarden from '~/src/lib/threed/threed' // ** ThreeD using Leva GUI -import { ThreeDLevaControls, ThreeDLevaComponent } from '#/lib/threed/components/controls/LevaControls' +import { + ThreeDLevaControls, + ThreeDLevaComponent, +} from '#/lib/threed/components/controls/LevaControls' // ** ThreeD using Apollo + React to View Control + Info Panels (Apollo Store/ReactiveVar/State Access) import ThreeDControlPanels from '#/lib/threed/components/controls/ControlPanels' @@ -10,16 +17,25 @@ import ThreeDControlPanels from '#/lib/threed/components/controls/ControlPanels' // ** ThreeD Toolbar import ThreeDToolbar from '#//lib/threed/components/controls/Toolbar' - - +// ** ThreeD : JSX Export +// export default const ThreeDControls = () => { // ** THREED CONTROL(S) - console.debug('THREED CONTROL(S)') + console.debug('THREED CONTROL[S]: ALL') return ( <> - {/*

ThreeD Controls

*/} + + + + (<>)} + projectNameFromLeva={'ThreeD: MM projectName'} + setProjectNameFromLeva={() => (<>)} + /> +

ThreeD Control[s]: All

) } diff --git a/src/lib/threed/components/controls/LevaControls.tsx b/src/lib/threed/components/controls/LevaControls.tsx index b781da9c9..c8d30995e 100644 --- a/src/lib/threed/components/controls/LevaControls.tsx +++ b/src/lib/threed/components/controls/LevaControls.tsx @@ -454,35 +454,37 @@ export const ThreeDLevaComponent = ( // ** const word = `[MM] ThreeDLevaComponent @ ${new Date().toISOString()}` // ** - var [{ projectNameFromLeva }, set] = useControls( - () => ( - { - projectNameFromLeva: projectName, - projectName: projectName, - word: word, - } - ) - ) + // const [{ projectNameFromLeva }, set] = useControls( + // () => ( + // { + // projectName: projectName, + // projectNameFromLeva: projectName, + // word: word, + // } + // ) + // ) // ** onMount (on component loaded) useEffect(() => { + // react set state + // setProjectName(projectName) + setProjectName(projectNameFromLeva) // leva set store (from react state) setProjectNameFromLeva(projectName) - // react set state - setProjectName(projectName) + // setProjectNameFromLeva(projectNameFromLeva) // ** - }, [projectName]) + }, [projectName, projectNameFromLeva]) - // console.debug('MyComponent') - useEffect(() => { - setProjectName(projectName) - // console.debug('MyComponent onMount') - // return () => { - // console.debug('MyComponent onUnmount') - // } - }, [projectName]) - - return
{projectNameFromLeva}: {projectName}
+ return ( + <> +
+ {projectNameFromLeva}: {projectName} +
+
+ {projectName}: {projectNameFromLeva} +
+ + ) } export default ThreeDLevaControls diff --git a/src/lib/threed/Demo-old.tsx b/src/lib/threed/demos/Demo-old.tsx similarity index 100% rename from src/lib/threed/Demo-old.tsx rename to src/lib/threed/demos/Demo-old.tsx diff --git a/src/lib/threed/Demo.tsx b/src/lib/threed/demos/Demo.tsx similarity index 100% rename from src/lib/threed/Demo.tsx rename to src/lib/threed/demos/Demo.tsx diff --git a/src/lib/threed/demo-b3.mm.js b/src/lib/threed/demos/demo-b3.mm.js similarity index 100% rename from src/lib/threed/demo-b3.mm.js rename to src/lib/threed/demos/demo-b3.mm.js diff --git a/src/lib/threed/ThreeDGarden.tsx b/src/lib/threed/threed.tsx similarity index 100% rename from src/lib/threed/ThreeDGarden.tsx rename to src/lib/threed/threed.tsx From 4b85534008460f75eafbcb0ca5e07dd8ebafe52a Mon Sep 17 00:00:00 2001 From: Marty McGee Date: Wed, 2 Oct 2024 07:20:47 -0700 Subject: [PATCH 4/7] =?UTF-8?q?=F0=9F=A5=95=20v0.16.1-b2=20=F0=9F=8C=B1=20?= =?UTF-8?q?ThreeD:=20Character=20Animations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/participate/page.tsx | 15 +++++++++------ .../threed/{components/controls => }/Controls.tsx | 0 .../threed/components/controls/LevaControls.tsx | 4 ++-- src/lib/threed/threed.tsx | 2 +- 4 files changed, 12 insertions(+), 9 deletions(-) rename src/lib/threed/{components/controls => }/Controls.tsx (100%) diff --git a/src/app/participate/page.tsx b/src/app/participate/page.tsx index c4ed28077..50215d972 100644 --- a/src/app/participate/page.tsx +++ b/src/app/participate/page.tsx @@ -27,15 +27,18 @@ import { // import Typography from '@mui/material/Typography' // import CardContent from '@mui/material/CardContent' -// ** THREED GARDEN Imports -import ThreeD from '~/src/lib/threed/threed' +// ** THREED Imports +// import ThreeD from '~/src/lib/threed/threed' +const ThreeD = dynamic(() => import('#/lib/threed/threed'), { ssr: false }) +// import ThreeDControls from '~/src/lib/threed/Controls' +// const ThreeDControls = dynamic(() => import('#/lib/threed/Controls'), { ssr: false }) +// import ThreeDGarden from '~/src/lib/threed/ThreeDGarden' // const ThreeDGarden = dynamic(() => import('#/lib/threed/ThreeDGarden'), { ssr: false }) -// ** THREED CONTROLS Imports // import ThreeDControls from '#/lib/threed/components/controls/Controls' // const ThreeDControls = dynamic(() => import('#/lib/threed/components/controls/Controls'), { ssr: false }) // ** HELPER Imports -// // import Spinner from '#/layout/ui/spinner' +import Spinner from '#/layout/ui/spinner' // ** HELPFUL UTIL: COLORFUL CONSOLE MESSAGES (ccm) // import ccm from '#/lib/utils/console-colors' @@ -70,7 +73,7 @@ const ParticipatePage: TNextPageWithProps = (): JSX.Element => { return ( <> - {/* }> */} + }> { - {/* */} + ) } diff --git a/src/lib/threed/components/controls/Controls.tsx b/src/lib/threed/Controls.tsx similarity index 100% rename from src/lib/threed/components/controls/Controls.tsx rename to src/lib/threed/Controls.tsx diff --git a/src/lib/threed/components/controls/LevaControls.tsx b/src/lib/threed/components/controls/LevaControls.tsx index c8d30995e..8c7dfdee1 100644 --- a/src/lib/threed/components/controls/LevaControls.tsx +++ b/src/lib/threed/components/controls/LevaControls.tsx @@ -477,12 +477,12 @@ export const ThreeDLevaComponent = ( return ( <> -
+ {/*
{projectNameFromLeva}: {projectName}
{projectName}: {projectNameFromLeva} -
+
*/} ) } diff --git a/src/lib/threed/threed.tsx b/src/lib/threed/threed.tsx index b8e35b9bc..f97192903 100644 --- a/src/lib/threed/threed.tsx +++ b/src/lib/threed/threed.tsx @@ -91,7 +91,7 @@ import ThreeDCanvasViewer from '#/lib/threed/components/canvas/CanvasViewer' // import { ThreeDEnvironment } from '#/lib/threed/components/canvas/Canvas' // ** ThreeD Controls Imports -import ThreeDControls from '#/lib/threed/components/controls/Controls' +import ThreeDControls from '~/src/lib/threed/Controls' // // ** ThreeD using Leva GUI // import { ThreeDLevaControls, ThreeDLevaComponent } from '#/lib/threed/components/controls/LevaControls' From bd2c3948745edc266483d3262ffdb3914b581175 Mon Sep 17 00:00:00 2001 From: Marty McGee Date: Wed, 2 Oct 2024 07:38:26 -0700 Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=A5=95=20v0.16.1-b2=20=F0=9F=8C=B1=20?= =?UTF-8?q?ThreeD:=20Character=20Animations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/participate/page.tsx | 4 +- src/lib/threed/Controls.tsx | 43 --- src/lib/threed/ThreeDGarden.tsx | 612 ++++++++++++++++++++++++++++++ src/lib/threed/threed.tsx | 633 ++------------------------------ 4 files changed, 647 insertions(+), 645 deletions(-) delete mode 100644 src/lib/threed/Controls.tsx create mode 100644 src/lib/threed/ThreeDGarden.tsx diff --git a/src/app/participate/page.tsx b/src/app/participate/page.tsx index 50215d972..73d59f6c9 100644 --- a/src/app/participate/page.tsx +++ b/src/app/participate/page.tsx @@ -28,8 +28,8 @@ import { // import CardContent from '@mui/material/CardContent' // ** THREED Imports -// import ThreeD from '~/src/lib/threed/threed' -const ThreeD = dynamic(() => import('#/lib/threed/threed'), { ssr: false }) +import ThreeD from '~/src/lib/threed/threed' +// const ThreeD = dynamic(() => import('#/lib/threed/threed'), { ssr: false }) // import ThreeDControls from '~/src/lib/threed/Controls' // const ThreeDControls = dynamic(() => import('#/lib/threed/Controls'), { ssr: false }) // import ThreeDGarden from '~/src/lib/threed/ThreeDGarden' diff --git a/src/lib/threed/Controls.tsx b/src/lib/threed/Controls.tsx deleted file mode 100644 index fc7b2c7da..000000000 --- a/src/lib/threed/Controls.tsx +++ /dev/null @@ -1,43 +0,0 @@ -// @ :) ts-no-check - -// THREED: COMPONENTS -// ** ThreeD: Garden -import ThreeDGarden from '~/src/lib/threed/threed' - -// ** ThreeD using Leva GUI -import { - ThreeDLevaControls, - ThreeDLevaComponent, -} from '#/lib/threed/components/controls/LevaControls' - -// ** ThreeD using Apollo + React to View Control + Info Panels (Apollo Store/ReactiveVar/State Access) -import ThreeDControlPanels from '#/lib/threed/components/controls/ControlPanels' -// const ThreeDControlPanels = dynamic(() => import('#/lib/threed/components/controls/ControlPanels'), { ssr: false }) - -// ** ThreeD Toolbar -import ThreeDToolbar from '#//lib/threed/components/controls/Toolbar' - -// ** ThreeD : JSX Export -// export default -const ThreeDControls = () => { - - // ** THREED CONTROL(S) - console.debug('THREED CONTROL[S]: ALL') - return ( - <> - - - - - (<>)} - projectNameFromLeva={'ThreeD: MM projectName'} - setProjectNameFromLeva={() => (<>)} - /> -

ThreeD Control[s]: All

- - ) -} - -export default ThreeDControls diff --git a/src/lib/threed/ThreeDGarden.tsx b/src/lib/threed/ThreeDGarden.tsx new file mode 100644 index 000000000..73ed55d5a --- /dev/null +++ b/src/lib/threed/ThreeDGarden.tsx @@ -0,0 +1,612 @@ +'use client' +// ^ needs the 'use client' pragma (inheriting from parent page) +// ============================================================== +// ** RESOURCES + +// ** NEXT Imports +// import dynamic from 'next/dynamic' +// import Image from 'next/image' + +// ** NEXT AUTH Imports +// hint: const { data, data: session, status } = useSession() +import { useSession } from 'next-auth/react' + +// ** REACT Imports +import { + useEffect, + // useRef, + useState, + // useCallback, + // ReactNode, + // FC, + // Suspense, + PointerEventHandler, + SyntheticEvent, +} from 'react' + +// ** APOLLO Imports +// ** Apollo Client 3 -- State Management using Cache/Store (via GraphQL) +// import { ApolloProvider } from '@apollo/client' +// import { ApolloConsumer } from '@apollo/client' +import { useApolloClient } from '@apollo/client' +import { useReactiveVar } from '@apollo/client' +// import { getApolloClient, getApolloContext } from '@apollo/client' +// import GetPreferences from '#/lib/api/graphql/scripts/getPreferences.gql' +// import GetProjects from '#/lib/api/graphql/scripts/getProjects.gql' +// import { +// // ApolloLink, +// // HttpLink, +// getApolloContext +// } from '@apollo/client' +import { + useQuery, + useSuspenseQuery, + useBackgroundQuery, + useReadQuery, + useFragment +} from '@apollo/experimental-nextjs-app-support/ssr' +// import stores from '#/lib/stores/apollo' +// import { stores, queries, mutations } from '#/lib/stores/apollo' +import { + // stores, + preferencesStore, + projectStore, + // queries, + // mutations, + // reactive vars: + isPreferencesSetVar, + preferencesDataVar, +} from '#/lib/stores/apollo' + +// ** RADIX-UI Imports +import { + Box, + Button, + Grid, + Flex, + Text, +} from '@radix-ui/themes' +// ** MUI Imports +// import { styled } from '@mui/material/styles' +// mui: ui +// import Typography from '@mui/material/Typography' +// import Box from '@mui/material/Box' +// import Button from '@mui/material/Button' +// import MuiButton from '@mui/material/Button' +// import Grid from '@mui/material/Grid' +// import MDTabPanel, { tabProps } from '#/lib/mui/MDTabPanel' + + +// ** THREE JS Imports (not here, use R3F) +import * as THREE from 'three' +// ** Three JS Loading Progress +// import { Html, Loader, useProgress } from '@react-three/drei' + +// ** ThreeD r3f Canvas Imports +import ThreeDCanvasViewer from '#/lib/threed/components/canvas/CanvasViewer' +// const ThreeDCanvasViewer = dynamic(() => import('#/lib/threed/components/canvas/CanvasViewer'), { ssr: false }) +// import { Canvas } from '@react-three/fiber' +// import { ThreeDCanvasViewer } from '#/lib/threed/components/canvas/Canvas' +// import { ThreeDCanvas } from '#/lib/threed/components/canvas/Canvas' +// import { ThreeDEnvironment } from '#/lib/threed/components/canvas/Canvas' + +// ** ThreeD Controls Imports +// import ThreeDControls from '~/src/lib/threed/Controls' + +// // ** ThreeD using Leva GUI +// import { ThreeDLevaControls, ThreeDLevaComponent } from '#/lib/threed/components/controls/LevaControls' + +// // ** ThreeD using Apollo + React to View Control + Info Panels (Apollo Store/ReactiveVar/State Access) +// import ThreeDControlPanels from '#/lib/threed/components/controls/ControlPanels' +// // const ThreeDControlPanels = dynamic(() => import('#/lib/threed/components/controls/ControlPanels'), { ssr: false }) + +// // ** ThreeD Toolbar +// import ThreeDToolbar from '#//lib/threed/components/controls/Toolbar' + + + + +// ** ThreeD Modal Imports +// import ThreeDModals from '#/lib/threed/components/modals/Modals' + +// ** ThreeD View Imports +import ThreeDViews from '#/lib/threed/components/views/ViewsFurniture' +// import ThreeDViews from '#/lib/threed/components/views/ViewsPools' +// import ThreeDViews from '#/lib/threed/components/views/ViewsCities' + +// ** ThreeD Joystick Imports +import { EcctrlJoystick } from '#/lib/ecctrl/src/EcctrlJoystick' + +// ** CSS Styles Imports +// import stylesDemo from '#/layout/ui/styles/demo/demo.module.css' + +// ** Paper Imports (DEPRECATED -- requires jQuery) +// import paper from 'paper' + +// ** jQuery Imports (DEPRECATED -- no no no, never again) +// import * as $ from 'jquery' + +// ** FARMBOT Imports +// import ThreeDFarmBot from '#/lib/farmbot/FarmBot' +// const ThreeDFarmBot = dynamic(() => import('#/lib/farmbot/FarmBot'), { ssr: false }) +// const ThreeDFarmBotMain = dynamic(() => import('#/lib/threed/threed-farmbot/main'), { ssr: false }) + +// ** HELPER Components +import Spinner from '#/layout/ui/spinner' +// ** HELPFUL UTIL: COLORFUL CONSOLE MESSAGES (ccm) +import ccm from '#/lib/utils/console-colors' + +// ========================================================== +// IMPORTS COMPLETE +// ========================================================== + +// DEBUG PREFERENCES FOR THIS MODULE +const debug: boolean = false +const DEBUG: boolean = true + +// const appVersion: string = 'v0.16.1' +const appVersion: string = require('package.json').version + +if (debug || DEBUG) { + console.debug('%c🥕 ThreeDGarden: {.tsx}', ccm.green) + console.debug('%c🌱 appVersion', ccm.darkgreen, appVersion) + console.debug(`%c====================================`, ccm.darkgreen) +} + +// ========================================================== +// TS INTERFACES + TYPES +// ========================================================== + +interface IPostData { + plugin_name: string + plugin_version: string + plugin_url: string + api_gql_url: string + api_rest_url: string + theme: 'dark' | 'light' + world_id: number | string + scene_id: number | string +} + +interface IThreeDEnv { + pluginName: string + pluginVersion: string + pluginURL: string + apiGqlUrl: string + apiRestUrl: string + theme: 'light' | 'dark' + worldID: number | string + sceneID: number | string +} + +interface IPlayer { + action: string + actionTime: number | Date + object: THREE.Object3D + mixer: THREE.AnimationMixer + setAction: Function + getAction: Function + toggleAnimation: Function + move: Function + movePlayer: Function + playerControl: Function +} + +// ========================================================== +// VARIABLES +// ========================================================== + +// IF CLIENT BROWSER HAS A WINDOW OBJECT... (NOT SERVER SSR) +// if (typeof window != undefined) { +// console.debug('[MM] HEY HEY HEY window', window) +// // TESTING PARAMETERS FROM SERVER (PHP) +// // const postdata = window?.postdata ? window.postdata : {} +// // console.debug(postdata) +// } + +const postdata: IPostData = { + plugin_name: 'ThreeD Garden', + plugin_version: appVersion, + plugin_url: 'https://threed.design/', + api_gql_url: 'https://threed.design/graphql/', + api_rest_url: 'https://threed.design/wp-json/wp/v2/', + theme: 'dark', // dark | light + world_id: 0, // default + scene_id: 0, // default +} + +const env: IThreeDEnv = { + pluginName: postdata.plugin_name, + pluginVersion: postdata.plugin_version, + pluginURL: postdata.plugin_url, + apiGqlUrl: postdata.api_gql_url, + apiRestUrl: postdata.api_rest_url, + theme: postdata.theme, + worldID: postdata.world_id, + sceneID: postdata.scene_id, +} + +if (debug) { + console.debug('%c🌱 api plugin:', ccm.darkgreen, env.pluginName, env.pluginVersion, postdata) + console.debug('postdata', postdata) + console.debug(`%c====================================`, ccm.darkgreen) +} + +// ========================================================== +// FUNCTIONAL STORES + NOUNS +// ========================================================== +// ========================================================== +// COMPONENTS + +// ** HTML Modal Windows +// const { +// ModalAbout, +// ModalLoading, +// ModalModel3d, +// ModalShare +// } = ThreeDModals + +// ** Views +const { + CatalogView, + PlanView, + PropertiesView, + TheBottom +} = ThreeDViews + +// ========================================================== + +// const ThreeDGarden = ({ session }: { session: Session | null }): JSX.Element => { +// const ThreeDGarden = ({...props}): JSX.Element => { +// const ThreeDGarden = ({threedData}): JSX.Element => { +// const ThreeDGarden = (): JSX.Element => { +const ThreeDGarden = (): React.ReactNode => { + // ** + // ========================================================== + // ** TESTING: JSX + // return + + // ========================================================== + // ** LOCAL VARS + // const word: string = `[MM] HEY HEY HEY @ ${new Date().toISOString()}` + + // ========================================================== + // ** HOOKS + + // ** USE SESSION + // const { data, status } = useSession() + const { data: sessionData, status: sessionStatus } = useSession() + // console.debug('useSession().data', sessionData) + // console.debug('useSession().status', sessionStatus) + + // ** USE CLIENT + const client = useApolloClient() + // console.debug('%c🦆 useApolloClient()', ccm.orangeAlert) // , client + + // ** USE PREFERENCES + // const prefs = preferencesDataVar() // NO + const prefs = useReactiveVar(preferencesDataVar) // YES !! + // console.debug('%c⚙️ ThreeDGarden prefs', ccm.orangeAlert) // , prefs + + // ** INIT PREFERENCES + const [isThreeDGardenLoaded, setIsThreeDGardenLoaded] = useState(false) + const [isPrefsLoaded, setIsPrefsLoaded] = useState(useReactiveVar(isPreferencesSetVar)) + + // ========================================================== + // Component onMount hook + // ** + useEffect(() => { + + if (!isThreeDGardenLoaded && !isPrefsLoaded) { + + // ** GET PREFERENCES + const fetchData = async () => { + try { + // ** GET PREFERENCES + if (!isPrefsLoaded) { + // ** + // const preferencesFromDataSource = await preferencesStore.actions.loadFromDataSource(client) + const preferencesFromDataSource = await preferencesStore.actions.loadFromDB(client) + if (DEBUG) + console.debug('%c preferences loading...', ccm.greenAlert) + if (preferencesFromDataSource) { + if (DEBUG) + console.debug('%c preferencesFromDataSource', ccm.greenAlert) + } + } + + const loadPreferencesOne = await preferencesStore.store.get('one') + // const loadPreferencesOne = await preferencesStore.store.useStore('one') + // console.debug('%c🦆 APOLLO STORE: get one preferences => loadPreferencesOne', ccm.redAlert, loadPreferencesOne) + preferencesDataVar(loadPreferencesOne.data) + // console.debug('%c🦆 APOLLO STORE: FETCH preferencesDataVar()', ccm.redAlert, preferencesDataVar()) + isPreferencesSetVar(true) + setIsPrefsLoaded(isPreferencesSetVar()) + // console.debug('%c🦆 APOLLO STORE: FETCH isPreferencesSetVar()', ccm.redAlert, isPreferencesSetVar()) + if (preferencesDataVar().doAutoLoadData) { + // const projectsFromDataSource = await projectStore.actions.loadFromDataSource(client) + const projectsFromDataSource = await projectStore.actions.loadFromDB(client) + if (DEBUG) + console.debug('%c projects loading...', ccm.orangeAlert) + if (projectsFromDataSource) { + // console.debug('%c🥕 projectsFromDataSource', ccm.redAlert) + // ** TODO + // ** do more tasks here ?? + } + } + + // ** READY TO GO ??? + setIsThreeDGardenLoaded(true) + + } catch (error) { + console.error('Error fetching data:', error); + } + } + fetchData() + if (DEBUG) + console.debug('%c fetching data ...', ccm.blue) + + + // ** LOAD NOUN FROM WP API VIA APOLLO INTO R3F + LEVA (+ VALTIO) + const loadNounData = (_type: string = 'project', threeds: any = []) => { + // load these threeds into r3f canvas + if (DEBUG || debug) + console.debug('%c🌱 ThreeDGarden loadNounData()', ccm.yellowAlert, _type, threeds) + if (_type === 'project') { + projectStore.actions.loadToCanvas(threeds, '_r3fCanvas1') + } + // return true // true + } + + } else if (isThreeDGardenLoaded) { + console.debug('%c🦆 ThreeDGarden => LOADED !!', ccm.greenAlert, isThreeDGardenLoaded) + } else { + // console.debug('%c🦆 ThreeDGarden => APOLLO STORE: preferencesDataVar()', ccm.redAlert, preferencesDataVar()) + } + + }, []) // useEffect + + // ========================================================== + // ** USE CONTEXT + // const abilities = useContext(AbilityContext) + // const abilities = ['read', 'write', 'delete'] + + // ========================================================== + + if (DEBUG || debug) + console.debug('%c🌱 ThreeDGarden mounting ...', ccm.darkgreenAlert) + + + let project_title = 'NOT EVEN CLOSE' + if (DEBUG || debug) + console.debug('%c🌱 ThreeDGarden mounting ...', ccm.darkgreen, project_title) + + + + + + const EcctrlJoystickControls = () => { + const [isTouchScreen, setIsTouchScreen] = useState(false) + useEffect(() => { + // Check if using a touch control device, show/hide joystick + if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0)) { + setIsTouchScreen(true) + } else { + setIsTouchScreen(false) + } + }, []) + return ( + <> + { isTouchScreen && + + } + + ) + } + + + + // ========================================================== + // ** RETURN JSX + return ( + + + {/* [MM] HEY HEY HEY */} + {/* {project_title} */} + {/* [MM] HEY HEY HEY */} + + { !isThreeDGardenLoaded && !isPrefsLoaded && ( + <> + LOADING... + + + + )} + + { isThreeDGardenLoaded && isPrefsLoaded && ( + + + + {/* THREED CONTROLS: ALL */} + + {/* */} + + {/* THREED CONTROLS: LEVA GUI + CUSTOMIZED */} + {/* + + */} + {/* END THREED CONTROLS: LEVA GUI + CUSTOMIZED */} + + {/* THREED CLICK LOADERS */} + {/* + + + + + + */} + {/* END THREED CLICK LOADERS */} + + + {/* END: THREED CONTROLS: ALL */} + + {/* THREED TOOLBAR */} + + {/* */} + + {/* END: THREED TOOLBAR */} + + {/* THREED CANVAS VIEWER */} + + + + {/* END: THREED CANVAS VIEWER */} + + {/* THREED CONTROL PANELS */} + {/* -- STORE ACCESS (apollo, zustand, valtio, leva) */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* END: THREED CONTROL PANELS */} + + {/* THREED VIEWS */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* END: THREED VIEWS */} + + {/* THREED MODALS */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* END: THREED MODALS */} + + {/* THREED FARMBOT */} + {/* */} + {/* */} + {/* */} + {/* END: THREED FARMBOT */} + + {/* THREED JOYSTICK */} + + {/* CHARACTER CONTROL JOYSTICK */} + {/* */} + {/* */} + + + + {/* END: THREED JOYSTICK */} + + + + )} + + ) +} + +// const ThreeDGarden_UseClient = dynamic(() => Promise.resolve(ThreeDGarden), { +// ssr: false +// }) +// export default ThreeDGarden_UseClient +export default ThreeDGarden diff --git a/src/lib/threed/threed.tsx b/src/lib/threed/threed.tsx index f97192903..ecf5e54b6 100644 --- a/src/lib/threed/threed.tsx +++ b/src/lib/threed/threed.tsx @@ -1,612 +1,45 @@ -// 'use client' -// ^ needs the 'use client' pragma (inheriting from parent page) -// ============================================================== -// ** RESOURCES +// @ :) ts-no-check -// ** NEXT Imports -// import dynamic from 'next/dynamic' -// import Image from 'next/image' +// THREED: this -// ** NEXT AUTH Imports -// hint: const { data, data: session, status } = useSession() -import { useSession } from 'next-auth/react' +// THREED: COMPONENTS +// ** ThreeD: Garden +import ThreeDGarden from '~/src/lib/threed/ThreeDGarden' -// ** REACT Imports -import { - useEffect, - // useRef, - useState, - // useCallback, - // ReactNode, - // FC, - // Suspense, - PointerEventHandler, - SyntheticEvent, -} from 'react' - -// ** APOLLO Imports -// ** Apollo Client 3 -- State Management using Cache/Store (via GraphQL) -// import { ApolloProvider } from '@apollo/client' -// import { ApolloConsumer } from '@apollo/client' -import { useApolloClient } from '@apollo/client' -import { useReactiveVar } from '@apollo/client' -// import { getApolloClient, getApolloContext } from '@apollo/client' -// import GetPreferences from '#/lib/api/graphql/scripts/getPreferences.gql' -// import GetProjects from '#/lib/api/graphql/scripts/getProjects.gql' -// import { -// // ApolloLink, -// // HttpLink, -// getApolloContext -// } from '@apollo/client' -import { - useQuery, - useSuspenseQuery, - useBackgroundQuery, - useReadQuery, - useFragment -} from '@apollo/experimental-nextjs-app-support/ssr' -// import stores from '#/lib/stores/apollo' -// import { stores, queries, mutations } from '#/lib/stores/apollo' -import { - // stores, - preferencesStore, - projectStore, - // queries, - // mutations, - // reactive vars: - isPreferencesSetVar, - preferencesDataVar, -} from '#/lib/stores/apollo' - -// ** RADIX-UI Imports +// ** ThreeD using Leva GUI import { - Box, - Button, - Grid, - Flex, - Text, -} from '@radix-ui/themes' -// ** MUI Imports -// import { styled } from '@mui/material/styles' -// mui: ui -// import Typography from '@mui/material/Typography' -// import Box from '@mui/material/Box' -// import Button from '@mui/material/Button' -// import MuiButton from '@mui/material/Button' -// import Grid from '@mui/material/Grid' -// import MDTabPanel, { tabProps } from '#/lib/mui/MDTabPanel' - - -// ** THREE JS Imports (not here, use R3F) -import * as THREE from 'three' -// ** Three JS Loading Progress -// import { Html, Loader, useProgress } from '@react-three/drei' - -// ** ThreeD r3f Canvas Imports -import ThreeDCanvasViewer from '#/lib/threed/components/canvas/CanvasViewer' -// const ThreeDCanvasViewer = dynamic(() => import('#/lib/threed/components/canvas/CanvasViewer'), { ssr: false }) -// import { Canvas } from '@react-three/fiber' -// import { ThreeDCanvasViewer } from '#/lib/threed/components/canvas/Canvas' -// import { ThreeDCanvas } from '#/lib/threed/components/canvas/Canvas' -// import { ThreeDEnvironment } from '#/lib/threed/components/canvas/Canvas' - -// ** ThreeD Controls Imports -import ThreeDControls from '~/src/lib/threed/Controls' - -// // ** ThreeD using Leva GUI -// import { ThreeDLevaControls, ThreeDLevaComponent } from '#/lib/threed/components/controls/LevaControls' - -// // ** ThreeD using Apollo + React to View Control + Info Panels (Apollo Store/ReactiveVar/State Access) -// import ThreeDControlPanels from '#/lib/threed/components/controls/ControlPanels' -// // const ThreeDControlPanels = dynamic(() => import('#/lib/threed/components/controls/ControlPanels'), { ssr: false }) - -// // ** ThreeD Toolbar -// import ThreeDToolbar from '#//lib/threed/components/controls/Toolbar' - - - - -// ** ThreeD Modal Imports -// import ThreeDModals from '#/lib/threed/components/modals/Modals' - -// ** ThreeD View Imports -import ThreeDViews from '#/lib/threed/components/views/ViewsFurniture' -// import ThreeDViews from '#/lib/threed/components/views/ViewsPools' -// import ThreeDViews from '#/lib/threed/components/views/ViewsCities' - -// ** ThreeD Joystick Imports -import { EcctrlJoystick } from '#/lib/ecctrl/src/EcctrlJoystick' - -// ** CSS Styles Imports -// import stylesDemo from '#/layout/ui/styles/demo/demo.module.css' - -// ** Paper Imports (DEPRECATED -- requires jQuery) -// import paper from 'paper' - -// ** jQuery Imports (DEPRECATED -- no no no, never again) -// import * as $ from 'jquery' - -// ** FARMBOT Imports -// import ThreeDFarmBot from '#/lib/farmbot/FarmBot' -// const ThreeDFarmBot = dynamic(() => import('#/lib/farmbot/FarmBot'), { ssr: false }) -// const ThreeDFarmBotMain = dynamic(() => import('#/lib/threed/threed-farmbot/main'), { ssr: false }) - -// ** HELPER Components -import Spinner from '#/layout/ui/spinner' -// ** HELPFUL UTIL: COLORFUL CONSOLE MESSAGES (ccm) -import ccm from '#/lib/utils/console-colors' - -// ========================================================== -// IMPORTS COMPLETE -// ========================================================== - -// DEBUG PREFERENCES FOR THIS MODULE -const debug: boolean = false -const DEBUG: boolean = true - -// const appVersion: string = 'v0.16.1' -const appVersion: string = require('package.json').version - -if (debug || DEBUG) { - console.debug('%c🥕 ThreeDGarden: {.tsx}', ccm.green) - console.debug('%c🌱 appVersion', ccm.darkgreen, appVersion) - console.debug(`%c====================================`, ccm.darkgreen) -} - -// ========================================================== -// TS INTERFACES + TYPES -// ========================================================== - -interface IPostData { - plugin_name: string - plugin_version: string - plugin_url: string - api_gql_url: string - api_rest_url: string - theme: 'dark' | 'light' - world_id: number | string - scene_id: number | string -} - -interface IThreeDEnv { - pluginName: string - pluginVersion: string - pluginURL: string - apiGqlUrl: string - apiRestUrl: string - theme: 'light' | 'dark' - worldID: number | string - sceneID: number | string -} - -interface IPlayer { - action: string - actionTime: number | Date - object: THREE.Object3D - mixer: THREE.AnimationMixer - setAction: Function - getAction: Function - toggleAnimation: Function - move: Function - movePlayer: Function - playerControl: Function -} - -// ========================================================== -// VARIABLES -// ========================================================== - -// IF CLIENT BROWSER HAS A WINDOW OBJECT... (NOT SERVER SSR) -// if (typeof window != undefined) { -// console.debug('[MM] HEY HEY HEY window', window) -// // TESTING PARAMETERS FROM SERVER (PHP) -// // const postdata = window?.postdata ? window.postdata : {} -// // console.debug(postdata) -// } - -const postdata: IPostData = { - plugin_name: 'ThreeD Garden', - plugin_version: appVersion, - plugin_url: 'https://threed.design/', - api_gql_url: 'https://threed.design/graphql/', - api_rest_url: 'https://threed.design/wp-json/wp/v2/', - theme: 'dark', // dark | light - world_id: 0, // default - scene_id: 0, // default -} - -const env: IThreeDEnv = { - pluginName: postdata.plugin_name, - pluginVersion: postdata.plugin_version, - pluginURL: postdata.plugin_url, - apiGqlUrl: postdata.api_gql_url, - apiRestUrl: postdata.api_rest_url, - theme: postdata.theme, - worldID: postdata.world_id, - sceneID: postdata.scene_id, -} - -if (debug) { - console.debug('%c🌱 api plugin:', ccm.darkgreen, env.pluginName, env.pluginVersion, postdata) - console.debug('postdata', postdata) - console.debug(`%c====================================`, ccm.darkgreen) -} + ThreeDLevaControls, + ThreeDLevaComponent, +} from '#/lib/threed/components/controls/LevaControls' -// ========================================================== -// FUNCTIONAL STORES + NOUNS -// ========================================================== -// ========================================================== -// COMPONENTS +// ** ThreeD using Apollo + React to View Control + Info Panels (Apollo Store/ReactiveVar/State Access) +import ThreeDControlPanels from '#/lib/threed/components/controls/ControlPanels' +// const ThreeDControlPanels = dynamic(() => import('#/lib/threed/components/controls/ControlPanels'), { ssr: false }) -// ** HTML Modal Windows -// const { -// ModalAbout, -// ModalLoading, -// ModalModel3d, -// ModalShare -// } = ThreeDModals +// ** ThreeD Toolbar +import ThreeDToolbar from '#/lib/threed/components/controls/Toolbar' -// ** Views -const { - CatalogView, - PlanView, - PropertiesView, - TheBottom -} = ThreeDViews +// ** ThreeD : JSX Export +// export default +const ThreeDControls = () => { -// ========================================================== - -// const ThreeDGarden = ({ session }: { session: Session | null }): JSX.Element => { -// const ThreeDGarden = ({...props}): JSX.Element => { -// const ThreeDGarden = ({threedData}): JSX.Element => { -// const ThreeDGarden = (): JSX.Element => { -const ThreeDGarden = (): React.ReactNode => { - // ** - // ========================================================== - // ** TESTING: JSX - // return - - // ========================================================== - // ** LOCAL VARS - // const word: string = `[MM] HEY HEY HEY @ ${new Date().toISOString()}` - - // ========================================================== - // ** HOOKS - - // ** USE SESSION - // const { data, status } = useSession() - const { data: sessionData, status: sessionStatus } = useSession() - // console.debug('useSession().data', sessionData) - // console.debug('useSession().status', sessionStatus) - - // ** USE CLIENT - const client = useApolloClient() - // console.debug('%c🦆 useApolloClient()', ccm.orangeAlert) // , client - - // ** USE PREFERENCES - // const prefs = preferencesDataVar() // NO - const prefs = useReactiveVar(preferencesDataVar) // YES !! - // console.debug('%c⚙️ ThreeDGarden prefs', ccm.orangeAlert) // , prefs - - // ** INIT PREFERENCES - const [isThreeDGardenLoaded, setIsThreeDGardenLoaded] = useState(false) - const [isPrefsLoaded, setIsPrefsLoaded] = useState(useReactiveVar(isPreferencesSetVar)) - - // ========================================================== - // Component onMount hook - // ** - useEffect(() => { - - if (!isThreeDGardenLoaded && !isPrefsLoaded) { - - // ** GET PREFERENCES - const fetchData = async () => { - try { - // ** GET PREFERENCES - if (!isPrefsLoaded) { - // ** - // const preferencesFromDataSource = await preferencesStore.actions.loadFromDataSource(client) - const preferencesFromDataSource = await preferencesStore.actions.loadFromDB(client) - if (DEBUG) - console.debug('%c preferences loading...', ccm.greenAlert) - if (preferencesFromDataSource) { - if (DEBUG) - console.debug('%c preferencesFromDataSource', ccm.greenAlert) - } - } - - const loadPreferencesOne = await preferencesStore.store.get('one') - // const loadPreferencesOne = await preferencesStore.store.useStore('one') - // console.debug('%c🦆 APOLLO STORE: get one preferences => loadPreferencesOne', ccm.redAlert, loadPreferencesOne) - preferencesDataVar(loadPreferencesOne.data) - // console.debug('%c🦆 APOLLO STORE: FETCH preferencesDataVar()', ccm.redAlert, preferencesDataVar()) - isPreferencesSetVar(true) - setIsPrefsLoaded(isPreferencesSetVar()) - // console.debug('%c🦆 APOLLO STORE: FETCH isPreferencesSetVar()', ccm.redAlert, isPreferencesSetVar()) - if (preferencesDataVar().doAutoLoadData) { - // const projectsFromDataSource = await projectStore.actions.loadFromDataSource(client) - const projectsFromDataSource = await projectStore.actions.loadFromDB(client) - if (DEBUG) - console.debug('%c projects loading...', ccm.orangeAlert) - if (projectsFromDataSource) { - // console.debug('%c🥕 projectsFromDataSource', ccm.redAlert) - // ** TODO - // ** do more tasks here ?? - } - } - - // ** READY TO GO ??? - setIsThreeDGardenLoaded(true) - - } catch (error) { - console.error('Error fetching data:', error); - } - } - fetchData() - if (DEBUG) - console.debug('%c fetching data ...', ccm.blue) - - - // ** LOAD NOUN FROM WP API VIA APOLLO INTO R3F + LEVA (+ VALTIO) - const loadNounData = (_type: string = 'project', threeds: any = []) => { - // load these threeds into r3f canvas - if (DEBUG || debug) - console.debug('%c🌱 ThreeDGarden loadNounData()', ccm.yellowAlert, _type, threeds) - if (_type === 'project') { - projectStore.actions.loadToCanvas(threeds, '_r3fCanvas1') - } - // return true // true - } - - } else if (isThreeDGardenLoaded) { - console.debug('%c🦆 ThreeDGarden => LOADED !!', ccm.greenAlert, isThreeDGardenLoaded) - } else { - // console.debug('%c🦆 ThreeDGarden => APOLLO STORE: preferencesDataVar()', ccm.redAlert, preferencesDataVar()) - } - - }, []) // useEffect - - // ========================================================== - // ** USE CONTEXT - // const abilities = useContext(AbilityContext) - // const abilities = ['read', 'write', 'delete'] - - // ========================================================== - - if (DEBUG || debug) - console.debug('%c🌱 ThreeDGarden mounting ...', ccm.darkgreenAlert) - - - let project_title = 'NOT EVEN CLOSE' - if (DEBUG || debug) - console.debug('%c🌱 ThreeDGarden mounting ...', ccm.darkgreen, project_title) - - - - - - const EcctrlJoystickControls = () => { - const [isTouchScreen, setIsTouchScreen] = useState(false) - useEffect(() => { - // Check if using a touch control device, show/hide joystick - if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0)) { - setIsTouchScreen(true) - } else { - setIsTouchScreen(false) - } - }, []) - return ( - <> - { isTouchScreen && - - } - - ) - } - - - - // ========================================================== - // ** RETURN JSX + // ** THREED CONTROL(S) + console.debug('THREED CONTROL[S]: ALL') return ( - - - {/* [MM] HEY HEY HEY */} - {/* {project_title} */} - {/* [MM] HEY HEY HEY */} - - { !isThreeDGardenLoaded && !isPrefsLoaded && ( - <> - LOADING... - - - - )} - - { isThreeDGardenLoaded && isPrefsLoaded && ( - - - - {/* THREED CONTROLS: ALL */} - - - - {/* THREED CONTROLS: LEVA GUI + CUSTOMIZED */} - {/* - - */} - {/* END THREED CONTROLS: LEVA GUI + CUSTOMIZED */} - - {/* THREED CLICK LOADERS */} - {/* - - - - - - */} - {/* END THREED CLICK LOADERS */} - - - {/* END: THREED CONTROLS: ALL */} - - {/* THREED TOOLBAR */} - - {/* */} - - {/* END: THREED TOOLBAR */} - - {/* THREED CANVAS VIEWER */} - - - - {/* END: THREED CANVAS VIEWER */} - - {/* THREED CONTROL PANELS */} - {/* -- STORE ACCESS (apollo, zustand, valtio, leva) */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* END: THREED CONTROL PANELS */} - - {/* THREED VIEWS */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* END: THREED VIEWS */} - - {/* THREED MODALS */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* END: THREED MODALS */} - - {/* THREED FARMBOT */} - {/* */} - {/* */} - {/* */} - {/* END: THREED FARMBOT */} - - {/* THREED JOYSTICK */} - - {/* CHARACTER CONTROL JOYSTICK */} - {/* */} - {/* */} - - - - {/* END: THREED JOYSTICK */} - - - - )} - + <> + + + + + (<>)} + projectNameFromLeva={'ThreeD: MM projectName'} + setProjectNameFromLeva={() => (<>)} + /> +

ThreeD Control[s]: All

+ ) } -// const ThreeDGarden_UseClient = dynamic(() => Promise.resolve(ThreeDGarden), { -// ssr: false -// }) -// export default ThreeDGarden_UseClient -export default ThreeDGarden +export default ThreeDControls From 0affdc5aead41632a3b204eb78fb17029f0d4a10 Mon Sep 17 00:00:00 2001 From: Marty McGee Date: Wed, 2 Oct 2024 22:08:07 -0700 Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=A5=95=20v0.16.1-b2=20=F0=9F=8C=B1=20?= =?UTF-8?q?ThreeD:=20Character=20Animations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/threed/components/controls/LevaControls.tsx | 2 +- src/lib/threed/components/controls/Toolbar.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/lib/threed/components/controls/LevaControls.tsx b/src/lib/threed/components/controls/LevaControls.tsx index 8c7dfdee1..a83a7067f 100644 --- a/src/lib/threed/components/controls/LevaControls.tsx +++ b/src/lib/threed/components/controls/LevaControls.tsx @@ -404,7 +404,7 @@ export function ThreeDLevaControls() { // hideTitleBar={true} // default = false. true hides the GUI header theme={theme} // you can pass a custom theme (see the styling section) collapsed={false} // default = false. true makes the GUI collapsed to start - fill={true} // default = false. true makes the pane fill the parent dom node it's rendered in + fill={false} // default = false. true makes the pane fill the parent dom node it's rendered in flat={true} // default = false. true removes border radius and shadow hidden={false} // default = false. true hides the GUI neverHide={true} // default = true. false allows hiding of the GUI diff --git a/src/lib/threed/components/controls/Toolbar.tsx b/src/lib/threed/components/controls/Toolbar.tsx index ccd4c3928..b84764d57 100644 --- a/src/lib/threed/components/controls/Toolbar.tsx +++ b/src/lib/threed/components/controls/Toolbar.tsx @@ -1102,7 +1102,10 @@ const ThreeDToolbar: FC = (): React.ReactNode => { Date: Thu, 3 Oct 2024 07:20:20 -0700 Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=A5=95=20v0.16.1-b2=20=F0=9F=8C=B1=20?= =?UTF-8?q?ThreeD:=20Character=20Animations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/participate/page.tsx | 4 ++-- src/lib/threed/threed.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/participate/page.tsx b/src/app/participate/page.tsx index 73d59f6c9..50215d972 100644 --- a/src/app/participate/page.tsx +++ b/src/app/participate/page.tsx @@ -28,8 +28,8 @@ import { // import CardContent from '@mui/material/CardContent' // ** THREED Imports -import ThreeD from '~/src/lib/threed/threed' -// const ThreeD = dynamic(() => import('#/lib/threed/threed'), { ssr: false }) +// import ThreeD from '~/src/lib/threed/threed' +const ThreeD = dynamic(() => import('#/lib/threed/threed'), { ssr: false }) // import ThreeDControls from '~/src/lib/threed/Controls' // const ThreeDControls = dynamic(() => import('#/lib/threed/Controls'), { ssr: false }) // import ThreeDGarden from '~/src/lib/threed/ThreeDGarden' diff --git a/src/lib/threed/threed.tsx b/src/lib/threed/threed.tsx index ecf5e54b6..a09d2249d 100644 --- a/src/lib/threed/threed.tsx +++ b/src/lib/threed/threed.tsx @@ -24,7 +24,7 @@ import ThreeDToolbar from '#/lib/threed/components/controls/Toolbar' const ThreeDControls = () => { // ** THREED CONTROL(S) - console.debug('THREED CONTROL[S]: ALL') + // console.debug('THREED CONTROL[S]: ALL') return ( <> @@ -37,7 +37,7 @@ const ThreeDControls = () => { projectNameFromLeva={'ThreeD: MM projectName'} setProjectNameFromLeva={() => (<>)} /> -

ThreeD Control[s]: All

+ {/*

ThreeD Control[s]: All

*/} ) }