👒내 포트폴리오 웹사이트 만들기👒 : 3D 모델 넣기(three.js)

우리 멍댕한 태영이...공부 열심히 해야 할 텐데

즐추즐추

---

 

아래 은하수를 넣을 생각이당

Need some space? - Download Free 3D model by Loïc Norgeot - Sketchfab

three.js를 사용한당

Three.js – JavaScript 3D Library

---

👒 3D 모델 넣기

뭐지,.,.,, 별이

안 반짝거려... 그리고 색깔도 안 나온다

n시간의 사투,,,

포기

 

새 아이들 찾기

 

Night sky - Download Free 3D model by Moonwise - Sketchfab

Space Station 3 - Download Free 3D model by re1monsen - Sketchfab

 

Black Hole - Download Free 3D model by NestaEric - Sketchfab

ㅠㅠ저 은하수가 제일 이뻣건만

---

👒 Three.js로 모델 다루기

import React, { useRef, useEffect, useState } from 'react';
import { useLoader, useFrame } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { Group } from 'three';

function MyGLBModel(): JSX.Element {
  const model = useRef<Group>(null!);
  const gltf = useLoader(GLTFLoader, '/model3d/moon.glb');

  // 드래그 상태 및 회전 속도 관리
  const [isDragging, setIsDragging] = useState(false);
  const previousPosition = useRef({ x: 0, y: 0 });
  const rotationVelocity = useRef({ x: 0, y: 0 }); // 모델의 회전 속도
  const friction = 0.95; // 관성 감속률 (0에 가까울수록 빨리 멈춤)
  const rotationSensitivity = 0.01; // 회전 감도

  useEffect(() => {
    const handlePointerDown = (event: PointerEvent) => {
      setIsDragging(true);
      previousPosition.current = { x: event.clientX, y: event.clientY };
      rotationVelocity.current = { x: 0, y: 0 }; // 회전 속도 초기화
    };

    const handlePointerMove = (event: PointerEvent) => {
      if (isDragging && model.current) {
        const deltaX = event.clientX - previousPosition.current.x;
        const deltaY = event.clientY - previousPosition.current.y;

        model.current.rotation.y += deltaX * rotationSensitivity;
        model.current.rotation.x += deltaY * rotationSensitivity;

        rotationVelocity.current = { x: deltaY * rotationSensitivity, y: deltaX * rotationSensitivity };

        previousPosition.current = { x: event.clientX, y: event.clientY };
      }
    };

    const handlePointerUp = () => {
      setIsDragging(false);
    };

    window.addEventListener('pointerdown', handlePointerDown);
    window.addEventListener('pointermove', handlePointerMove);
    window.addEventListener('pointerup', handlePointerUp);

    return () => {
      window.removeEventListener('pointerdown', handlePointerDown);
      window.removeEventListener('pointermove', handlePointerMove);
      window.removeEventListener('pointerup', handlePointerUp);
    };
  }, [isDragging]);

  useFrame(() => {
    if (!isDragging && model.current) {
      model.current.rotation.y += rotationVelocity.current.y;
      model.current.rotation.x += rotationVelocity.current.x;

      rotationVelocity.current.x *= friction;
      rotationVelocity.current.y *= friction;

      if (Math.abs(rotationVelocity.current.x) < 0.001) rotationVelocity.current.x = 0;
      if (Math.abs(rotationVelocity.current.y) < 0.001) rotationVelocity.current.y = 0;
    }
  });

  return (
    <>
      {/*  전역 조명 */}
      <ambientLight intensity={0.4} color="#ffffff" />

      {/*태양광 */}
      <directionalLight position={[5, 10, 5]} intensity={3} color="#ffffff" />

      {/* 포인트 라이트*/}
      <pointLight position={[-5, 5, 5]} intensity={5} color="#ffcc00" distance={20} />

      {/* 스포트 라이트 */}
      <spotLight position={[5, 10, 5]} angle={0.3} penumbra={0.5} intensity={2000} color="#8258FA" />
      <spotLight position={[2, 7, 5]} angle={0.3} penumbra={0.5} intensity={2000} color="#2E9AFE" />
      <spotLight position={[8, 3, 2]} angle={0.3} penumbra={0.5} intensity={1000} color="#A9A9F5" />
      <spotLight position={[20, 10, 15]} angle={0.3} penumbra={0.5} intensity={2000} color="#fffff" />

      <primitive
        object={gltf.scene}
        ref={model}
        scale={[5, 5, 5]}
        position={[0, 0, 0]} // 초기 위치
      />
    </>
  );
}

export default MyGLBModel;

드래그에 따라 모델이 회전하도록 했다

빛도 좀 넣고 

크기랑 화각 조절 등등

 

근데

스크롤이 감지가 안 돼

왜지감자

---

👒 Git LFS를 사용하여 큰 파일 푸시하기

remote: error: File public/model3d/space_station_3.glb is 114.88 MB; this exceeds GitHub's file size limit of 100.00 MB

이런! 용량 초과다

 

 Git LFS(Git Large File Storage)

Git LFS를 사용하면 큰 파일을 GitHub에 업로드할 수 있으며, 실제 파일은 별도의 LFS 스토리지에 저장

 

Git LFS 설치

brew install git-lfs

 

Git LFS 초기화

git lfs install

 

glb 파일 형식을 Git LFS로 추적

git lfs track "*.glb"

---

 

http://goldchae-portfolio.info

Goldchae Portfolio

으아아아악

안 뜨잖아앙악

 

쎄햇어... lfs에 따로 저장하면 제대로 될까?

안돼!

 

해결 노력...

을 하기가 싫어졌다

그냥 용량 작은 걸로 올릴래

흑흑 21mb로..

안돼! 화질 ㅠㅠㅠㅠㅠ

그냥 어벤던

으음 둘 중 뭐로 하지

 

달 채택!

---

아 ㅋㅋ

그냥 안 되네

lfs문제는 아니었나봄

ㅋㅋ

하...........그래.........

ec2인스턴스에 들어가보자

 

Docker 컨테이너에 접속

docker exec -it <container_id> /bin/sh

 

GLB 파일의 위치 확인

ls /usr/share/nginx/html/model3d/

moon 있는데!!!!??

어 그런데 파일 크기가 엄청 작다!!!!

원래 50mb정도인데 133바이트임???

 

아 뭐지뭐지..

일단 직접 파일 넣어본다

 

내 로컬 -> ec2 인스턴스로 파일 복사 

scp -i /path/to/your-ec2-key.pem /path/to/local/moon.glb ec2-user@<EC2_PUBLIC_IP>:/home/ec2-user/

 

 EC2에서 Docker 컨테이너로 파일 복사

docker cp /home/ec2-user/moon.glb <컨테이너id>:/usr/share/nginx/html/model3d/moon.glb

컨테이너로 접속해서 확인해보면! 49mb로 파일이 제대로 들어왔다!

성공

아싸!!!!!!

그래서.....

이제 어쩌지

또 깃헙액션하면 날아갈텐데...

몰라 졸리다 일단 자

- 스크롤 미인식 문제 해결

- 깃헙액션으로 glb잘 전달할 방법 모색

---

군대간애옹

ㅋㅋㅋㅋㅋㅋㅋ냥찍기

사람들이 임티를 잘 쓰는 것 같아서 기쁘군

귀엽게그리긴햇어!