공부/etc19 Three.js and TypeScript (11) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.31. GLTF DRACO 부터 33. Rapier Debug Renderer 까지.DRACO loader three.js docs threejs.org 3D Mesh를 압축하거나 압축을 풀기 위해 사용하는 오픈소스 라이브러리.그동안 사용해온 GLTF 파일도 압축될 수 있으며, GLTFLoader를 통해 불러오는 것도 가능하다. gltf-transform 설치gltf 파일 형식을 읽고, 수정할 수 있게 한다(참고)강의에서는 모델 파일을 압축하기 위해 사용한다.// 설치yarn global add @gltf-transform/cli// 예제 파일을 압축한다gltf-transform optimize './public/.. 2024. 12. 3. Three.js and TypeScript (10) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.29. JEasings 부터 30. GLTF Animations 까지.JEasings애니메이션에 사용할 수 있는 자바스크립트의 Easing 엔진.Easing: 사전적 의미로는 ‘완화’라는 의미를 갖는다. 애니메이팅에서는 애니메이션을 자연스럽게 만들기 위해 천천히 움직이도록 완화하는 기법을 의미하는 것 같다.일정 시간동안 물체의 속성을 새로운 값으로 변하도록 해주는 기능을 제공한다.아래의 값들을 설정할 수 있다.변환 시간새로이 설정할(변환될) 값시작하기 까지의 딜레이변환이 끝났을 때 실행될 스크립트변환 시간 동안 변환에 걸리는 시간을 변경하는 Easing 함수등등…강사분이 직접 만드신 패키지같다. Tween.js에 .. 2024. 11. 25. Three.js and TypeScript (9) 27. Orbit Controls 부터 28. Lerp 까지.Orbit Controls카메라가 타켓 근처 궤도를 돌도록 한다.별도의 설정을 하지 않았을시, 마우스를 통해 다양한 조작을 할 수 있다.마우스 왼쪽 클릭 시 카메라를 회전한다.마우스 휠로 줌 인/줌 아웃을 할 수 있다.마우스 오른쪽 클릭 시 Panning(pan: ’카메라가 대상을 따라다니며 보여주다, 찍다’ 라는 의미) 한다.Orbit Controls가 설정된 카메라가 바라보는 타겟을 이동시키는 행위인 듯.addons에서 import 하여 사용할 수 있다.생성자는 2개의 인자를 받는다.object: 컨트롤될 카메라 객체. Scene 이외의 다른 객체의 자식이어선 안 된다.domElement: 이벤트 리스너에 사용될 HTML 요소.import .. 2024. 11. 22. Three.js and TypeScript (8) 24. GLTF Loader : Part 1 부터 26. Raycaster 까지.GLTF LoaderGLTF (GL Transmission Format)3D Scene과 모델들의 효율적인 전송과 로딩을 위한 파일 형식.3D 에셋의 크기 및 에셋들을 분석하는데 걸리는 시간을 최소화한다.하나의 GLTF 파일은 하나 혹은 그 이상의 Scene, Meshes, Materials, Textures, Skeletons, Cameras, 기타 등등을 포함할 수 있다.에셋은 JSON 형식(gltf) 혹은 이진 파일(glb)의 형태로 제공될 수 있다.3D 모델링 툴인 블렌더(Blender)를 통해 gltf 파일을 내보낼 수 있다. 구성GLTFLoader로 gltf 파일을 불러온 후, 콘솔로 확인해보면 아래와 같은 각종 .. 2024. 11. 21. Three.js and TypeScript (7) 21. Environment Maps 부터 23. Loading Multiple Assets 까지.Environment MapsEnvironment Mapping: 미리 계산된 텍스쳐를 사용해서 빛을 반사하는(reflective) 표면을 묘사하는 이미지 기반 lighting 기술.MeshStandardMaterial이나 MeshPhysicalMaterial을 쓸 때 가장 좋은 결과물을 얻을 수 있다고 한다.⇒ PBR (Physically Based Rendering) Materials정의를 종합해서 생각해보길, 주변 물체의 표면을 렌더링하는데 영향을 줄 환경을 설정하고, 그 환경이 물체 표면에 반사되어 보이는 것처럼 만드는 것을 의미하는 것 같다. 구현import * as THREE from 'three.. 2024. 11. 20. Three.js and TypeScript (6) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.18. lil-gui 부터 20. Shadows 까지.lil-guidat GUI의 대체재로 개발된 라이브러리.dat GUI는 아직도 유용하고 잘 쓰이지만 유지보수가 되고있지 않고 있다(2022년 이후로 활동이 없는 상황).Three.js 135 릴리즈 까지 공식 예제에서 사용되다, 이후로 lil-gui로 대체되었다.원문에서는 ‘Drop-in replacement’ 인데, 찾아보길 ‘별다른 코드 변경이나 부정적인 영향 없이 하드웨어/소프트웨어 컴포넌트를 변경하는 것’을 의미한다고. dat GUI → lil-gui 로의 전환lil-gui와 dat GUI는 거의 똑같기 때문에, 일반적으로는 그냥 import 문을 da.. 2024. 11. 19. 이전 1 2 3 4 다음
