본문 바로가기

JavaScript/Three3

GSAP (GreenSock Animation Platform) GSAP (GreenSock Animation Platform) – 개요 & 3가지 주요 개념GSAP은 강력한 애니메이션 라이브러리로, HTML, CSS, SVG, WebGL, Three.js 등 다양한 요소에 애니메이션을 적용할 수 있습니다.3가지 주요 개념기본 애니메이션 (gsap.to(), gsap.from(), gsap.fromTo())타임라인 애니메이션 (gsap.timeline())스크롤 애니메이션 (ScrollTrigger, ScrollToPlugin)기본 애니메이션 – gsap.to(), gsap.from(), gsap.fromTo() 1. gsap.to() – 특정 속성으로 변화요소의 속성을 지정된 값으로 애니메이션gsap.to(".box", { x: 300, duration: 2 });.. 2025. 3. 7.
R3F(React Three Fiber)의 기본 요소와 기본 문법 Three.js(https://threejs.org/docs/) three.js docs threejs.orghttps://docs.pmnd.rs/ Poimandres documentationIndex of documentation for pmndrs/* librariesdocs.pmnd.rs 리액트에서 R3F 사용하기# create packagebun create vite learn-r3f# node module installbun install# dev run bun run dev# threebun add three @types/three @react-three/fiber# Drei: R3F에서 사용할 수 있는 유용한 컴포넌트들을 모아놓은 라이브러리bun add @react-three/drei .. 2025. 3. 6.
Three js 시작하기 설치하기npm install three// bun bun add three패키지 불러오기///////////////////////////////////////////////////////// 방법 1:import * as THREE from 'three';const scene = new THREE.Scene();///////////////////////////////////////////////////////// 방법 2:import { Scene } from 'three';const scene = new Scene();static 호스팅 (type="module"을 사용)WebGL 호환성 검사몇몇 디바이스나 브라우저는 아직 WebGL 2을 지원하지 않는다.(아래 메서드는 지원 여부를 체크해 가능한지 아.. 2025. 2. 28.

티스토리툴바