THREE.LineSegments로 격자 그리기
3D 에서 개발하다보면 위치 확인차 바닥면을 기준으로 볼 수 있는 그리드가 필요해서 만들어 보았다.
Entries by 302chanwoo
Canvas Method
Canvas에서 사용하는 Method 정리
성수동 벽화
성수동에 대해서 처음 알게되었을 때에는 단지 성수동의 재미난 공간을 수집해서 기록하고 싶었다. 사람들에게 널리 알려진 대림창고나 커먼그라운드, 서울 숲, 그리고 새로 생겨난 아기자기한 카페들. 그 공간에 관심을 가지고 성수동을 돌아다니면서 사진을 찍었다. 하지만 성수동 구석구석을 돌아다녔을 때 오히려 내 눈에 들어온 것은 벽화였다. 길을 걷다보면 구석구석에 많은 벽화들과 마주할 수 있다. 빌라의 담, 놀이터를 둘러싸고 […]
Mesh의 일정 영역을 잘라내기
csg.js는 두개의 3D 모델이 겹쳐있을 때 하나로 합치거나 겹쳐있는 영역만 빼야 하는 경우에 사용할 수 있는 라이브러리이다. ThreeCSG.js를 사용하면 csg.js를 Three.js에서도 사용할 수 있다.
화면 크기의 정보를 Redux로 관리하기
React Component에서 따로따로 resize 이벤트를 거는 것보다 Redux를 통해서 한 군데에서 관리하는게 낫지 않을까 하는 생각에 Redux를 시작.
Three.js 에서 ShaderMaterial 사용하기 – 1
Three.js에서 제공해주는 예제들을 하나하나 보다보면 Shader를 직접 만들어서 사용하는 예제들이 많다. Three.js에서 제공해주는 Material 중에서 직접 셰이더를 작성해서 적용할 수 있는 ShaderMaterial이 있어서 간편하게 셰이더를 적용해 볼 수 있다. 다만 셰이더를 작성하는 GLSL이 생소하고 예제를 보면서 이해하기에는 어려움이 많아 기본적인 셰이더의 예시를 제공해주는 블로그가 있어서 참고하였다.
Web Worker 사용하기
웹워커는 Background Thread에서 스크립트를 실행하는 방법이다. UI Thread와는 별개의 Thread를 실행시켜 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있다. – Thread란 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위를 말한다. 일반적으로 한 프로그램은 하나의 스레드를 가지고 있지만, 프로그램 환경에 따라 둘 이상의 스레드를 동시에 실행할 수 있다. 이러한 실행 방식을 멀티스레드(multithread)라고 한다. ( 출처 : […]
iframe과 메시지 전달
window.postMessage를 이용하면 iframe안의 페이지와 메시지를 주고 받을 수 있다.
Geometry 합치기
다수의 Mesh를 scene에서 사용할 때 performance를 향상시키기 위한 방법 중의 하나가 Geometry merge이다. 같은 material를 사용할 때 가능한 방법으로 다수의 mesh를 사용하는 것이 아니라 다수의 geometry를 생성하여 하나로 병합한 후에 mesh 하나만을 사용하는 것이다.