챌린지

안녕하세요... 아쉽게도 미션 실패 후기를 올리게됐네요 ㅠ 하.. 해커스 환급 챌린지도 성공했던 저였는데,, 역시 직장을 다니면서 챌린지를 하기란 쉽지않군요.. 26일, 야근에 지친 나머지 집 도착해서 침대에 잠깐 눕는다는 게 그대로 잠들어버렸네요 🥲 블로그 임시 글은 남겨놨는데 ㅠ 강의를 못들어서 실패일 것 같습니다.. 포항항 아쉽지만 챌린지 블로그 글은 여기까지 올리게 될 것 같아요. 그래두 강의는 끝까지 들을 예정이라 들으면서 종종 글은 작성하겠습니다! 그럼 안녕..😌

Part3 [Three.js]의 Chapter03 3D 텍스트 강의 후기(10~11강) 오늘은 텍스트에 그림자를 만들고 지난번에 텍스트에 텍스쳐를 입혔듯이 광원에도 텍스쳐를 입혀보았습니다. 그림자를 설정하려면 renderer의 설정부터! 변경해주셔야합니다. Three.js는 어떤 값을 변경할 때 바로 적용이 되는게 아니라 아래처럼 항상 특정 속성값을 true로 설정해줘야 적용이 되는 것 같네요.. renderer.shadowMap.enabled = true; 이후에는 그림자를 드리울 객체와 그림자를 받을 객체를 설정했습니다. 강의에서는 텍스트에 그림자를 드리우고 텍스트 뒤에있는 플레인메서드가 그림자를 받게 설정하였습니다. text.castShadow = true; ... plain.receiveShado..

Part3 [Three.js]의 Chapter03 3D 텍스트 강의 후기(08~09강) 오늘은 spolight 조명을 추가해서 텍스트 뒤쪽에 조명이 향하는 모습을 구현해보았습니다. spolight 조명은 촬영장에서 배우들을 비출 때 사용하는 그 조명을 생각하시면 되는데요, target값을 가지고있어서 어느곳을 향해 조명을 비출지 따로 조정할 수 있습니다. spolight 인스턴스 생성하는 건 다른 ambient, point light처럼 new THREE.Spolight로 생성할 수 있는데요, props가 다른 조명들과 다르게 좀 많아 보입니다. 차례대로 빛의 색상, 강도, 거리, 퍼지는 각도, 반그림자..?, 거리에따라 빛이 희미해지는 정도 를 나타냅니다. Three.js 공부할 때마다 모르는 단어들이..

Part3 [Three.js]의 Chapter03 3D 텍스트 강의 후기(06~07강) 오늘은 Text Geometry를 전반적으로 다듬는 작업을 진행했습니다. bevel값을 조정하고 texture를 입혀서 좀 더 다채롭게 보이게 하였습니다. bevel은 지난 포스트에서도 여러번 사용했었는데요, bevel과 관련된 속성은 geometry의 경사면을 조정할 수 있습니다. 대표적으로 depth, bevelThickness, bevelSize, bevelOffset, bevelSegments 등의 속성을 가집니다. 여기서 bevelSegments를 크게하면 레이아웃이 많아져서 좀 더 부드럽게 보이게 되는데요, 당연히 렌더링 비용도 많이 들기 때문에 주의해서 사용해야할 것 같습니다. 아 그리고 bevel 설정을..

Part3 [Three.js]의 Chapter03 3D 텍스트 강의 후기(04~05강) 오늘은 폰트를 비동기적으로 로딩하는 방법과 Text Geometry를 화면 가운데로 정렬하는 방법에 대해 배웠습니다. 지난 시간에 기본적인 otf, ttf 폰트를 typeFont로 변경 후 Three.js가 제공하는 FontLoader class를 사용해서 three.js에서 사용할 수있는 font 객체를 반환하고 이를 TextGeometry에 font 옵션으로 추가하여 적용하는 것까지 했는데요, 이때 코드를 보시면 텍스트로 추가한 값이 onLoad cb scope 에서만 유효하다는 것을 확인할 수있습니다. const fontLoader = new FontLoader(); // 1. load method fontLoa..

오늘은 이어서 Part3 [Three.js]의 Chapter03 3D 텍스트 강의를 들었습니다.(01~03강) 그럼 오늘 강의에서 배운 내용들과 느낀점을 간략하게 작성해 볼게요! 🔎01. 폰트 변환하기 Three.js에서 텍스트를 보여줄때는 text geometry를 사용하는데요, 이때 전달하는 폰트의 형식이 일반적으로 많이 사용하는 ttf,otf 같은 형식이 아니라 TypeFace라는 json 형식의 코드여야 합니다. 가장 간단히 적용해 볼 수 있는 폰트는 아래코드처럼 가져올 수 있는데요. import typeface from 'three/examples/fonts/gentilis_bold.typeface.json' 위 폰트들은 한글지원이 안되는지라 강의에서는 한글 지원이 되는 폰트를 새로 받은 후 T..