실전 압축 코딩

https://ljy1011.tistory.com/224 [React.js] generator(제네레이터) 를 활용해 3D 에니메이션 만들기! with react three fiber/ framer-motion / react포트폴리오 제작중, 3d text mesh의 역동적인 움직임을 중심으로 나를 표현 하는 3d 에니메이션을 만들어 보고 싶다는 생각이 들었다. 그래서 three.js 관련된 라이브러리를 사용해 구현해 보기로 하ljy1011.tistory.com이어서. 이번에는 react-trhee-fiber 를 활용해 3d text geometry를 생성해 보도록 하겠다. 설치 라이브러리npm i three three-stdlib @react-three/fiber @react-three/drei @re..

포트폴리오 제작중, 3d text mesh의 역동적인 움직임을 중심으로 나를 표현 하는 3d 에니메이션을 만들어 보고 싶다는 생각이 들었다. 그래서 three.js 관련된 라이브러리를 사용해 구현해 보기로 하였다.  설치 라이브러리npm i three three-stdlib @react-three/fiber @react-three/drei @react-three/rapier framer-motion framer-motion-3d 1. three설명: WebGL 기반 3D 그래픽을 쉽게 구현할 수 있는 JavaScript 라이브러리.용도: 3D 모델링, 애니메이션, 조명, 텍스처 맵핑 등 3D 그래픽의 기본적인 빌딩 블록 제공.2. three-stdlib설명: Three.js의 추가 유틸리티 모음.용도: ..

Next.js 에서.glsl 확장자 shader 파일을 import 해보기 next.config.js 에서 webpack loader 설정next.config.js에서 webpack 로더 설정을 커스터마이징하려면 next에서 제공하는 webpack 함수 를 확장하여 사용할 수 있다.next.config.js 파일 내에서 module.rules에 새로운 로더 설정을 추가하는 방식으로 원하는 파일 형식에 대해 로더를 설정 하면 된다. /** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: false, webpack: (config, options) => { config.module.rules.push( //..