아카이브

Github의 저장소와 연동하는 방법을 기준으로 설명합니다. Github와 연동하여 배포하면 미리 빌드하지 않아도 Netilfy에서 자동으로 빌드 후 배포를 진행합니다. 또한, Guithub의 저장소를 새로 갱신할 때마다 자동으로 재배포가 이루어집니다.처음 배포하기Project 탭에서 Add new project > Import an existing project로 들어갑니다.1. Connect to Git provider여기서는 Github를 선택합니다. 만약 다른 서비스에 저장소가 있다면 해당 서비스를 선택합니다.2. Select repositoryGithub와 연동이 되었다면 아래와 같이 Github에 있는 자신의 저장소들을 볼 수 있습니다.배포할 저장소를 선택합니다.3. Configure proj..

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..

Mesh를 생성할 때 Three.js에서 제공하는 geometry를 선택하여 생성하는 방법 외에도, 외부 모델링 파일을 불러와 생성하는 방법이 있습니다. 이 때 외부 파일을 불러오는 역할을 하는 것이 Loader입니다. GLTFLoader는 glTF(GL Transmission Format) 형식으로 데이터를 불러오는 방식이며, JSON 형식(.gltf) 또는 이진파일 형식(.glb)을 입력값으로 받습니다.import { GLTFLoader } from "three/examples/jsm/Addons.js";const gltfLoader = new GLTFLoader();Load ( )Loader를 통해 파일을 불러오는 작업은 load( ) 함수를 통해 이루어집니다.loader.load(url: stri..