[FE] [01-02] 우주 배경 생성 #80
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- vite-tsconfig-paths 설치 - tsconfig.json, vite.config.ts 파일 수정 Co-authored-by: MinboyKim [email protected] Co-authored-by: bananaba [email protected]
- getGaussianRandomFloat은 평균과 편차를 인수로 받고, 정규분포에 따라 랜덤 값을 리턴함 - getRandomInt는 최솟값과 최댓값을 인수로 받아 그 사이의 랜덤 정수 값을 리턴함 - getRandomFloat는 최솟값과 최댓값을 인수로 받아 그 사이의 랜덤 실수 값을 리턴함 Co-authored-by: MinboyKim [email protected] Co-authored-by: bananaba [email protected]
- backgroundStars와 space에 관련된 상수 추가 Co-authored-by: bananaba <[email protected]> Co-authored-by: Minboy <[email protected]>
- 3D 요소들을 렌더링할 canvas 컴포넌트 생성 - 개발의 편의성을 위해 axesHelper 임시 추가 Co-authored-by: bananaba <[email protected]> Co-authored-by: MinboyKim <[email protected]>
- 배경에 보일 별들이 담긴 컴포넌트 - pointsMaterial 사용 - 느린 속도로 공전하도록 함 Co-authored-by: bananaba <[email protected]> Co-authored-by: MinboyKim <[email protected]>
- position, size, color를 인수로 받음 - 추후 기능 개발 과정에서 props와 event가 추가될 예정 Co-authored-by: bananaba <[email protected]> Co-authored-by: MinboyKim <[email protected]>
4 tasks
Capoomaru
reviewed
Nov 15, 2023
Comment on lines
+18
to
+24
| const colors = Array.from({ length: BACKGROUND_STARS_NUM }, () => { | ||
| const color = new THREE.Color( | ||
| BACKGROUND_STAR_COLORS[getRandomInt(0, BACKGROUND_STAR_COLORS.length)], | ||
| ); | ||
|
|
||
| return [color.r, color.g, color.b]; | ||
| }).flat(); |
There was a problem hiding this comment.
안녕하세요! 올려주신 블로그 글 보고 왔습니다!!
큰 의미는 없지만 (조금이나마) 최적화 할 수 있지 않을까 하여 리뷰 남깁니다!
아직 개발중이라 BACKGROUND_STAR_COLORS의 개수가 적은지 모르겠으나
반복적으로 new THREE.Color로 객체를 생성 중이신 것 같아서 아래와 같이 const 내에서 관리하는 것은 어떨까 하여 코멘트 남겨드립니다!
// constants/backgroundStars
const BACKGROUND_STAR_COLORS = [
new THREE.Color('#8fa8f6'),
new THREE.Color('#b4ffb8'),
new THREE.Color('#ffdd8f'),
new THREE.Color('#ff8fba'),
];
// index.tsc
const color = BACKGROUND_STAR_COLORS[getRandomInt(0, BACKGROUND_STAR_COLORS.length)];
return [color.r, color.g, color.b];제가 백엔드라 THREE.js 를 잘 몰라 의미가 있을까 싶긴합니다..! 잘못된 정보라면 무시하셔도 괜찮습니다 😊
재밌어서 구경하다가 보여서 도움이 되지 않을까하여 남겨드립니다!!
남은 프로젝트도 화이팅하세요 💪
Member
Author
There was a problem hiding this comment.
코멘트 감사합니다 🫶🏻
팀원들 모두 좋은 아이디어라고 좋아하네요
적용해보겠습니다!
좋은 의견 내주셔서 감사합니다 🕺🏼
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📎 이슈번호
#72
📃 변경사항
📌 중점적으로 볼 부분
🎇 동작 화면
2023-11-14.7.39.46.mov
💫 기타사항
@bananaba , @MinboyKim 과 페어프로그래밍