공부/etc22 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. Three.js and TypeScript (5) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.14. Object3D Hierarchy 부터 17. Common Materials 까지.Object3D Hierarchy앞서 언급했듯 Three.js의 많은 객체들은 Object3D를 확장하는 클래스이다.Scene 또한 Object3D를 확장하고 있다.일반적으로 Three.js에서 장면을 구성할 때는 Scene 객체에 다른 Object3D 객체들을 add 메서드로 추가한다.이 때, Scene은 Object3D의 확장 객체이므로 Scene 자체를 회전시키거나 이동하는 것이 가능하다(일반적으로 그럴 일이 별로 없긴 하다고).또한, Object3D 객체에 add 메서드를 사용해 다른 Object3D 객체를 추가하는 것.. 2024. 11. 18. Electron + Vite + React 환경 세팅 살펴보기 나중에 Electron과 지금 공부하고 있는 Three.js를 엮어 작은 프로젝트를 해보면 좋겠다는 생각이 들었다.마침 Vite를 사용했을 때, 만족으러운 개발 경험을 했기 때문에 Vite도 쓸 수 있나? 했는데 딱 쓰기 좋은 템플릿이 보였다.간단하게 어떤 방법으로 환경을 간단히 구성할 수 있는지, 어떤 구성으로 되어있는지 살펴보기로. 서론에서 언급한대로, Electron과 Vite 환경을 쉽게 구성할 수 있나? 싶어 가볍게 살펴보았다. 몇 가지 방법이 있었는데 아래와 같다. 1. electron-forge의 vite 템플릿을 사용하기.Electron-forge는 OpenJS 재단에서 관리하고 있는 오픈소스 프로젝트이다.Electron으로 개발된 프로젝트의 패키징과 배포를 한 번에 처리할 수 있도록.. 2024. 11. 15. Three.js and TypeScript (4) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.11. Renderer 부터 13. Object3D 까지.RendererScene과 Camera에 대한 정보를 canvas 요소 내부에 그려내는 역할을 수행한다.Three.js에서 가장 보편적으로 쓰이는 Renderer는 WebGLRenderer이다.WebGL을 사용하여 GPU 가속 이미지 처리를 진행하고, Renderer가 canvas에 2D 이미지를 생성할 수 있도록 한다.⇒ 빠른 성능import * as THREE from 'three';const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight.. 2024. 11. 14. 이전 1 2 3 4 다음
