From 42321357a0e0bdc9c10f97e79d5207fa72155d35 Mon Sep 17 00:00:00 2001 From: zsc0012 Date: Sat, 23 Apr 2022 18:01:03 -0500 Subject: [PATCH] Start on planet logic --- components/ChatPlanet.jsx | 3 +- components/stars.jsx | 47 ++++++++++++++ pages/chat.js | 56 +++++++++++------ styles/Chat.module.css | 20 ++++++ styles/Home.module.css | 126 -------------------------------------- 5 files changed, 105 insertions(+), 147 deletions(-) create mode 100644 components/stars.jsx create mode 100644 styles/Chat.module.css delete mode 100644 styles/Home.module.css diff --git a/components/ChatPlanet.jsx b/components/ChatPlanet.jsx index 79b967e..d68d83e 100644 --- a/components/ChatPlanet.jsx +++ b/components/ChatPlanet.jsx @@ -13,9 +13,10 @@ function ChatPlanet(props) { ]) useFrame(() => { - mesh.current.rotation.x += 0.01 + mesh.current.rotation.x += props.rotateAmount }) + mesh.scale = 10 return ( diff --git a/components/stars.jsx b/components/stars.jsx new file mode 100644 index 0000000..87addde --- /dev/null +++ b/components/stars.jsx @@ -0,0 +1,47 @@ +import React from 'react' +import THREE from '@react-three/fiber' +import { Mesh } from 'three' + +function Stars({ pointCount }) { + const [positions, colors] = useMemo(() => { + let positions = [], + colors = [] + for (let i = 0; i < pointCount; i++) { + positions.push(5 - Math.random() * 10) + positions.push(5 - Math.random() * 10) + positions.push(5 - Math.random() * 10) + colors.push(1) + colors.push(0.5) + colors.push(0.5) + } + return [new Float32Array(positions), new Float32Array(colors)] + }, [pointCount]) + + const attrib = useRef() + const hover = useCallback(e => { + e.stopPropagation() + attrib.current.array[e.index * 3] = 1 + attrib.current.array[e.index * 3 + 1] = 1 + attrib.current.array[e.index * 3 + 2] = 1 + attrib.current.needsUpdate = true + }, []) + + const unhover = useCallback(e => { + attrib.current.array[e.index * 3] = 1 + attrib.current.array[e.index * 3 + 1] = 0.5 + attrib.current.array[e.index * 3 + 2] = 0.5 + attrib.current.needsUpdate = true + }, []) + + return ( + + + + + + + + ) + } + +export default Stars \ No newline at end of file diff --git a/pages/chat.js b/pages/chat.js index 438ba13..f1a223b 100644 --- a/pages/chat.js +++ b/pages/chat.js @@ -1,35 +1,51 @@ // import { Canvas as CanvasCSS3D, useFrame as useFrameCSS3D, useThree as useThreeCSS3D } from '@react-three/fiber' import { Canvas } from '@react-three/fiber' -import css from "../styles/Home.module.css" +import css from "../styles/Chat.module.css" -import Floor from "../components/Floor" import LightBulb from '../components/LightBulb' import OrbitControls from '../components/OrbitControls' import ChatPlanet from '../components/ChatPlanet' +import Stars from '../components/stars' + +import React, { useState } from 'react'; -import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer' export default function Chat() { + const stage1 = { + rotateAmount: 0.001, + nextProp: 0 + } + const stage2 = { + rotateAmount: 0.00 + } + + const [currentStage, setStage] = useState(stage1) + return ( <> +
+ +
+ History here +
+ +
+ + + + + {/* */} + +
- - -
- - - - - {/* */} - -
- +
+ ) } \ No newline at end of file diff --git a/styles/Chat.module.css b/styles/Chat.module.css new file mode 100644 index 0000000..dba6696 --- /dev/null +++ b/styles/Chat.module.css @@ -0,0 +1,20 @@ +.scene{ + width:75vw; + height:75vh; + float: left; +} + +.canvas{ + background: #000; +} + +.history { + width: 25vw; + height: 100vh; + float: left; +} + +.container { + height: 100vh; + width: 100vw; +} \ No newline at end of file diff --git a/styles/Home.module.css b/styles/Home.module.css deleted file mode 100644 index ea03d2b..0000000 --- a/styles/Home.module.css +++ /dev/null @@ -1,126 +0,0 @@ -.container { - padding: 0 2rem; - background-color: #000; -} - -.main { - min-height: 100vh; - padding: 4rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { - text-align: center; -} - -.description { - margin: 4rem 0; - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; -} - -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - max-width: 300px; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} - -.scene{ - width:100vw; - height:100vh; -} - -.canvas{ - background: #000; -} \ No newline at end of file