Start on planet logic

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 (

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 (
+      <points onPointerOver={hover} onPointerOut={unhover}>
+        <bufferGeometry attach="geometry">
+          <bufferAttribute attachObject={["attributes", "position"]} count={positions.length / 3} array={positions} itemSize={3} />
+          <bufferAttribute ref={attrib} attachObject={["attributes", "color"]} count={colors.length / 3} array={colors} itemSize={3} />
+        </bufferGeometry>
+        <pointsMaterial attach="material" vertexColors size={10} sizeAttenuation={false} />
+      </points>
+    )
+  }
+
+export default Stars

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 (
         <>
+            <div className={css.container}>
+
+                <div className={css.history}>
+                    History here
+                </div>
+
+                <div className={css.scene}>
+                    <Canvas
+                        shadows={true}
+                        className={css.canvas}
+                        camera={{
+                        position: [2, 2, 0],
+                        }}
+                    >
+                        <ambientLight color={"white"} intensity={0.2} />
+                        <LightBulb position={[0, 5, 3]} />
+                        <ChatPlanet rotateX={5} rotateY={5} rotateAmount={currentStage.rotateAmount} />
+                        {/* <OrbitControls/> */}
+                    </Canvas>
+                </div>
 
-
-
-        <div className={css.scene}>
-        <Canvas
-            shadows={true}
-            className={css.canvas}
-            camera={{
-            position: [2, 2, 2],
-            }}
-        >
-            <ambientLight color={"white"} intensity={0.2} />
-            <LightBulb position={[0, 5, 3]} />
-            <ChatPlanet rotateX={5} rotateY={5} />
-            {/* <OrbitControls/> */}
-        </Canvas>
-    </div>
-    </>
+            </div>
+        </>
     )
 }

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;
+}