2nd Deck Blog 2nd Deck Blog

사용법 : 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..

1. three.js에서 raycast 메서드(mesh, line etc)를 구현하는 개체는 이벤트를 선언하여 상호 작용할 수 있다. onUpdate는 객체가 새로운 props가 가지면 불러온다. 2. Events console.log('click')} onContextMenu={(e) => console.log('context menu')} onDoubleClick={(e) => console.log('double click')} onWheel={(e) => console.log('wheel spins')} onPointerUp={(e) => console.log('up')} onPointerDown={(e) => console.log('down')} onPointerOver={(e) => consol..

1. useRef 구성 요소 인스턴스의 속성을 읽거나 수정하려는 경우, 해당 인스턴스에 대한 참조를 가져올때 사용한다. 2. useEffect 구성 요소가 렌더링 후 작업을 수행해야 함을 React에 다시 알린다. 여기에서는 Three.js 객체로 변환하고 그 속성을 다시 가져와 로직을 수행하도록 한다. -> Three.js 객체 정보를 이용할때 useRef와 함께 사용 import { useRef, useEffect } from 'react' export default function Box(props) { const ref = useRef() useEffect(() => { console.log(ref.current) }) return ( ) } 3. useFrame 매 렌더링된 프레임 전에 코드를 ..