2nd Deck Blog 2nd Deck Blog

1. emailjs.com 접속하여 Sign up 2. 'Add New Service'로 신규 생성 3. 'Connect Account'로 계정 연결하고 'Create Service' 클릭 4. Email Templates에서 'Create New Template' 클릭하고 기본적인 메세지 형식을 결정 5. 웹사이트에 입력할 API Key, Service ID, Template ID 위치 - Account에서 API Key 확인 - Email Services 탭에서 Service ID 확인 - Email Templates 탭에서 Template ID 확인 6. Submit 버튼에 아래 코드 입력 (해당 Key, ID 에 맞게 입력) const handleSubmit = (e) => { e.preventD..

상태 관리 라이브러리로 사용이 간편하고 굉장히 쉽다. 설치 npm install zustand 사용법 1. 스토어를 만든다. create 함수를 이용하여 상태와 그 상태를 변경하는 액션을 정의한다. import { create } from 'zustand' const useBearStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), })) 2. 구성 요소를 바인딩 한다. 후크를 사용, 상태를 선택하면 구성 요소가 변경시 리렌더링 된다. 컴포넌트에서 useStore를 사용할 때는 스토어에서 상태..

사용법 : Terminal에서 gltf 파일을 JSX로 변환하여 사용 Command npx gltfjsx [Model.glb] [options] Options --output, -o Output file name/path --types, -t Add Typescript definitions --keepnames, -k Keep original names --keepgroups, -K Keep (empty) groups, disable pruning --meta, -m Include metadata (as userData) --shadows, s Let meshes cast and receive shadows --printwidth, w Prettier printWidth (default: 120) --p..

1. Light - AmbientLight : 장면의 모든 개체를 전체적으로 동일하게 비춘다. 이 Light는 방향이 없기 때문에 그림자를 만드는데 사용할 수 없다. https://threejs.org/docs/?q=ambient#api/en/lights/AmbientLight - DirectionalLight : 특정 방향에서 나오는 Light로 마치 무한히 멀리 떨어져 있고 모두 평행한 것처럼 작동한다. 일반적으로 태양빛을 구현하는 것과 같다. https://threejs.org/docs/?q=directional#api/en/lights/DirectionalLight - SpotLight : 빛에서 멀어질수록 크기가 커지는 원뿔을 따라 한 방향으로 단일 지점에서 방출된다. https://threej..

Three.js에서 사용되는 가장 일반적인 Material은 아래와 같다. 1. MeshBasicMaterial - 간단한 음영(플랫 또는 와이어 프레임) 방식으로 형상을 그리기 위한 Material이며 조명의 영향을 받지 않는다. - 링크 : https://threejs.org/docs/#api/en/materials/MeshBasicMaterial 2. MeshNoramlMaterial - Normal Vector를 RGB 색상에 매핑하는 Material이며, 조명의 영향을 받지 않는다. - 링크 : https://threejs.org/docs/#api/en/materials/MeshNormalMaterial 3. MeshPhongMaterial - 반사 하이라이트가 있는 반짝이는 표면의 Materi..

1. Leva는 React Three Fiber 애플리케이션 View와 상호 작용할 수 있는 GUI 구성 요소이다. npm install leva 아래 예시는 Leva GUI에 색상 선택기를 표시하고 색상을 변경하면 캔버스의 배경색이 업데이트 한다. useControls는 React 재랜더링 간에 유지되며 useState 작동 방식과 유사하다. import { useControls } from 'leva' const color = useControls({ value: 'green', }) 도형을 회전시키고 색상 변경, Visible 설정하는 예제 import { Canvas } from '@react-three/fiber' import Polyhedron from './Polyhedron' import ..

1. axesHelper 는 간단한 방법으로 3개의 축을 시각화하는 데 도움이 되는 객체이며 Three.js 라이브러리의 일부로 React Three Fiber 캔버스를 사용할 때 기본적으로 포함되어 있다. X축은 빨간색, Y축은 녹색, Z축은 파란색이고 팔 길이를 조절할 수 있다. 2. gridHelper는 2차원 그리드롸 바닥이 어디에 있는지 또는 다른 경계를 생성하는 경우에 유용한다. gridHelper인수를 사용하여 변경할 수도 있다. 예를 들어 빨간색 중앙선과 청록색 격자선이 있는 20x20 격자이다. 다른 객체와 마찬가지로 회전할 수 있다.

1. Three.js App 개발할때 유용한 도구로 Stats Panel이 있다. 기본적으로 응용 프로그램의 프레임 속도가 표시되며, Stats Panel을 사용하면 최적화를 고려해야 하는지 또는 다른 접근 방식을 시도해야 하는지 여부를 빠르게 확인할 수 있다. Stats는 @react-three/drei를 추가해야 한다. @react-three/drei는 React Three Fiber와 함께 작동하도록 최적화된 유용한 도우미 및 모듈 모음이다. npm install @react-three/drei 2. OrbitControls은 Panning, Rotating과 Zooming을 할 수 있게 한다. 각각을 활성화/비활성화할 수 있고, 회전량을 제한할 수도 있다. import { Canvas } from..