[add & updatte] Virtual Space page & format information

README.md

@@ -1,6 +1,6 @@
 # barrystone.github.io
 
-Personal website of Barrystone.
+Barrystone's personal website.
 
 - Link: https://barrystone.github.io/
 

components/VirtualSpace.js

@@ -0,0 +1,44 @@
+import { Canvas } from "@react-three/fiber";
+import {
+  Fisheye,
+  CameraControls,
+  PerspectiveCamera,
+  Environment,
+} from "@react-three/drei";
+import {
+  Level,
+  Sudo,
+  Camera,
+  // Cactus,
+  Basketball,
+  Plane,
+  HeaderBoard,
+  SkillBoard,
+  AboutBoard,
+  Cabinet,
+} from "./VirtualSpaceScene";
+
+export default function Main() {
+  return (
+    <Canvas flat>
+      <Fisheye zoom={0}>
+        <CameraControls minPolarAngle={0} maxPolarAngle={Math.PI / 1.6} />
+        <ambientLight intensity={Math.PI / 2} />
+        <group scale={20} position={[5, -11, -5]}>
+          <Level />
+          <Plane />
+          <HeaderBoard />
+          <SkillBoard />
+          <AboutBoard />
+          <Sudo />
+          <Camera />
+          <Cabinet />
+          {/* <Cactus /> */}
+          <Basketball />
+        </group>
+        <Environment preset="apartment" background blur={2} />
+        <PerspectiveCamera makeDefault position={[0, 0, 18.5]} />
+      </Fisheye>
+    </Canvas>
+  );
+}

components/VirtualSpaceScene.js

