> Frontend/ThreeJS
-
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.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; // 그림자 맵 활성화 ..
-
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)..