> Frontend
-
TIL-2024.03.11 - 3js - Fonts - 2> Frontend/ThreeJS 2024. 3. 11. 19:00
목표: 글자의 중앙 정렬 Texture Spot Light ------- 중앙 정렬 // 1. BoundingBox를 사용한 중앙 정렬 textGeometry.computeBoundingBox(); // 객체의 경계 상자 textGeometry.translate( -(textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x) * 0.5, -(textGeometry.boundingBox.max.y - textGeometry.boundingBox.min.y) * 0.5, -(textGeometry.boundingBox.max.z - textGe ometry.boundingBox.min.z) * 0.5, ); // 이동 // 2. TextGeometry..
-
TIL-2024.03.06 - 3js - Fonts - 1. 3D 폰트 만들기> Frontend/ThreeJS 2024. 3. 7. 20:59
------- Fonts 목표: 순서: 1. font.json 파일을 준비하고, root > assers > fonts 아래 위치 2. Import import { FontLoader } from "three/addons"; import { TextGeometry } from "three/addons"; import { OrbitControls } from "three/addons"; 3. 코드 작성 /*Font Loader*/ const fontLoader = new FontLoader(); // 폰트 파일을 비동기적으로 로드하기 위한 FontLoader 인스턴스 const jamsilFont = await fontLoader.loadAsync("./assets/fonts/The Jamsil 5 Bol..
-
TIL-2024.03.04 - 3js - Resizing & Animation> Frontend/ThreeJS 2024. 3. 4. 22:15
------ Resizing Resizing 필요 이유: 창크기가 변경될때 Renderer가 변경되지 않아서, resizeEvent로 renderer의 사이즈 변경 const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); // 카메라 변경 후, 결과가 정상적으로 반영 renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); // 새롭게 render 된 내용을 반영 }; window.addEventListener("resize", handleResize)..
-
TIL-2024.03.03 - 3js - Light> Frontend/ThreeJS 2024. 3. 3. 23:39
------- Light // SECTION:: Light const directionalLight = new THREE.DirectionalLight(0xf0f0f0, 1); // MeshBasicMaterial 사용 시, 안보임 directionalLight.position.set(-1,2,3); const ambientLight = new THREE.AmbientLight(0xf0f0f0, 1); // MeshBasicMaterial 사용 시, 안보임 ambientLight.position.set(-1,2,3); scene.add(directionalLight, ambientLight) // MeshBasicMaterial을 사용할 때 광원이 보이지 않음. // MeshBasicMaterial은 빛..
-
TIL-2024.03.02 - 3js - 기초 Scene, Camera, renderer> Frontend/ThreeJS 2024. 3. 2. 17:26
import * as THREE from "three"; window.addEventListener("load", () => { init(); }); const init = () => { // SECTION:: SCENE const scene = new THREE.Scene({}); // SECTION:: Camera const camera = new THREE.PerspectiveCamera( 75, //field-of-view > extent of the scene that is seen on the display at any given moment window.innerWidth / window.innerHeight, // aspect ratio > width of the element divide..
-
TIL-2024.03.01 - Three.JS 기초> Frontend/ThreeJS 2024. 3. 1. 21:50
------- Three.JS 기본 구성 요소 1) Scene(화면 구성 요소) > container that holds all the objects, lights, and cameras in a 3D environment. It serves as the canvas where you place your 3D elements. 2) Camera (카메라): 만들어진 scene을 camera에 담음 > The Camera determines the viewpoint through which you observe the scene. > There are different types of cameras, such as PerspectiveCamera and OrthographicCamera 3) Rendere..
-
TIL-2024.02.08 - URL로 이미지 원본 사이즈 구하기> Frontend/JS 2024. 2. 8. 16:45
// API 를 통해 가지고 온 이미지 URL의 원본 사이즈 return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { resolve({width: img.naturalWidth, height: img.naturalHeight}); }; img.onerror = reject; img.src = fileUrl; }); > 02/07의 문제에서, scale를 사용할 경우, 원본 사이즈의 크기를 구해, img 태그의 width, height를 나눠서 scale 적용
-
TIL-2024.02.07 - 이미지에 원 그리기> Frontend/JS 2024. 2. 7. 23:28
이미지에서 마우스 클릭 이벤트가 발생한 경우, 해당 부위에 원 그리는 함수 // 이미지 위에 사용자 클릭 위치에 마커를 생성하는 함수 정의 const createClickMarker = (positionX, positionY) => { const markerElement = document.createElement("div"); markerElement.style.position = "absolute"; markerElement.style.left = `${positionX}px`; markerElement.style.top = `${positionY}px`; markerElement.style.width = "10px"; markerElement.style.height = "10px"; markerEl..