오블완21 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. 백준 17837번 새로운 게임 2 풀이 solved.ac 의 그래프를 간만에 보니 시뮬레이션이나 구현 쪽 문제를 많이 안 풀어본 것 같길래? 간만에 알고리즘 문제 풀이를 재개했다.문제 풀이 - 백준 17837번 새로운 게임 2 구현/시뮬레이션 문제로, 주어진 룰에 맞춰 게임을 진행한 후, 게임 종료 조건을 만족하는 턴이 언제인지를 구하는 문제이다. 조건은 아래와 같다.N x N 체스판이 주어진다. 이 체스판은 각 칸이 흰색(0), 빨간색(1), 파란색(2)중 한 색으로 칠해져있다.1번부터 K번 까지의 말이 존재하고, 이 말은 각각 진행할 수 있는 방향이 정해져있다.체스판 한 칸 위에 복수의 말이 존재할 수 있다. 이 때, 말을 아래에서 위로 차례로 쌓는다.1번부터 K번 까지의 말은 순서대로 자신의 정해진 방향에 따라 한 칸씩 이동하는데, 이.. 2024. 11. 17. 웹소켓 연결을 해보자 (커스텀 웹소켓 훅 만들어보기) 이 글은 전에 작성했던 게시물과 이어진다. 지난번 실시간으로 데이터를 가져오는 것에 대한 몇 가지 방법에 대해 작성했었다.당시 작성했던 웹소켓 연결 코드는 정말 간단한 부분만 구현되어 있었기 때문에, 좀더 그럴싸하게(?) 보충할 수 있지 않을까 하고 몇 가지를 추가해보았다.※ 아래의 코드는 핵심적인 부분만 발췌해 추가하였기에 실제로 사용하려면 개인의 환경에 맞게끔 보완하는 과정이 필요하리라 예상된다.초기 코드 서론에서 이미 언급했듯 초기 코드는 상당히 기본적인 기능만 구현되어있었다. 아래가 대강의 초기 코드를 재현한 코드이다. 나중에 다른 페이지에서도 사용할 수 있게 만들기 위해 커스텀 훅의 형태로 구현한 모습이다.import { useEffect } from 'react';export const us.. 2024. 11. 16. 이전 1 2 3 4 다음
