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

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

https://threejs.org/docs/?q=material#api/en/materials/Material three.js docs threejs.orgMaterial은 mesh 표면을 어떻게 랜더링 할 것인지에 대한 정보입니다. 이는 renderer와 별개의 설정이기 때문에, renderer의 종류나 설정값을 바꿀 때 material 까지 다시 바꾸지 않아도 됩니다. Material은 공통적으로 Material( ) 객체를 상속받아 여러가지 객체로 정의됩니다. Material객체는 다음 속성값들을 가집니다.속성값기능입력값기본값alphaTest투명도 테스트.이 값보다 낮은 투명도의 material은 랜더링 되지 않음.float0color색상string#ffffffside랜더링할 표면THREE.Fro..

https://threejs.org/docs/?q=geometry#api/en/core/BufferGeometry three.js docs threejs.orgGeometry는 삼각형 polygon으로 구성된 3차원 입체 도형에 대한 객체입니다. Vertex, index, normal, UV 등을 조정할 수 있습니다. Geometry는 공통적으로 BufferGeometry( ) 객체를 상속받아 여러가지 객체로 정의됩니다. BufferGeomerty는 특정한 도형을 지정한 객체가 아니기 때문에, 이를 직접 사용할 때는 도형의 vertex 지점들을 직접 입력해 주어야 합니다. 특히, 삼각형이 최소 단위이기 때문에 그 이상의 다각형을 모두 삼각형으로 나누어 주어야 합니다.const geometry = new ..