공부108 Three.js and TypeScript (10) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.29. JEasings 부터 30. GLTF Animations 까지.JEasings애니메이션에 사용할 수 있는 자바스크립트의 Easing 엔진.Easing: 사전적 의미로는 ‘완화’라는 의미를 갖는다. 애니메이팅에서는 애니메이션을 자연스럽게 만들기 위해 천천히 움직이도록 완화하는 기법을 의미하는 것 같다.일정 시간동안 물체의 속성을 새로운 값으로 변하도록 해주는 기능을 제공한다.아래의 값들을 설정할 수 있다.변환 시간새로이 설정할(변환될) 값시작하기 까지의 딜레이변환이 끝났을 때 실행될 스크립트변환 시간 동안 변환에 걸리는 시간을 변경하는 Easing 함수등등…강사분이 직접 만드신 패키지같다. Tween.js에 .. 2024. 11. 25. 프로그래머스 단어 변환 풀이 지난 글에서 프로그래머스 문제도 많이 풀어봐야 겠다고 다짐했었는데, 오늘에서야 건드려보기 시작했다(^^...문제 풀이 - 프로그래머스 단어 변환 DFS/BFS 문제. 단어 배열이 주어지고 시작 단어와 타겟 단어가 주어지면 시작 단어를 단어 배열 내에 주어진 단어로 차례차례 바꿔가며 타겟 단어를 만드는 것이 문제의 목표이다. 문제에서 주어지는 조건은 다음과 같다. 시작 단어에서 시작하여 주어진 단어 배열 내의 단어로 단어를 바꿔가며 타겟 단어를 만들어야 한다.이 때, 글자를 한 글자만 바꿀 수 있다. 즉 다음 단어로 고를 수 있는 단어는 바꾸기 전 단어와 '딱 한 글자만 차이나는 단어'이다.ex) lot에서 get(2글자가 차이난다)으로의 변환은 불가능하지만, let으로의 변환은 가능하다.변환을 완료하였.. 2024. 11. 24. 프록시 설정을 알아보자 회사 프로젝트를 하며 처음 프록시 관련 설정을 다뤄본 적이 있었는데, 그때부터 프록시에 대해 조금 정리해봐야겠다고 생각했었다.일단 Proxy란?Proxy Server (프록시 서버)클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 시스템 혹은 프로그램(위키피디아).프론트엔드가 프록시를 설정하는 주된 이유로는 개발 시 CORS에러를 방지하기 위한 경우가 많다.CORS(Cross-Origin Resource Sharing): 교차 출처 리소스 공유.풀이하면 ‘서로 다른 출처 간의 리소스 공유’라고 할 수 있다.‘출처(Origin)’이란 URL의 프로토콜, 호스트(도메인), 포트를 아울러 이르는 말이다. 두 URL이 출처를 이루는 모든 요소가 다 같다면 이들은 같은 출처를 가졌.. 2024. 11. 23. 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. 이전 1 2 3 4 5 ··· 18 다음
