Weeeeey Weeeeey

Three.js 는 크게 Scene, Camera, Render 로 나뉨 Scene : 렌더링 할 모든 객체와 광원을 저장하는 공간. (Scene이 없다면 어떠한 객체도 표시 못함) Camera: Scene 객체를 어떻게 촬영하여 보여줄 것인지 결정 Render: Scene과 Camera 객체를 넘겨 받아 렌더링 한다. three.js 불러오기 Option1 :install with NPM and a build tool npm init # three.js npm install --save three # vite npm install --save-dev vite npx vite Option2: import from a CDN 2. Scene 생성 렌더링 할 모든 객체와 광원을 저장하는 공간. let sce..

mdn 문서 webGL 용어 정리 Getting started with WebGL - Web API | MDN WebGL은 플러그인을 사용하지 않고 OpenGL ES 2.0 기반 API를 이용하여 브라우저의 HTML canvas에 렌더링하여 3D 웹 콘텐츠 제작을 가능하게 합니다. WebGL 프로그램은 컴퓨터의 그래픽 처리 장치(GPU)에서 developer.mozilla.org OpenGL 2.0 기반 API을 이용하여 브라우저의 HTML canvas에 렌더링하여 3D 웹 콘텐츠 제작을 가능하게 한다. 다른 HTML 요소들과 혼합될 수 있고, 페이지나 배경의 다른 부분과 합성 될 수 있음 아래는 3D그래픽 기본 개념 3D 모델링: 3D 그래픽은 3차원 모델링을 통해 시작합니다. 3D 모델은 공간 내에서..

mdn docs 기본 애니메이션 - Web API | MDN 요소는 자바스크립트로 제어하는 것이므로, 애니메이션도 쉽게 만들 수 있습니다. 복잡한 애니메이션을 만드는 것은 추가 작업이 더 필요하고, 앞으로 그에 대한 페이지도 머지 않아 추 developer.mozilla.org 도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션 제작 할 때의 제약일 것. 도형을 움직이고자 하면 그 도형이 그러지기 전에 그려진 모든 것을 다시 그려야 함. 기본 단계 캔버스 비우기 - 그리려는 도형이 캔버스를 가득 채우는 것이 아니라면, 이 전에 그려진 모든 도형을 지운다. clearRect() 사용 캔버스 상태를 저장 - 캔버스 상태에 영향을 주는 (스타일 변경, 모양 변형 등의) 설정값을 바꾸려고 하고, ..

mem web docs 는 src,alt 속성이 없다는 점만 제외하면 요소처럼 보임. canvas 요소에는 width와 height 속성만 있음.( 만약 렌더링이 왜곡된 것처럼 보인다면 width,height을 css가 아닌 태그에서 명시적으로 지정해준다.) 대체로 id 속성을 사용해서 스크립트 내에서 구분을 쉽게 해주는 것이 좋다. margin, border 같은 스타일 지정 해 줄 수 있지만 실제 캔버스 위에 그리는 것에 영향 없음. 스타일링 따로 지정 안하면 투명으로 설정되어 있음. (border 지정해주라는) canvas 지원 하지 않는 브라우저에서는 대체 컨텐츠나 이미지 파일 보여주기 가능 current stock price: $3.15 +0.15 canvas는 고정 크기의 드로잉 영역을 생성하..

linear-gradient() CSS 함수 (en-US)는 두 개 이상의 색상이 직선을 따라 점진적으로 변화되는 선형 그라데이션 그림을 생성합니다. 그 결과는 데이터 유형의 객체이며, 이는 의 특별한 종류 중 하나입니다. /* 45도 경사를 기준으로 파란색에서 시작해서 빨간색으로 변화하는 그라데이션 */ linear-gradient(45deg, blue, red); /* 오른쪽 아래에서 왼쪽 위로, 파란색에서 시작해서 빨간색으로 변화하는 그라데이션 */ linear-gradient(to left top, blue, red); /* 색이 중지되는 지점을 명시. 아래에서 위로 시작하여, 파란색에서 시작한 뒤 총 길이의 40% 지점에서 초록색으로 변화하고, 마지막에는 빨간색으로 변화하는 그라데이션 */ li..

수학 함수인 calc(), min(), max(), clamp() 을 사용하면 덧셈, 뺄셈, 곱셈 및 나눗셈이 있는 수학 표현식을 구성 요소 값으로 사용할 수 있다. 1. min(), max() 값의 인수 목록을 제공하고 브라우저는 각각 가장 작은 값/큰 값을 결정 함. eg. min(1rem,50%,10vw)의 경우 브라우저는 상대 단위 중 가장 작은 단위를 계산하고 해당 값을 실제 값으로 사용. 2. clamp()를 사용하러면 (최솟값, 계산할 값, 최대값) 을 입력한다. font-size: max(0.5vw, 50%, 2rem)), calc()와 함께 사용하거나(i.e. font-size: max(calc(0.5vw - 1em), 2rem)), 구성하여 사용할 수 있습니다((i.e. font-siz..

공유 컴포넌트 3대장 MUI ( Matrerial UI) - 오픈 소스 React Component Library Ant Design React Bootstrap 개인적으로 위 3대장은 커스텀 하기가 어려워 요즘 뜨고 있는 shadncd ui를 사용해봄 shadcn ui는 Radix-ui를 기반으로 하고 있음 Radix ui 란 고품질의 액세스 가능한 디자인 시스템 및 웹 앱을 구축하기 위한 오픈 소스 UI 컴포넌트 라이브러리. 접근성, 사용자 정의, 개발자 경험에 초점을 맞춘 하위 수준의 UI컴포넌트 라이브러리 shadcn ui의 특징 Accessible : 컴포넌트는 가능한 경우 WAI-ARIA 설계 패턴을 준수합니다. aria 및 role 속성, 포커스 관리 및 키보드 탐색을 포함하여 접근성과 관련..

블라