카메라가 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 ..

Mesh는 Scene에서 보여지는 물체, 특히 삼각형 polygon으로 이루어진 도형입니다. Mesh를 선언할 때는 geometry와 material 두 가지가 필요합니다. Geometry는 mesh의 모양에 대한 정보입니다. Three.js에서 정의된 여러 가지 geometry 객체를 사용합니다. Material은 mesh의 겉표면에 대한 정보입니다. Material에 따라 빛이 어떻게 반사되는지나 표면의 색상등이 결정됩니다. Three.js에서 정의된 여러 가지 matrial 객체를 사용합니다.const geometry = new THREE.BoxGeometry( 1, 1, 1 );const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } )..

Three.js에서 제공하는 광원의 종류에 대해 정리했습니다.Light아래 객체들은 공통적으로 Light 객체를 상속 받으며, Light 객체는 아래 속성값들을 가집니다.속성값기능입력값기본값color빛의 색상string'0xffffff'intensity빛의 세기number1AmbientLight모든 방향에서 반사되어 발생하는 기본광입니다.const ambientLight = new THREE.AmbientLight(color, intensity);// const ambientLight = new THREE.AmbientLight('white', 1);DirectionalLight모든 위치에서 같은 방향으로 들어오는 빛입니다. 태양광 등이 포함됩니다.directionalLight의 경우 rotation이 ..

Renderer는 WebGL을 이용해 카메라에 담긴 Scene의 모습을 실제 화면에 출력합니다.import * as THREE from 'three';const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, // ...});WebGLRenderer( )를 선언할 때 매개변수들은 객체 형태로 전달됩니다. 아래와 같은 매개변수들을 사용 가능합니다.매개변수기능입력값기본값canvasrenderer가 화면을 출력할 canvas 객체HTMLCanvasElement alpha알파값 (밝기)booleanfalseantialias안티앨리어싱 여부booleanfalseShadowMapWebGLRenderer의 속성값 중 shadowMap을 사..