오늘도 조으네💜

ThreeJS

📌 Renderer에 그림자 사용 설정하기 Three.js에서 그림자 표현을 하기 위해서는 우선 렌더러 하단에 renderer.shadowMap.enabled를 true로 설정해 주어야 한다. renderer.shadowMap.enabled = true 위 설정을 해도 아래 이미지와 같이 그림자가 표현되지는 않는다. 추가로 몇 가지를 더 설정해야 한다! 📌 그림자를 받을 오브젝트와 그림자를 표현할 오브젝트 설정하기 빛을 받아 그림자를 표현할 오브젝트에 castShadow를 적용하고, 그림자를 받을 오브젝트에 receiveShadow를 적용한다. 구 형태의 오브젝트의 그림자를 표현할 것이므로 해당 오브젝트에 castShadow를 적용한다. // 구 오브젝트 const geometry1 = new THREE..

2023. 7. 31.

React

React에서 지원하는 ref와 JavaScript의 EventListener를 사용하여 외부 클릭을 감지할 수 있다. 🤔 ref란 ? ref 는 references 의 약자로, React 에서 특정 컴퍼넌트를 접근하는 데에 사용하거나 값이 변해도 리렌더링하지 않도록 하는 변수로도 사용할 수 있다. useRef라는 훅을 사용하여 ref를 활용한다. 📌 Hook기반의 컴포넌트로 구현하기 const ref = useRef()를 통해 ref 객체를 반환하고, div 요소에 ref={ref}값을 연결해준다. 이후 ref.current를 하면, 위에서 부여한 div 요소에 접근 가능한 id처럼 사용할 수 있다. 컴포넌트의 외부 클릭을 감지하려면 아래와 같이 감지 여부 조건을 활용할 수 있다. if (!ref.cu..

2023. 7. 30.

React

리액트 내에서도 CSS의 Transition과 Animation 속성을 이용하여 애니메이션을 구현할 수 있다. 하지만 상황에 따라 Animation 모듈을 이용하여 구현할수도 있다. 🤔 React에서 animation 모듈을 사용하는 이유 👉 UI가 화면에 보이지는 않지만 DOM에 존재한다. 모달창의 UI를 애니메이션 효과를 주어 화면에 부드럽게 보이고 사라지는 모션을 주고자 할 때, display:none/block 속성은 애니메이션 효과를 줄 수 없기에 height나 opacity를 조절하여 모션을 준다. 이 경우 화면상에는 보이지 않지만, HTML에는 존재하기 때문에 속도 저하나 접근성 면에서도 좋지 않다. 👉 state가 변경되어 재랜더링 시, 애니메이션이 동작하지 않는 경우가 있다. state의..

2023. 7. 26.

ThreeJS

Three.js에서는 여러 종류의 빛을 제공한다. 그중 몇 가지를 살펴보자! 📌 AmbientLight 전역에서 비추는 빛, 그림자 개념이 없다. const ambientLight = new THREE.AmbientLight(0xffffff, 0.7) // new THREE.AmbientLight(색상코드, 강도) scene.add(ambientLight) 그림자 표현 없이 전체적으로 조명을 비추는 모습으로 표현된다. 📌 DirectionalLight 특정 방향으로 빛을 방출한다. (ex.태양) 이 빛은 그림자가 생길 수 있다. const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5) scene.add(directionalLight) 아래 이..

2023. 7. 22.

ThreeJS

이번에는 3D 도형에 질감(Texture)을 표현해 보자! 우선 구 형태의 3D 도형 네 개를 만들어 로드했다. // 구 도형 추가 const geometry1 = new THREE.SphereGeometry(0.3, 32, 16) const material1 = new THREE.MeshStandardMaterial({ color: 0xeeeeee }) const sphere1 = new THREE.Mesh(geometry1, material1) sphere1.position.x = -2 scene.add(sphere1) const geometry2 = new THREE.SphereGeometry(0.3, 32, 16) const material2 = new THREE.MeshStandardMateri..

2023. 7. 10.

ThreeJS

// 도형 여러개 추가 (생략) const geometry = new THREE.TorusGeometry(0.3, 0.15, 16, 40) const material04 = new THREE.MeshBasicMaterial({ color: 0xff7f00 }) const obj04 = new THREE.Mesh(geometry, material04) scene.add(obj04) 도넛 모양의 도형을 여러 개 추가하였다. 이 도형에 입체감을 주기 위해 빛을 추가해 보자! // 빛 const pointLight = new THREE.PointLight(0xffffff, 1) pointLight.position.set(0, 2, 12) scene.add(pointLight) 빛을 추가했는데 아무런 변화가 없다..

2023. 7. 3.

ThreeJS

Three.js에서 3D 도형을 만드는 방법은 좌표의 점을 이은 선과 면으로 이루어진 도형인 Geometry와 색상, 질감을 표현하는 재질인 Material을 합쳐서 표현한다. 📌 3D 큐브 그리기 BoxGeometry는 주어진 '너비', '높이' 및 '깊이'가 있는 직육면체의 기하학 클래스이다. 생성 시 입방체는 각 모서리가 축 중 하나와 평행한 상태에서 원점의 중심에 배치된다. const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 도형의 크기 const material = new THREE.MeshBasicMaterial( {color: 0x000000} ); // 도형의 색상 const cube = new THREE.Mesh( geometry, materi..

2023. 7. 3.

TypeScript

📌 tsconfig.json 타입스크립트 설정 파일은 타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일이다. 타입스크립트 .ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정을 할 수 있다. 📌 tsconfig.json 설정 파일 속성 { "include": ["src/**/*"] // 변환할 폴더를 지정 "exclude": ["node_modules"] // include와 반대되는 속성으로 변환하지 않을 폴더 경로를 지정 "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "commonjs", //무슨 import ..

2023. 6. 25.