아카이브

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환경 매..

Three.js는 3차원 입체 구조를 2차원 캔버스를 통해 사용자에게 보여주는 역할을 합니다.이를 위해서는 몇가지 요소가 필요합니다. 우선 보여줄 사물들을 담아 둘 특정한 공간(Scene)이 필요합니다. 그리고 이 공간을 사용자가 화면으로 볼 시야를 제공해줄 카메라(Camera)가 있어야 하고, 이 공간을 카메라에 비치는 2차원 이미지로 바꿔주는 기능(Renderer)까지 있어야 사용자가 3차원 공간을 볼 수 있습니다.1. SceneScene은 3차원 물체들이 들어갈 공간 그 자체입니다. 미리 정의된 Scene( ) 객체를 통해 선언할 수 있습니다.import * as THREE from 'three';const scene = new THREE.Scene();Scene에는 Camera를 포함하여 광원, ..

JavaScript의 배열 메소드들을 정리하였습니다. 각 매개변수들은 필수가 아니며, 선택적으로 사용할 수 있습니다.메소드기능형식매개변수forEach *배열의 각 요소마다 동작을 실행합니다..forEach( (item, index, arr) => { ... } ) { ... } : 요소별 동작item : 개별 항목index : 색인arr : 현재 배열map *배열의 각 요소마다 동작을 실행합니다.각 요소마다 반환한 값을 모아 하나의 배열로 반환합니다..map( (item, index, arr) => { ... } ){ ... } : 요소별 동작item : 개별 항목index : 색인 arr : 현재 배열filter배열의 각 요소마다 조건에 만족하는 요소들만 모아 배열로 반환합니다..filter( (ite..

JavaScript에서도 동일하게 try-catch 구문을 사용해 예외처리를 할 수 있습니다. try 문 안에서 진행되던 코드에 에러가 발생하면, 그 지점에서 코드 실행은 중단되고 catch 문의 코드로 넘어갑니다.try { // 코드}catch (error) { // 코드에서 에러가 발생하면, 중단하고 여기 코드가 실행됩니다.}errorcatch에서 받는 error 매개변수는 에러를 설명하는 error 객체입니다. error 객체는 에러 이름(name)과 에러 내용(message)로 이루어져 있으며, catch 문에서 선언 시 이름은 임의로 지어도 됩니다.try { // ...}catch (error) { console.log(error.name); console.log(er..

JavaScript의 구조분해는 배열이나 객체 등 여러 값의 집합으로 존재하는 값들의 요소를 각각의 변수에 바로 할당할 수 있게 하는 기능입니다. 배열의 경우 대괄호 [ ]로 변수들을 묶어 사용할 수 있습니다.const arr = ["cat", "dog", "rabbit", "parrot", "fox"];// destructuringconst [var1, var2, var3, var4, var5] = arr;console.log(var1); // "cat"console.log(var2); // "dog"console.log(var3); // "rabbit"console.log(var4); // "parrot"console.log(var5); // "fox"객체의 경우 중괄호 { }로 변수들을 묶..

JavaScript에서 객체에 대한 조건문을 작성할 때, 특정 속성값이 있는지의 여부가 중요하게 작용할 때가 있습니다.const user1 = { 'name': 'Jhon', 'age': 20, 'membership': 'plus',}const user2 = { 'name': 'Mary', 'age': 20,}// user2는 membership을 속성값으로 가지지 않기 때문에 에러가 발생합니다if (user1.membership === 'plus' && user2.membership === 'plus'){ console.log('all of them have plus membership');}이 경우, 해당 객체에 속성값이 존재하는지 먼저 확인한 수 조건문을 작성해야 합..