@@ -0,0 +1,192 @@
+import * as THREE from "three";
+import { useEffect, useRef, useState } from "react";
+import { useFrame } from "@react-three/fiber";
+import { MeshWobbleMaterial, useGLTF } from "@react-three/drei";
+import { useSpring, a } from "@react-spring/three";
+
+const modelUrl = "/space.glb";
+
+export function Level() {
+  const { nodes } = useGLTF(modelUrl);
+  return (
+    <mesh
+      geometry={nodes.Level.geometry}
+      material={nodes.Level.material}
+      position={[-0.38, 0.69, 0.62]}
+      rotation={[Math.PI / 2, -Math.PI / 9, 0]}
+    />
+  );
+}
+
+export function HeaderBoard() {
+  const { nodes } = useGLTF(modelUrl);
+  return (
+    <mesh
+      geometry={nodes.headerBoard.geometry}
+      material={nodes.headerBoard.material}
+      position={[-0.506, 0.818, 0.616]}
+      rotation={[-Math.PI / 2, Math.PI * 0.43, Math.PI / 2]}
+      scale={[0.38, 0.38, 1]}
+    />
+  );
+}
+export function SkillBoard() {
+  const { nodes } = useGLTF(modelUrl);
+  return (
+    <mesh
+      geometry={nodes.skillBoard.geometry}
+      material={nodes.skillBoard.material}
+      position={[0.156, 1.083, -0.919]}
+      scale={[1.5, 1.5, 1]}
+    />
+  );
+}
+export function AboutBoard() {
+  const { nodes } = useGLTF(modelUrl);
+  return (
+    <mesh
+      geometry={nodes.aboutBoard.geometry}
+      material={nodes.aboutBoard.material}
+      position={[0.156, 1.083, -0.929]}
+      rotation={[Math.PI, 0, Math.PI]}
+      scale={[1.5, 1.5, 1]}
+    />
+  );
+}
+export function Plane() {
+  const { nodes } = useGLTF(modelUrl);
+  return (
+    <mesh
+      geometry={nodes.plane.geometry}
+      material={nodes.plane.material}
+      position={[0.119, 0.152, 0.292]}
+      rotation={[-Math.PI / 2, 0, 0]}
+      scale={[1.49, 1.24, 1]}
+    />
+  );
+}
+export function Cabinet() {
+  const { nodes } = useGLTF(modelUrl);
+  return (
+    <mesh
+      geometry={nodes.cabinet.geometry}
+      material={nodes.cabinet.material}
+      position={[0.976, 0.212, -0.717]}
+      rotation={[0, -Math.PI / 2, 0]}
+      scale={[0.004, 0.004, 0.007]}
+    />
+  );
+}
+
+export function Sudo() {
+  const { nodes } = useGLTF(modelUrl);
+  const [spring, api] = useSpring(
+    () => ({
+      rotation: [Math.PI / 2, 0, -Math.PI / 3.6],
+      config: { friction: 40 },
+    }),
+    []
+  );
+  useEffect(() => {
+    let timeout;
+    const wander = () => {
+      api.start({
+        rotation: [
+          Math.PI / 2 + THREE.MathUtils.randFloatSpread(2) * 0.3,
+          0,
+          -Math.PI / 3.6 + THREE.MathUtils.randFloatSpread(2) * 0.2,
+        ],
+      });
+      timeout = setTimeout(wander, (1 + Math.random() * 2) * 800);
+    };
+    wander();
+    return () => clearTimeout(timeout);
+  }, []);
+  return (
+    <>
+      <mesh
+        geometry={nodes.Sudo.geometry}
+        material={nodes.Sudo.material}
+        position={[-0.086, 0.312, 0.454]}
+        rotation={[Math.PI / 2, 0, -Math.PI / 3.6]}
+      />
+      <a.mesh
+        geometry={nodes.SudoHead.geometry}
+        material={nodes.SudoHead.material}
+        position={[-0.086, 0.312, 0.454]}
+        rotation={[Math.PI / 2, 0, -Math.PI / 3.6]}
+        {...spring}
+      />
+    </>
+  );
+}
+
+export function Camera() {
+  const { nodes, materials } = useGLTF(modelUrl);
+  const [spring, api] = useSpring(
+    () => ({ "rotation-z": 0, config: { friction: 40 } }),
+    []
+  );
+  useEffect(() => {
+    let timeout;
+    const wander = () => {
+      api.start({ "rotation-z": Math.random() });
+      timeout = setTimeout(wander, (1 + Math.random() * 2) * 800);
+    };
+    wander();
+    return () => clearTimeout(timeout);
+  }, []);
+  return (
+    <a.group
+      position={[-0.58, 0.83, -0.03]}
+      rotation={[Math.PI / 2, 0, 0.47]}
+      {...spring}
+    >
+      <mesh geometry={nodes.Camera.geometry} material={nodes.Camera.material} />
+      <mesh geometry={nodes.Camera_1.geometry} material={materials.Lens} />
+    </a.group>
+  );
+}
+
+export function Cactus() {
+  const { nodes, materials } = useGLTF(modelUrl);
+  return (
+    <mesh
+      geometry={nodes.Cactus.geometry}
+      position={[-0.42, 0.51, -0.62]}
+      rotation={[Math.PI / 2, 0, 0]}
+    >
+      <MeshWobbleMaterial factor={0.4} map={materials.Cactus.map} />
+    </mesh>
+  );
+}
+
+export function Basketball({ scale = 1, ...props }) {
+  const { nodes } = useGLTF(modelUrl);
+  const ref = useRef();
+  const [hovered, hover] = useState(false);
+  const [clicked, click] = useState(false);
+  useFrame(
+    (state, delta) =>
+      (ref.current.rotation.x = ref.current.rotation.y +=
+        delta * (clicked ? 5 : 1))
+  );
+  return (
+    <mesh
+      ref={ref}
+      geometry={nodes.basketball.geometry}
+      material={nodes.basketball.material}
+      position={[-0.8, 1.292, 0.204]}
+      scale={0.14}
+      onClick={() => click(!clicked)}
+      onPointerOver={(event) => (event.stopPropagation(), hover(true))}
+      onPointerOut={(event) => hover(false)}
+    >
+      <mesh
+        geometry={nodes.basketballLine.geometry}
+        material={nodes.basketballLine.material}
+      />
+      <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
+    </mesh>
+  );
+}

components/layout/Header.js

@@ -27,13 +27,13 @@ const Header = () => {
               </p>
             </Link>
             <Link
-              href="/note"
-              as={process.env.BACKEND_URL + "/note"}
+              href="/space"
+              as={process.env.BACKEND_URL + "/space"}
               className="btn-primary btn-primary--2"
             >
               <p>
-                筆記 <br />
-                <span>Note</span>
+                空間 <br />
+                <span>Space</span>
               </p>
             </Link>
           </div>

components/layout/Navigation.js

@@ -23,16 +23,16 @@ const Navigation = () => {
               as={process.env.BACKEND_URL + "/about"}
               className="navigation__link"
             >
-              關於個人
+              關於個人 About Me
             </Link>
           </li>
           <li className="navigation__item">
             <Link
-              href="/note"
-              as={process.env.BACKEND_URL + "/note"}
+              href="/space"
+              as={process.env.BACKEND_URL + "/space"}
               className="navigation__link"
             >
-              公開筆記
+              虛擬空間 Virtual Space
             </Link>
           </li>
         </ul>