> Frontend
-
TIL-2024.04.20 - Canvas - 002 - Canvas 그리기> Frontend/Canvas 2024. 4. 21. 23:16
질문: 1. Canvas에서 그리기를 어떻게 구현할 수 있어 ? Canvas 엘리먼트 생성하기: - Canvas 엘리먼트를 생성하고 JavaScript를 사용하여 그래픽을 그리는 방법 > canvas 엘리먼트를 생성하고, id 속성을 통해 이 엘리먼트를 JavaScript에서 식별 Context(컨텍스트)와 그리기 명령: - Canvas는 그리기 명령을 처리하기 위해 2D 그래픽 컨텍스트를 제공 JavaScript로 Canvas 컨텍스트 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); 그리기 명령 사용 // 사각형 그리기 ctx.fillStyle = 'red'; // 색상 설정 ctx.fillR..
-
TIL-2024.04.19 - Canvas - 001 - Canvas 기초> Frontend/Canvas 2024. 4. 20. 19:02
질문: 1. Canvas가 무엇이야 ? Canvas: 정의: - JavaScript와 HTML을 사용하여 그래픽을 그릴 수 있는 HTML 요소. - Canvas는 그림을 그리고 그림을 조작하는 기능을 제공하며, Web App 에서 동적인 그래픽 및 애니메이션을 생성 가능한 도구 예제: 예제 결과: 실제 사용 예시: ... 생략 ... ... 생략 ... const fnDrawImageOnCanvas = img => { const ctx = imgCanvas.value.getContext("2d"); const image = new Image(); image.src = img?.fileUrl; // URL of the image image.onload = () => { ctx.drawImage(image,..
-
TIL-2024.03.17 - 3js - 3D 케릭터 만들기 - 2. Raycaster> Frontend/ThreeJS 2024. 3. 18. 01:10
목표: 1.Raycaster 란? 2.Raycaster 적용 Raycaster 란? 설명 레이캐스터는 가상의 광선이 씬(Scene) 안에서 물체와 교차하는지를 감지하는데 사용. 이 광선은 보통 카메라(Camera) 위치에서 특정 방향으로 뻗어나가는 것과 동일. 사용처 마우스 클릭과 같은 상호작용 이벤트 처리: - 사용자가 마우스를 클릭하면, 레이캐스터를 사용하여 마우스 클릭 지점과 씬 안의 객체 간의 교차점을 찾기. - 이를 통해 사용자가 클릭한 객체를 감지하고 해당 객체에 대한 작업을 수행. 충돌 감지(Collision Detection): - 레이캐스터를 사용하여 특정 객체나 지역과 광선이 교차하는지를 감지. - 이는 게임이나 시뮬레이션 등에서 객체 간의 충돌을 감지하고 처리하는 데 사용. 동작 원리..
-
TIL-2024.03.16 - 3js - 3D 케릭터 만들기 - 1> Frontend/ThreeJS 2024. 3. 18. 01:05
목표: gltfLoader를 통한 모델 불러오기 progressive bar - LoadingManager를 사용하여, 3D 모델 불러오는 중, 프로그레시브 바 표현 캐릭터 애니메이션 및 컨트롤 추가 gltfLoader를 통한 모델 불러오기: /*GLTF Loader*/ const gltfLoader = new GLTFLoader(loadingManager); // GLTF 로더를 생성합니다. const gltf = await gltfLoader.loadAsync("./models/character.gltf"); // GLTF 모델을 비동기적으로 로드합니다. const model = gltf.scene; // GLTF 모델의 씬을 가져옵니다. model.scale.set(0.1, 0.1, 0.1); //..
-
TIL-2024.03.15 - 3js - 3D 공간 만들기> Frontend/ThreeJS 2024. 3. 17. 18:03
목표: Cube Map Texture를 활용한 3차원 공간 표현 1.1) Texture Loader 1.2) Cube Texture Loader 360도 Panorama Texture를 활용한 3차원 공간 표현 envMap Cube Map Texture를 활용한 3차원 공간 표현: 1. Texture Loader /* 1. Cube Map Texture 를 활용한 3차원 공간 - 1. TextureLoader */ /* OrbitControls */ const control = new OrbitControls(camera, renderer.domElement); control.minDistance = 5; control.maxDistance = 100; /* Texture Loader */ const t..
-
TIL-2024.03.14 - 3js - Interactive Card - 1. 카드 모형 만들기> Frontend/ThreeJS 2024. 3. 14. 15:37
목표: Card Class Shape Geometry Extrude Geometry Orbit Controls 컨트롤 설정 GSAP을 이용한 애니메이션 구현 Card Class - card.js import * as THREE from "three"; class Card { constructor({width, height, color}) { const shape = new THREE.Shape() const geometry = new THREE.ShapeGeometry(shape); const material = new THREE.MeshStandardMaterial({color, side: THREE.DoubleSide}); // 정면만 렌더링 const mesh = new THREE.Mesh(geom..
-
TIL-2024.03.13 - JS - 엑셀 다운로드 (Excel Download in Vue)> Frontend/JS 2024. 3. 13. 11:15
목표: 버튼을 클릭 시, 저장된 값을 엑셀로 다운로드 하는 기능 1. yarn add xlsx 를 통한 외부 라이브러리 다운로드 (버전 0.18.5) yarn add xlsx@0.18.5 2. template에 button tag 생성하고, fnDownloadExcel를 바인딩 ... 중략 ... 다운로드 ... 중략 ... 3. Script Setup에 fnDownloadExcel , fnExtractProperties 등을 작성 4. 결과
-
TIL-2024.03.12 - 3js - Fonts - 3> Frontend/ThreeJS 2024. 3. 12. 23:46
목표: 마우스 인터렉티브 Shadow 후처리 (EffectComposer) 마우스 인터렉티브: /* Mouse Interaction : 커서의 움직임에 따라 spotLight도 움직임 */ window.addEventListener("mousemove", (event) => { const x = ((event.clientX / window.innerWidth) - 0.5) * 5; const y = -((event.clientY / window.innerHeight) - 0.5) * 5; // ThreeJS 와 y 좌표 다름 spotLight.target.position.set(x, y, -3); }); Shadow: renderer.shadowMap.enabled = true; // 그림자 맵 활성화 ..