외부 파일안의 내용을 읽거나 쓰는 방법입니다. 크게 일반적인 경우와 큰 파일을 다루는 경우로 나누어 정리합니다. 일반적인 경우큰 파일을 다루는 경우읽기readFile( )createReadStream ( )쓰기writeFile( )createWriteStream ( )readFile( )주로 작은 파일(.json, .config 파일 등)을 읽을 때 사용합니다.readFile( )은 fs 모듈을 통해 사용할 수 있습니다.const fs = require('fs');const data = fs.readFile('file.txt', 'utf-8');기본적으로 비동기 함수이기 때문에, 후작업을 위해서는 콜백 함수를 사용하거나 async-await으로 해소해야 합니다.// 1. 콜백 함수const fs = r..

JavaScript에서 외부 파일을 불러오는 방법은 JavaScript의 유형에 따라 두 가지로 나뉩니다.1. require - CommonJS파일을 불러올 때// 1const fs = require('fs');// 2const express = require('express');// 3const { pathToFileURL } = require("url");파일을 내보낼 때// 1module.exports = greet;// 2exports.greet = greet;2. import - ES파일을 불러올 때// 1import fs from 'node:fs';// 2import express from 'express';// 3import { pathToFileURL } from 'node:url'; 파일..

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