Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries. Mixin은 스타일 시트에서 사용자가 정의한 스타일을 재사용할 수 있게 해주는 구문입니다. 기본적으로 mixin으로 정의하고, include로 불러옵니다. Mixin을 이용한 스타일은 아래와 같이 정의할 수 있습니다.@mixin center { display: flex; justify-content: center; align-item..

SassSass(Syntactically Awesome Style Sheets)는 CSS를 좀 더 쉽게 다루기 위해 개발된 전처리기(preprocessor) 입니다. CSS는 단순하지만, 프로젝트의 규모가 커질 수록 쓰기 불편한 점이 많았습니다. 특정 색상이나 선택자가 반복해서 나타나거나, 조건문 또는 반복문 등의 흐름제어가 불가능 한 것, 그리고 변수를 지원하지 않는 것 등이 그 예입니다. Sass는 이런 문제점들을 보완하고자 기존 CSS에 추가적인 문법을 추가하였습니다.$main-color: #3498dbbody color: $main-color background: whiteSass는 빌드할 때 CSS로 변환되기 때문에, 기존에 존재하던 CSS 파일도 확장자만 바꾸면 Sass 파일로서 사용할 수..

Three.js의 캔버스에 텍스트를 랜더링할 때는 크게 아래 과정을 따릅니다. 또 다른 캔버스를 만들어 그 안에 텍스트를 '그리고'해당 캔버스를 '텍스쳐'로 만든 후만든 텍스쳐를 원래 three.js 캔버스 내의 물체에 '씌운다'1단계까지는 three.js의 요소가 아닌 canvas와 그 context만을 사용하며,2단계 부터는 three.js의 CanvasTexture와 sprite(혹은 mesh)를 사용합니다. 작업사용 객체1단계텍스트 작성HTMLCanvasElement, CanvasRenderingContext2D2단계텍스쳐 변환THREE.CanvasTexture3단계three.js 내 구현THREE.SpriteMaterial, THREE.SpriteorTHREE.MeshBasicMaterial,..

Tailwindcss를 사용할 때 알아두면 좋은 잡다한 사항들에 대해 정리합니다.투명도 별도 적용하기기본적으로 css는 투명도가 누적 적용됩니다. 이 말은 부모 요소에서 90%의 투명도를 적용한다면, 자식 요소에서 100%의 투명도(=투명도 없음)을 적용해도 여전히 90%의 투명도로 적용된다는 뜻입니다. 때문에 투명도를 별개 적용하려면 opacitiy보다는 rgba의 값으로 background를 설정해야 하는데, tailwind에서는 아래와 같이 rbga값을 간단하게 나타낼 수 있습니다....이는 main이라는 색상에 90%의 alpha(=투명도)값을 적용한다는 뜻입니다.

Three.js에서 raycasting을 다루는 방법에 대해 설명합니다. Raycasting은 컴퓨터 그래픽스 기법 중 하나로, 사용자의 눈에는 보이지 않는 가상의 광선을 조사하여 물체의 표면이 어디에 있는지 파악하는 방법입니다.Three.js는 이를 위해 Raycaster( )라는 이름의 객체를 지원해줍니다.import { Raycaster } from "three";const raycaster = new Raycaster();setFromCamera( )setFromCamera(THREE.Vector2, THREE.Camera); setFromCamera( ) 메소드는 지정한 카메라의 위치에서부터 화면에서 보이는 2차원 좌표에 해당하는 위치를 향해 광선을 조사합니다. 아래와 같이 좌표를 마우스의 위..

https://schteppe.github.io/cannon.js/ schteppe/cannon.js @ GitHub schteppe.github.io Three.js에서는 여러가지 물리엔진 라이브러리를 지원합니다. 그 중에서도 cannon.js는 다루기 쉬운 편에 속하는 라이브러리입니다. 다음과 같이 설치할 수 있습니다.npm install cannon-esCannon.js는 물리엔진의 주체가 되는 body를 만들어 서로 상호작용 시킵니다.Three.js의 mesh가 눈에 보이는 형태라면, cannon.js의 body가 실제 알맹이라고 볼 수 있습니다. 때문에 매 프레임마다 mesh의 transform을 cannon body와 동기화한다면 실제 물리적 상호작용을 화면에 랜더링 할 수 있습니다.1. 세계..

카메라가 1인칭 시점으로 있을 때 마우스 움직임에 따라 화면을 회전시키는 방법에 대해 서술합니다.1. 마우스 움직임 추적마우스가 움직일 때를 다루는 이벤트는 'mousemove'이며, MouseEvent로 접근할 수 있습니다. MouseEvent의 movementX, movementY 자체는 값이 많이 커서, 튀는 걸 방지하기 위해 작은 값을 곱해줍니다.const mouseDel = new Vector2();const updateMouse = (e: MouseEvent) => { mouseDel.x = e.movementX * 0.001; mouseDel.y = e.movementY * 0.001;}document.addEventListener('mousemove', updateMouse);2..

아무 이벤트도 설정하지 않고 three.js의 캔버스를 랜더링하면, 창의 크기가 변해도 캔버스는 크기가 변하지 않습니다. 만약 창의 크기가 바뀔 때 마다 캔버스도 그 비율에 맞추어 랜더링하고자 한다면, 화면의 크기가 바뀔 때 마다('resize' 이벤트) 실행되는 event handler를 만들어, window 객체의 너비(=innerWidth)와 높이(=innerHeight)를 받아와 계산하면 됩니다.window.addEventListener('resize', () => { // 1. camera 종횡비 갱신 camera.aspect = window.innerWidth / window.innerHeight; // 2. camera 사영 행렬 갱신 camera.updateProjec..