2nd Deck Blog 2nd Deck Blog

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 매 렌더링된 프레임 전에 코드를 ..