아카이브

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

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

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

Camera는 Scene의 모습을 사용자에게 어떤 위치와 어떤 각도로 보여줄 것인지 결정합니다. 일반적으로 Camera( ) 객체 자체로 선언하지 않고 이를 상속받은 하위 camera 객체들로 선언합니다.PerspectiveCamera( )원근감에 의한 투시가 적용되어, 사람이 보는 눈과 동일한 시야를 제공하는 카메라입니다.import * as THREE from 'three';const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);fov 화각. 증가할수록 카메라에 담기는 영역이 많아집니다.aspect가로/세로 비율입니다. 일반적으로 화면의 비율과 맞추기 위해 window.innerWidth / window.innerHeight로 설정합니다..

Scene은 물체, 광원, 카메라 등 사용자들에게 보여질 모든 요소를 담는 배경공간입니다.import * as THREE from 'three';const scene = new THREE.Scene();속성값속성값기능입력값기본값background전체적인 배경색상 : THREE.Color(hex)또는텍스쳐 : THREE.Texture( )nullbackgroundBlurriness배경 흐림float (0 - 1)0backgroundIntensity배경 텍스쳐의 세기float1backgroundRotation배경 회전Euler(0, 0, 0)environment환경 매핑THREE.Texture( )nullenvironmentIntensity환경 색상 세기float1environmentRotation환경 매..