10.6 목 - 메인프로젝트 데일리 회고

1. 랜딩페이지 제작

1.1 외부 소스 3d 모델링 파일 사용

• 참고자료
  • https://www.youtube.com/watch?v=wxvSHOrBHbw&list=PLK8VVt9yHQg77lSciXjvnCix0tp5R3l8R&index=25&t=1s

1. 3d 모델링 파일 .gltf 형식으로 다운로드
2. gltf → gltf2 로 포멧 변환 (gltf-pipeline 사용)
3. gltf2 → 자바스크립트 컴포넌트로 코드로 사용할 수 있도록 변환 (gltfjsx 사용)
4. 프로젝트에 파일 가져오기(gltf파일: public 폴더, js파일: components 폴더)
5. 컴포넌트로 변환한 js파일 export default로 변경

gltf2 포멧 변환

// gltf2 변환기 전역 설치
npm i -g gltf-pipeline
// 모델링 파일이 있는 폴더로 경로 이동
cd shiba
// 변환 실행(+ 변환된 파일명 지정)
gltf-pipeline -i scene.gltf -o shiba.gltf -d

컴포넌트로 변환

npx gltfjsx shiba.gltf
// shiba.gltf -> shiba.js 로 변환됨.

export default

// shiba.js

import React, { useRef } from 'react';
import { useGLTF } from '@react-three/drei';

// 변경
**export default** function Model(props) {
  const { nodes, materials } = useGLTF('/shiba.gltf');
  return (

// ...생략

react-three-fiber 라이브러리로 three.js 사용

/* eslint-disable react/no-unknown-property */
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Float } from '@react-three/drei';
import Shiba from './Shiba';

function Modeling() {
  return (
    <div>
      <Canvas>
        <OrbitControls enableZoom />
        <ambientLight intensity={0.5} />
        <directionalLight position={[-2, 5, 2]} intensity={1} />
        <Float speed={1.4} rotationIntensity={1.5} floatIntensity={2.3}>
          <Shiba />
        </Float>
      </Canvas>
    </div>
  );
}

export default Modeling;

귀여운 시바견을 불러왔다. 자동으로 회전하고 줌 인/ 줌아웃 된다.

three.js 사용하는 코드는 예전에 반응형 웹 과제 때 작성했던 코드 재사용 하였음.

모델링파일 기본크기 키우기

• 최상단 group 태그에 scale 속성값 적용

import React, { useRef } from 'react';
import { useGLTF } from '@react-three/drei';

export default function Model(props) {
  const { nodes, materials } = useGLTF('/shiba.gltf');
  return (
    <group {...props} dispose={null} scale={3}>

// ...생략

커진만큼 귀여움이 상승한다!

2. 발표자료 제작

39기-Team025-스테이버디-발표문서

발표 영상 가이드라인