drawingwithcode

drawingwithcode copied to clipboard

threejs 로 만드는 인터랙티브 웹 사이트

GLB 애니메이션

• Demo: https://webgldev.github.io/glbanimation/
• Repo: https://github.com/webgldev/glbanimation
• html, css, js, vite, threejs

ScrollAnimation 스크롤 애니메이션

• Demo: https://webgldev.github.io/scroll/
• Repo: https://github.com/webgldev/scroll
• 새로고침/스크롤/직접접속 시 파라미터 & GLB 위치 업데이트
• html, css, js, vite, threejs, GSAP, scrollTrigger

CreatePlanet 3D 게시판 행성 생성

• Demo1: https://webgldev.github.io/wish/
• Demo2: https://webgldev.github.io/wish2/
• express, supabase, notion database, bcrypt
• html, css, js, vite, threejs

CangeApple 버튼 클릭 GLB -> GLB 모델 변경 시 셰이더 효과 적용

• Demo: https://webgldev.github.io/change3d/
• html, css, js, vite, threejs, GLSL

ChangeDance 버튼 클릭 GLB 리깅 애니메이션 변경

• Repo: https://github.com/webgldev/weeklydance
• create 3d character, add mixamo animation, change animation
• html, css, js, vite, threejs

RainEffect 날씨 효과 gulp -> React, Vite 로 리팩토링

• Repo: https://github.com/js-diffusion/raineffect
• react, vite, gulp, GLSL

FallingLeaves

• 나뭇잎 애니메이션 (GLB 특정 요소에 애니메이션 효과)
• Repo: https://github.com/webgldev/leaf
• html, css, js, threejs

BakeryModeling

• 블렌더 3D 모델링 후 웹에 띄우기
• Repo: https://github.com/webgldev/bakery
• threejs, blender

HandTracking

• 배포안함
• 손 추적 웹 카메라로 몰랑이 쓰담쓰담
• html, css, js, vite, threejs, mediapipe

ExampleCard 예제 코드 생성 카드

• 배포안함
• html, css, js, OpenAI API

Chrome devtools

• 배포안함
• 개발자도구 디버깅 스터디

Image to 3D (ComfyUI)

• 배포안함
• Create 3d from 2d image

Web Graphics

• 오프라인 세미나 24.06 (PPT)
• https://docs.google.com/presentation/d/10Lm4UnPyj8IY6KG7ZPjkSoAcw-6XB0CmG6EuoAqks6M/edit?usp=sharing

Computer Graphics for Web Development

• 온라인 밋업 24.02 (PPT)
• https://docs.google.com/presentation/d/1fekpdBrNtVm4jZoUzntAA6Qdin-Xaj2FXx_8JaHmsek/edit?usp=sharing

CSS, SVG, Animation book

• Demo: https://webgldev.github.io/svg-basic/
• Repo: https://github.com/webgldev/svg-basic
• html, css, js, svg