Skip to content

Commit 918f6e5

Browse files
vincent-qcvincent-qc
committed
feat: blackboard and window
1 parent 6cd2206 commit 918f6e5

File tree

6 files changed

+136
-17
lines changed

6 files changed

+136
-17
lines changed

‎src/assets/edubeyond.png‎

157 KB
Loading

‎src/scenes/about/about.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
import Base from "../base";
2+
import BlackboardMesh from "./blackboard/blackboard";
23
import OrganizedDeskMesh from "./desk/desk";
34
import GatesMesh from "./gates/gates";
45
import HammerschlagMesh from "./hammerschlag/hammerschlag";
6+
import WindowMesh from "./window/window";
57

68
export default function AboutScene() {
79
return (
8-
<group>
9-
<GatesMesh scale={[0.2, 0.2, 0.2]} position={[-7, 5, -7]} />
10-
<OrganizedDeskMesh scale={[0.35, 0.35, 0.35]} position={[4, 4.85, -7]} />
10+
<group position={[0, -6, 0]}>
11+
<GatesMesh scale={[0.2, 0.2, 0.2]} position={[-7, 6.5, -7]} />
12+
<OrganizedDeskMesh scale={[0.35, 0.35, 0.35]} position={[4, 4.85, -6]} />
1113
<HammerschlagMesh
1214
scale={[0.2, 0.2, 0.2]}
1315
position={[-4, 0.5, 4]}
1416
rotation={Math.PI / 2}
1517
/>
18+
<WindowMesh scale={[0.2, 0.2, 0.2]} position={[-11, 10, 4]} />
19+
<BlackboardMesh scale={[0.2, 0.2, 0.2]} position={[4, 11, -11]} />
1620
<Base />
1721
</group>
1822
);

‎src/scenes/about/blackboard/blackboard.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
export default function BlackboardMesh({
2+
scale,
3+
position,
4+
}: {
5+
scale: [number, number, number];
6+
position: [number, number, number];
7+
}) {
8+
return (
9+
<group scale={scale} position={position}>
10+
{/* Frame */}
11+
<group>
12+
<mesh position={[0, 17, 1]}>
13+
<boxGeometry args={[50, 2, 4]} />
14+
<meshStandardMaterial color={"#321C06"} />
15+
</mesh>
16+
<mesh position={[0, -17, 1]}>
17+
<boxGeometry args={[50, 2, 4]} />
18+
<meshStandardMaterial color={"#321C06"} />
19+
</mesh>
20+
<mesh position={[24, 0, 1]}>
21+
<boxGeometry args={[2, 36, 4]} />
22+
<meshStandardMaterial color={"#321C06"} />
23+
</mesh>
24+
<mesh position={[-24, 0, 1]}>
25+
<boxGeometry args={[2, 36, 4]} />
26+
<meshStandardMaterial color={"#321C06"} />
27+
</mesh>
28+
{/* Chalk holder */}
29+
<mesh position={[18, -17, 4]}>
30+
<boxGeometry args={[10, 2, 4]} />
31+
<meshStandardMaterial color={"#321C06"} />
32+
{/* Chalk */}
33+
<mesh
34+
rotation={[0, -Math.PI / 8, Math.PI / 2]}
35+
position={[0, 1.5, 0]}
36+
>
37+
<cylinderGeometry args={[0.5, 0.5, 4]} />
38+
<meshStandardMaterial color={"#F0F0F0"} />
39+
</mesh>
40+
{/* <mesh
41+
rotation={[Math.PI / 2, -Math.PI / 8, (3 * Math.PI) / 5]}
42+
position={[1, 2.2, 0]}
43+
>
44+
<cylinderGeometry args={[0.5, 0.5, 4]} />
45+
<meshStandardMaterial color={"#FFB0B0"} />
46+
</mesh> */}
47+
</mesh>
48+
</group>
49+
50+
{/* Board */}
51+
<mesh>
52+
<boxGeometry args={[48, 32, 2]} />
53+
<meshStandardMaterial color={"#252525"} />
54+
</mesh>
55+
56+
{/* Image */}
57+
</group>
58+
);
59+
}

‎src/scenes/about/window/window.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { GLASS_BLUE } from "../../shared/colors";
2+
3+
export default function WindowMesh({
4+
scale,
5+
position,
6+
}: {
7+
scale: [number, number, number];
8+
position: [number, number, number];
9+
}) {
10+
return (
11+
<group scale={scale} position={position}>
12+
{/* Frame */}
13+
<group position={[1, 0, 0]}>
14+
<mesh position={[0, 20, 0]}>
15+
<boxGeometry args={[4, 2, 38]} />
16+
<meshStandardMaterial color="#F0F0F0" />
17+
</mesh>
18+
<mesh position={[0, -20, 0]}>
19+
<boxGeometry args={[4, 2, 38]} />
20+
<meshStandardMaterial color="#F0F0F0" />
21+
</mesh>
22+
<mesh position={[0, 0, 0]}>
23+
<boxGeometry args={[4, 2, 38]} />
24+
<meshStandardMaterial color="#F0F0F0" />
25+
</mesh>
26+
<mesh position={[0, 0, 20]}>
27+
<boxGeometry args={[4, 42, 2]} />
28+
<meshStandardMaterial color="#F0F0F0" />
29+
</mesh>
30+
<mesh position={[0, 0, -20]}>
31+
<boxGeometry args={[4, 42, 2]} />
32+
<meshStandardMaterial color="#F0F0F0" />
33+
</mesh>
34+
<mesh position={[0, 0, 0]}>
35+
<boxGeometry args={[4, 42, 2]} />
36+
<meshStandardMaterial color="#F0F0F0" />
37+
</mesh>
38+
</group>
39+
40+
{/* Glass */}
41+
<group>
42+
<mesh position={[0, 10, 10]}>
43+
<boxGeometry args={[2, 18, 18]} />
44+
<meshStandardMaterial color={GLASS_BLUE} transparent opacity={0.5} />
45+
</mesh>
46+
<mesh position={[0, 10, -10]}>
47+
<boxGeometry args={[2, 18, 18]} />
48+
<meshStandardMaterial color={GLASS_BLUE} transparent opacity={0.5} />
49+
</mesh>
50+
<mesh position={[0, -10, 10]}>
51+
<boxGeometry args={[2, 18, 18]} />
52+
<meshStandardMaterial color={GLASS_BLUE} transparent opacity={0.5} />
53+
</mesh>
54+
<mesh position={[0, -10, -10]}>
55+
<boxGeometry args={[2, 18, 18]} />
56+
<meshStandardMaterial color={GLASS_BLUE} transparent opacity={0.5} />
57+
</mesh>
58+
</group>
59+
</group>
60+
);
61+
}

‎src/scenes/scene.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ import {
55
EffectComposer,
66
ToneMapping,
77
} from "@react-three/postprocessing";
8+
import { useRef } from "react";
89
import { useUnitSize } from "../hooks/useWindowSize";
910
import AboutScene from "./about/about";
1011

1112
function Scene() {
1213
// const { width, height } = useWindowSize();
1314
const unit = useUnitSize();
14-
15+
const canvasRef = useRef<HTMLCanvasElement>(null);
1516
return (
1617
<div className="w-full h-full flex justify-center items-center p-4">
1718
<Canvas
@@ -20,30 +21,24 @@ function Scene() {
2021
position: [10, 10, 10],
2122
near: -2000,
2223
}}
24+
ref={canvasRef}
2325
>
26+
{/* Scene effects */}
2427
<OrbitControls />
2528
<EffectComposer>
2629
<Bloom mipmapBlur luminanceThreshold={1} levels={1} intensity={1} />
2730
<ToneMapping />
2831
</EffectComposer>
32+
33+
{/* Lighting */}
2934
<ambientLight intensity={Math.PI / 2} />
30-
{/* <pointLight
31-
position={[45, 25, 20]}
32-
decay={0}
33-
intensity={Math.PI / 2}
34-
/> */}
35-
{/* <pointLight
36-
position={[-300, -150, 0]}
37-
decay={0}
38-
intensity={Math.PI / 2}
39-
/> */}
4035
<directionalLight position={[100, 100, 0]} intensity={Math.PI / 2} />
4136
<directionalLight position={[0, 100, 0]} intensity={Math.PI / 2} />
37+
38+
{/* Scene switcher */}
4239
<directionalLight position={[-100, -100, 0]} intensity={Math.PI / 2} />
4340
<mesh scale={[unit, unit, unit]}>
4441
<AboutScene />
45-
{/* <GatesMesh scale={[1, 1, 1]} position={[0, 0, 0]} /> */}
46-
{/* <DeskMesh scale={[1, 1, 1]} position={[0, 0, 0]} /> */}
4742
</mesh>
4843
</Canvas>
4944
</div>

‎src/scenes/shared/colors.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
const GATES_BLACK = "#000000";
2-
const GLASS_BLUE = "#00A3E0";
2+
const GLASS_BLUE = "#106070";
33

44
export { GATES_BLACK, GLASS_BLUE };

0 commit comments

Comments
 (0)