Merge pull request #10 from tuatmcc/feat/testout-three

test three js

biome.json → biome.jsonc

@@ -18,6 +18,6 @@
 		"useIgnoreFile": true
 	},
 	"files": {
-		"ignore": [".vscode"]
+		"ignore": [".vscode", "package.json"]
 	}
 }

src/components/Navigation/Navigation.astro

@@ -9,6 +9,7 @@ const links = [
 ];
 ---
 
+<slot />
 <NavigationContainer client:only="react">
   <div class="w-full pl-8 pt-24 overflow-y-auto">
     <ul class="flex flex-col gap-8">

src/components/Navigation/NavigationContainer.tsx

@@ -5,8 +5,8 @@ export const NavigationContainer = ({ children }: { children: ReactNode }) => {
 	return (
 		<>
 			<div
-				className="fixed top-0 left-0 w-full h-full bg-blue-100 bg-opacity-50 z-[-10] transition-opacity"
-				style={{ opacity: active ? 1 : 0 }}
+				className="fixed top-0 left-0 w-full h-full"
+				style={{ opacity: active ? 1 : 0, display: active ? "block" : "none" }}
 				onClick={() => setActive(false)}
 				onKeyDown={(e) => e.key === "Escape" && setActive(false)}
 			/>
@@ -31,21 +31,18 @@ export const NavigationContainer = ({ children }: { children: ReactNode }) => {
 							stroke="black"
 							stroke-width="2"
 							stroke-linecap="round"
-							className="horizon1"
 						/>
 						<path
 							d="M4 12L20 12"
 							stroke="black"
 							stroke-width="2"
 							stroke-linecap="round"
-							className="horizon2"
 						/>
 						<path
 							d="M4 18L20 18"
 							stroke="black"
 							stroke-width="2"
 							stroke-linecap="round"
-							className="horizon3"
 						/>
 					</svg>
 				</button>
@@ -81,7 +78,6 @@ export const NavigationContainer = ({ children }: { children: ReactNode }) => {
 							onClick={() => setActive((prev) => !prev)}
 						>
 							<svg
-								className=""
 								width="40"
 								height="40"
 								viewBox="0 0 24 24"
@@ -94,21 +90,18 @@ export const NavigationContainer = ({ children }: { children: ReactNode }) => {
 									stroke="white"
 									stroke-width="2"
 									stroke-linecap="round"
-									className="horizon1"
 								/>
 								<path
 									d="M4 12L20 12"
 									stroke="white"
 									stroke-width="2"
 									stroke-linecap="round"
-									className="horizon2"
 								/>
 								<path
 									d="M4 18L20 18"
 									stroke="white"
 									stroke-width="2"
 									stroke-linecap="round"
-									className="horizon3"
 								/>
 							</svg>
 						</button>

src/components/home/ModelCanvas.tsx

@@ -0,0 +1,149 @@
+import { type FC, useEffect, useRef } from "react";
+import * as THREE from "three";
+import {
+	BloomPass,
+	GLTFLoader,
+	OrbitControls,
+	OutputPass,
+	RGBELoader,
+	RenderPass,
+	UnrealBloomPass,
+} from "three/examples/jsm/Addons.js";
+import { EffectComposer } from "three/examples/jsm/Addons.js";
+
+const toRadians = (degrees: number) => (degrees * Math.PI) / 180;
+
+export const ModelCanvas: FC = () => {
+	const canvasRef = useRef(null);
+	useEffect(() => {
+		async function init() {
+			const scene = new THREE.Scene();
+			scene.background = new THREE.Color(0xffffff);
+			// const floor = new THREE.Mesh(
+			// 	new THREE.PlaneGeometry(100, 100),
+			// 	new THREE.MeshBasicMaterial({ color: 0x999999 }),
+			// );
+			// floor.position.y = -1;
+			// floor.receiveShadow = true;
+			// floor.lookAt(0, 1, 0);
+			// scene.add(floor);
+
+			const loader = new GLTFLoader();
+			let mcc: THREE.Group;
+			let m: THREE.Group;
+			let ct: THREE.Group;
+			let cr: THREE.Group;
+			let distance = 2;
+			loader.load("/models/mcc.glb", (gltf) => {
+				mcc = gltf.scene;
+				scene.add(mcc);
+			});
+			loader.load("/models/m.glb", (gltf) => {
+				m = gltf.scene;
+				m.position.z = distance;
+				scene.add(m);
+			});
+			loader.load("/models/c.top.glb", (gltf) => {
+				ct = gltf.scene;
+				ct.position.y = distance;
+				scene.add(ct);
+			});
+			loader.load("/models/c.right.glb", (gltf) => {
+				cr = gltf.scene;
+				cr.position.x = distance;
+				scene.add(cr);
+			});
+
+			const sizes = {
+				width: window.innerWidth,
+				height: window.innerHeight,
+			};
+			const camera = new THREE.PerspectiveCamera(
+				75,
+				sizes.width / sizes.height,
+			);
+			camera.position.x = 4;
+			camera.position.y = 4;
+			camera.position.z = 4;
+			camera.far = 500;
+			camera.near = 0.01;
+			scene.add(camera);
+
+			const lightStrength = 1;
+			const ambientLight = new THREE.AmbientLight(0xffffff, lightStrength);
+			scene.add(ambientLight);
+
+			const directionalLight = new THREE.DirectionalLight(
+				0xffffff,
+				lightStrength,
+			);
+			directionalLight.position.set(3, 3, 3);
+			scene.add(directionalLight);
+
+			const canvas = canvasRef.current ?? undefined;
+			const renderer = new THREE.WebGLRenderer({
+				canvas: canvas,
+				alpha: true,
+			});
+			renderer.setSize(sizes.width, sizes.height);
+			renderer.render(scene, camera);
+
+			const controls = new OrbitControls(camera, renderer.domElement);
+			controls.enableDamping = true;
+			controls.enableZoom = true;
+			controls.enablePan = true;
+			controls.dampingFactor = 0.25;
+			controls.screenSpacePanning = false;
+			controls.maxPolarAngle = Math.PI / 2;
+			controls.minDistance = 0.1;
+			controls.maxDistance = 5;
+
+			const renderPass = new RenderPass(scene, camera);
+			const bloomPass = new UnrealBloomPass(
+				new THREE.Vector2(window.innerWidth, window.innerHeight),
+				1,
+				0.4,
+				2,
+			);
+			const outputPass = new OutputPass();
+
+			const composer = new EffectComposer(renderer);
+			composer.addPass(renderPass);
+			composer.addPass(bloomPass);
+			composer.addPass(outputPass);
+
+			function animate() {
+				requestAnimationFrame(animate);
+				if (distance > 0) {
+					distance -= 0.01;
+					m.position.z = distance;
+					ct.position.y = distance;
+					cr.position.x = distance;
+				}
+
+				renderer.render(scene, camera);
+				composer.render();
+			}
+			animate();
+
+			window.addEventListener("resize", () => {
+				sizes.width = window.innerWidth;
+				sizes.height = window.innerHeight;
+
+				camera.aspect = sizes.width / sizes.height;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize(sizes.width, sizes.height);
+				composer.setSize(sizes.width, sizes.height);
+			});
+		}
+
+		init();
+	}, []);
+
+	return (
+		<>
+			<canvas ref={canvasRef} />
+		</>
+	);
+};

src/components/home/Typing.astro

@@ -0,0 +1,66 @@
+---
+
+---
+
+<div class="w-screen h-screen relative">
+  <div class="flex justify-center items-center h-full">
+    <div class="flex items-center text-4xl font-mono tracking-wider">
+      <div class="typing__text">Hello, World!</div>
+      <div class="typing__text">Welcome to MCC!</div>
+      <div class="typing__cursor h-8 bg-black w-4"></div>
+    </div>
+  </div>
+</div>
+
+<style>
+.typing__cursor {
+  animation: blink 1s infinite, fadeOut 1s ease-in-out 2s;
+}
+
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.typing__text {
+  --typ-dur: 1s;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 0;
+
+  &:first-of-type {
+    animation: typing var(--typ-dur) steps(12) forwards, fadeOut 1s ease-in-out var(--typ-dur) forwards;
+  }
+
+  &:nth-of-type(2) {
+    animation: typing 1s steps(12) 2s forwards;
+  }
+}
+
+@keyframes typing {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    display: none;
+  }
+}
+
+</style>

src/pages/about.astro

@@ -1,6 +1,7 @@
 ---
 import Navigation from "../components/Navigation/Navigation.astro";
 import Layout from "../layouts/Layout.astro";
+import { ModelCanvas } from "../components/home/ModelCanvas";
 ---
 
 <Layout
@@ -17,6 +18,6 @@ import Layout from "../layouts/Layout.astro";
   }}
 >
   <Navigation>
-  <h1>hello</h1>
+    <ModelCanvas client:only="react" />
   </Navigation>
 </Layout>

src/pages/index.astro

@@ -1,8 +1,17 @@
 ---
 import Navigation from "../components/Navigation/Navigation.astro";
+// import { ModelCanvas } from "../components/home/ModelCanvas";
 import Layout from "../layouts/Layout.astro";
+import Simple from "../components/home/Simple.astro";
+import Typing from "../components/home/Typing.astro";
+import { ModelCanvas } from "../components/home/ModelCanvas";
 ---
 
 <Layout title="MCC" path="" og={{enabled: true}} pagefind={false}>
-  <Navigation />
+  <Navigation>
+    <div class="absolute top-0 left-0 w-full h-full bg-black opacity-20">
+      <ModelCanvas client:only="react" />
+    </div>
+    <Typing />
+  </Navigation>
 </Layout>

tailwind.config.mjs

@@ -6,12 +6,9 @@ export default {
 		fontFamily: {
 			sans: ["Hiragino Kaku Gothic ProN", "sans-serif"],
 			orbitron: ["Orbitron", "sans-serif"],
+      mono: ["JetBrains Mono", "monospace"]
 		},
 	},
 	plugins: [
-		({ addVariant }) => {
-			addVariant("child", "& > *");
-			addVariant("child-hover", "& > *:hover");
-		},
 	],
 };