타이어 미리보기 컴포넌트 구현 close #28 #29
Conversation
| import { Wrapper } from './index.style'; | ||
| import * as THREE from 'three'; |
There was a problem hiding this comment.
P5: three가 3D 애니메이션 처리하는 라이브러리인 건가요~?
There was a problem hiding this comment.
맞습니다. Three.js라는 라이브러리를 사용했습니다.
| tire.rotation.y = Math.PI / 2; | ||
| scene.add(tire); | ||
|
|
||
| camera.position.z = 15; |
There was a problem hiding this comment.
타이어를 특정 각도로 배치하고, 사용자에게 보여주기 위해 카메라의 시점을 설정하는 부분입니다.
| return <Wrapper className="preview" />; | ||
| const mountRef = useRef<HTMLDivElement>(null); | ||
| const image = [liv, lug, livlug, block, v, bedeching]; | ||
| const [selectedPattern] = useRecoilState(selectedPatternState); |
There was a problem hiding this comment.
P5: useRecoilState란 훅은 어떤 역할을 하는 건가요? useState가 아닌 RecoilState를 selectedPattern에 사용한 이유가 궁금해요.
There was a problem hiding this comment.
React의 상태 관리 라이브러리 일종인 recoil을 사용하기 위해 컴포넌트에서 atom을 읽고 쓰기 위해 useRecoilState라는 훅을 사용하는데, '리액트의 useState와 비슷하지만 상태가 컴포넌트간에 공유될 수 있다는 점에서 차이가 있다.'고 합니다.
| renderer.setClearColor(0xffffff); | ||
| renderer.setSize(480, 300); | ||
|
|
||
| if (mountRef.current) { |
There was a problem hiding this comment.
P5: 이 부분에서 타이어 패턴 이미지들이 dom에 추가되는 건가요?!
There was a problem hiding this comment.
타이어 패턴 이미지를 활용하는 부분은 30번째 라인입니다.
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(image[selectedPattern]);
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.center.set(0.5, 0.5);
texture.rotation = Math.PI / 2;
texture.offset.set(0, 0);
texture.repeat.set(2, 8);| }; | ||
| }, [selectedPattern]); | ||
|
|
||
| return <Wrapper ref={mountRef} className="preview" />; |
There was a problem hiding this comment.
P5: return 값으로 () 없이 바로 < Wrapper />를 쓸 수 있는 이유가 궁금해요. ref는 이때 뭘 의미하는 것이고 어떤 식으로 < Wrapper />에서 사용되는지 궁금합니다!
There was a problem hiding this comment.
<Wrapper />: 제가 index.style.tsx에서 styled-components로 구현한 div 태그ref={mountRef}: 이 컴포넌트에 mountRef를 참조로 전달하여, Three.js 랜더러가 이 위치에 요소를 추가하도록 구현- return으로 Wrapper를 반환할 수 있는 이유:
.tsx파일은 react component를 다루는 파일로,Preview라는 이름의 함수형 컴포넌트를 사용할 경우 이를 반환하도록 구현하였음
Motivation
Problem Solving
To Reviewer