분류 전체보기125 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. Electron + Vite + React 환경 세팅 살펴보기 나중에 Electron과 지금 공부하고 있는 Three.js를 엮어 작은 프로젝트를 해보면 좋겠다는 생각이 들었다.마침 Vite를 사용했을 때, 만족으러운 개발 경험을 했기 때문에 Vite도 쓸 수 있나? 했는데 딱 쓰기 좋은 템플릿이 보였다.간단하게 어떤 방법으로 환경을 간단히 구성할 수 있는지, 어떤 구성으로 되어있는지 살펴보기로. 서론에서 언급한대로, Electron과 Vite 환경을 쉽게 구성할 수 있나? 싶어 가볍게 살펴보았다. 몇 가지 방법이 있었는데 아래와 같다. 1. electron-forge의 vite 템플릿을 사용하기.Electron-forge는 OpenJS 재단에서 관리하고 있는 오픈소스 프로젝트이다.Electron으로 개발된 프로젝트의 패키징과 배포를 한 번에 처리할 수 있도록.. 2024. 11. 15. 이전 1 2 3 4 5 6 ··· 21 다음
