눈으로 개발하는 블로그

이어서 추출된 glTF 정보를 .glb 파일(바이너리) 또는 .gltf 파일(JSON)로 다운로드하여 저장할 수 있게 헤보겠습니다. glTF 정보를 스크립트에서 다운로드하기 위해서는 URL.createObjectURL() 메서드를 사용하면 됩니다. URL.createObjectURL() 메서드에 대한 영문 설명은 다음과 같습니다. The URL.createObjectURL() static method creates a string containing a URL representing the object given in the parameter. 번역해 보면 URL.createObjectURL() 정적 메서드는 파라미터로 전달받은 객체를 가리키는 URL이 포함된 문자열을 생성합니다. URL.createOb..

이어서 우리가 만든 Object(객체, 3D 모델)을 glTF 포맷으로 추출해 보겠습니다. 1. import를 통해 GLTFExporter(GLTF익스포트) 모듈을 가져옵니다. GLTFExporter(GLTF익스포트)는 Scence(씬, 장면)이나 Scence(씬, 장면)에 있는 Object(객체)들을 glTF 포맷으로 추출합니다. import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js'; GLTFExporter(GLTF익스포트) 모듈의 실제 위치는 "\node_modules\three\examples\jsm\exporters\GLTFExporter.js" 입니다. 2. Scence(씬, 장면)이나 Scence(씬, 장면)에 있는 Obj..

이번에는 외부에서 만들어진 3D 모델을 로드하여 Scence(씬, 장면)에 추가해 보도록 하겠습니다. 3D 모델들은 다양한 파일 포맷으로 저장됩니다. 대표적인 3D 파일 포맷으로 OBJ, FBX, glTF, USD가 있습니다. 다양한 파일 포맷 중에서 three.js에서는 glTF 파일 포맷을 사용하는 것을 추천하고 있습니다. glTF(GL Transmission Format, GL 트랜스미션 포맷)는 응용프로그램에서 3D 장면과 3D 모델을 효율적으로 전송하고 로드시키는 방법에 대한 사양(규격, 명세)으로 로열티가 없는 오픈 소스 파일 포맷입니다. glTF는 3D Assets(3D 에셋, 3D 자산(모델 정보, 텍스처, 바이너리 데이터))의 파일 크기를 최소화하였습니다. 그리고 3D Assets(3D ..

이전에 만든 Controls에 아래의 three.js 사이트의 doc 처럼 SphereGeometry(스피어 지오메트리, 구 기하 도형)에 대한 속성들을 추가해 보겠습니다. (https://threejs.org/docs/index.html#api/en/geometries/SphereGeometry) 우선 Camera(카메라)의 위치(position)를 구 객체(sphere1) 앞으로 이동시키겠습니다. 현재 OrbitControls(오빗 컨트롤, 궤도 컨트롤)를 사용하고 있습니다. 그래서 항상 Camera(카메라)의 Focus Point(포커스 포인트, 초점)가 {x: 0, y: 0, z: 0} 입니다. console.log(controls.target); --> Vector3 {x: 0, y: 0, z:..

three.js 사이트의 doc에서 Geometry(지오메트리, 기하 도형)들의 설명을 보면 오른쪽 상단에 Controls가 있습니다. (https://threejs.org/docs/index.html#api/en/geometries/SphereGeometry) Controls에는 객체의 속성 값들이 표시되고 속성 값을 변경하면 객체가 변경됩니다. 이번에 위의 예제 화면처럼 Controls를 만들어 주사위 객체의 Material(머티리얼)에 있는 alphaTest(알파 테스트) 속성을 변경해 보도록 하겠습니다. 이전에는 Controls를 만들기 위해 dat.GUI를 사용하였으나 최근에는 lil-gui를 대체하여 사용하고 있습니다. three.js에서도 lil-gui를 모듈에 포함하여 배포하고 있습니다. ..

이번에는 배경이 투명하지 않는 주사위 이미지를 Material(머티리얼)의 alphaMap(알파 맵) 속성을 사용하여 이미지를 자르고 반투명하게 처리해 보겠습니다. 그리고 alphaTest(알파 테스트) 속성을 사용하여 처리되는 범위를 조정해 보겠습니다. (그림자는 자동으로 이미지에 맞게 처리됩니다.) 그럼 alphaMap(알파 맵) 속성에 대해 간단하게 알아보고 진행하겠습니다. alphaMap(알파 맵)은 흰색과 검은색 그리고 흰색과 검은색 사이의 회색(밝은 회색부터 어두운 회색까지)으로 구성된 이미지입니다. alphaMap(알파 맵)에 있는 흰색은 이미지 처리 시 원본 이미지가 그대로 투과됩니다. alphaMap(알파 맵)에 있는 검은색은 이미지 처리 시 원본 이미지가 투과되지 않습니다. (검은색과 ..

이번에는 주사위의 흰색 배경을 없애고 투명하게 처리해 보겠습니다. 주사위 이미지를 만든 PPT에서 주사위 틀의 도형 채우기를 "채우기 없음"으로 변경합니다. 그리고 각각을 PNG 파일로 저장합니다. (기존 파일명에 't'를 추가했습니다.) 프로젝트의 resources \ textures 폴더에 주사위 이미지 파일을 추가합니다. 추가된 주사위 이미지에 배경이 없는 것을 확인할 수 있습니다. (체크무늬가 투명처리되는 부분입니다.) Material(머티리얼) 배열에서 기존 이미지를 추가된 주사위 이미지로 변경하고 주사위 이미지의 체크무늬 부분이 투명하게 처리되도록 transparent 속성을 true로 추가합니다. (기본적으로 transparent 속성은 false입니다.) // 머티리얼 배열 const bo..

Texture(텍스처)란 객체의 색상과 질감을 표현하는 Material(머티리얼)에서 사용되는 이미지나 비디오를 말합니다. Texture Mapping(텍스처 매핑)이란 객체의 표면에 색을 칠하거나 이미지를 입히는 것입니다. 객체에 Texture Mapping(텍스처 매핑)하기 위해서는 Texture(텍스처)를 로드해야 합니다. three.js에서는 TextureLoader(텍스처로더)로 Texture(텍스처)를 로드합니다. TextureLoader(텍스처로더)는 이미지 (PNG, JPG, GIF, DDS) 또는 비디오 (MP4, OGG/OGV)를 로드합니다. TextureLoader(manager : LoadingManager) manager(매니저) : 로딩매니저입니다. 기본값 THREE.Defaul..

이전에 만든 육면체 객체의 와이어프레임을 선으로 그린 라인 세그먼트즈 객체를 육면체 객체와 결합해 보겠습니다. 객체들을 결합하기 위해서 Group(그룹)을 사용하면 됩니다. Group(그룹)은 객체들을 결합시켜 하나의 객체(Object3D)를 생성합니다. 1. 객체를 합치기 전에 육면체 객체(box1)와 라인 세그먼트즈 객체(box1WireframeLine)를 Scence(씬, 장면)에 추가되지 않게 주석처리합니다. // 장면에 육면체 객체 추가 //scene.add(box1); // 장면에 라인 세그먼트즈 객체 추가 //scene.add(box1WireframeLine); 2. 라인 세그먼트즈 객체(box1WireframeLine)의 라인 색상을 붉은색에서 짙은 녹색으로 변경하고 위치(position)..

three.js 사이트의 doc에서 Geometry(지오메트리, 기하 도형)들의 설명을 보면 생선 된 객체에 선이 포함되어 있는 것을 볼 수 있습니다. (https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry) 위에 코드 예제를 보면 선에 대한 코드가 따로 없는데 말입니다. 우리가 이전에 코딩한 코드와 비교해 봐도 다를 게 없습니다. 그럼 뭐가 다를까요? 그것은 바로 WireFrame(와이어프레임)이 객체와 같이 표현된 겁니다. WireFrame(와이어프레임)이란 객체의 모양(구조)을 철사(Wire, 와이어)를 사용하여 동일한 모양(Frame, 프레임 - 틀, 구조)으로 만든 것입니다. 여기서 WireFrame(와이어프레임)은 Geometry..

이전에 방향성 조명인 DirectionalLight(디렉셔널 라이트)를 사용하여 객체를 비추도록 하였습니다. 좀 더 조명에 대해 알아보겠습니다. 가끔씩 DirectionalLight(디렉셔널 라이트)가 어디에 있는지 헷갈릴 때가 있습니다. 그래서 DirectionalLight(디렉셔널 라이트)를 시각화를 해주는 DirectionalLightHelper(디렉셔널 라이트 헬퍼)를 사용하여 어느 위치에서 어느 방향으로 빛의 비추어지는지 확인해 보겠습니다. DirectionalLightHelper(디렉셔널 라이트 헬퍼)는 빛의 위치를 평면으로 빛의 방향을 선으로 구성하여 시각화를 해줍니다. DirectionalLightHelper(light : DirectionalLight, size : Number, colo..

OrbitControls(오빗 컨트롤, 궤도 컨트롤)은 Scence(씬, 장면)의 중앙을 기준으로 카메라의 초점(position)에서 수직(상/하), 수평(좌/우)으로 회전하고 확대/축소를 할 수 있습니다. 그리고 카메라의 초점(position)도 이동할 수 있습니다. 1. import를 통해 OrbitControls(오빗 컨트롤, 궤도 컨트롤) 모듈을 가져옵니다. import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; OrbitControls 모듈의 위치는 node_modules에서 three의 package.json 파일을 보면 "./examples/jsm/*"이 "./addons/*"으로도 exports 된 것을 확인할 수 있..

객체들의 그림자가 보이기 위해서 그림자가 표현될 바닥이 필요합니다. 그래서 평면 객체를 사용하여 바닥을 만들겠습니다. Scence(씬, 장면)에 추가할 바닥으로 PlaneGeometry(플레인 지오메트리, 평면)을 생성합니다. PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer) width(가로, 너비, 폭) : 평면의 가로길이입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.) height(세로, 높이) : 평면의 세로길이입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.) widthSegments(수평 세그먼트, 가로 분절 수) : 가로를 분할 면의 수입니다. 기본값..

조명을 사용하여 객체가 좀 더 입체적으로 보이게 하겠습니다. 조명을 사용하기 전에 객체들이 조명에 반응하도록 Material(머티리얼)을 변경해 줘야 합니다. 이전에 생성한 육면체 객체와 구 객체에는 조명에 반응하지 않는 MeshBasicMaterial(메쉬 베이식 머티리얼)을 사용하였습니다. const box1Material = new THREE.MeshBasicMaterial({color: 0x00ff00}); : const sphere1Material = new THREE.MeshBasicMaterial({color: 0x0000ff}); 그래서 조명에 반응하는 MeshStandardMaterial(메쉬 표준 머티리얼)을 생성하여 변경하겠습니다. MeshStandardMaterial(메쉬 표준 머티..

Camera(카메라)는 위치(position)를 설정하지 않으면 Scence(씬, 장면)의 중앙을 보게 됩니다. 그래서 Camera(카메라)의 위치(position)는 조정하여 객체가 입체적으로 보이도록 하겠습니다. 1. Camera(카메라)의 Z 위치가 커지면 Scence(씬, 장면)를 중심으로 카메라가 뒤로 이동합니다. Camera(카메라)의 Z 위치를 2로 설정합니다. // 카메라 Z 위치를 이동 camera.position.z = 2; Camera(카메라)의 Z 위치를 5로 다시 설정합니다. // 카메라 Z 위치를 이동 camera.position.z = 5; Camera(카메라)의 Z 위치는 Camera(카메라)를 생성할 때 설정한 near(카메라부터 가까운 거리)부터 far(카메라부터 먼 거리..

이전에 설명들인 것처럼 three.js를 개발하기 위해서 NPM과 빌드 도구(Node.js, Vite)를 사용하거나 CDN으로 가져(Import) 오거나 직접 js 파일을 다운로드해서 사용하는 방법이 있습니다. 최근에 NPM과 빌드 도구(Node.js, Vite)를 많이 사용하고 있는 것 같아서 Node기반으로 개발하도록 하겠습니다. 우리는 어떻게 3차원으로 볼 수 있을 까요? 우리는 눈으로 공간에 있는 사물을 볼 수 있습니다. 그리고 우리는 몸을 움직여 공간에서 사물의 앞/뒤, 좌/우, 위/아래를 볼 수 있습니다. 그래서 사물을 입체적(3차원)으로 볼 수 있습니다. 그런데 우리가 움직이지 못한다면 사물이 평면으로 보일까요? 그렇지 않습니다. 그 이유는 공간이 평면이 아니기 때문입니다. 사물이 공간에서 ..

three.module.js 파일을 다운로드하기 위해서는 Three.js 사이트에서 three.js-master.zip 파일을 다운로드하거나 GitHub에서 파일을 직접 다운로드하면 됩니다. three.module.js 파일만 사용할 거면 GitHub에서 파일을 직접 다운로드하는 것이 간편하고 빠릅니다. 다운로드하여 스크립트 모듈로 불러오기 1. Three.js 사이트(https://threejs.org/)에서 왼쪽 메뉴에 있는 download를 클릭하여 three.js-master.zip 파일을 다운로드합니다. 다운로드한 three.js-master.zip 압축 파일을 풉니다. 2. Three.js를 Script으로 불러와 개발하기 위해 폴더를 생성합니다. 저는 "C:\workspaces\webstud..

CDN에서 가져오기 1. Three.js를 CDN에서 가져와서 개발하기 위해 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\myworld2" 폴더를 생성하였습니다. 2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클릭하거나 Ctrl 키를 누를 상태에서 K, O를 이어서 누릅니다. (Ctrl + K, Ctrl + O) 그리고 "C:\workspaces\webstudys\myworld2" 폴더로 이동하고 "폴더 선택" 버튼을 누르면 폴더가 오픈됩니다. 보안을 위해 Trust(신뢰) 확인 창이 나타납니다. "Yes, I Trust the authors" 버튼을 누릅니다. 그리고 Welcome(시작) 창은 닫습니다. 3. inde..

Node.js 기반으로 개발하기 위해서 윈도우에 Node.js가 설치되어 있어야 합니다. 그리고 Visual Studio Code로 개발을 하겠습니다. 윈도우 Node.js 다운로드 및 설치에 대한 자세한 설명은 "윈도우 Node.js 설치 - Windows Node.js Download & Install - 14.x"를 참고하시기 바랍니다. Visual Studio Code 다운로드 및 설치에 대한 자세한 설명은 "Visual Studio Code 다운로드 및 설치 - 1.78 Download & Install - April 2023"를 참고하시기 바랍니다. Visual Studio Code에서 Node 패키지 생성에 대한 자세한 설명은 "VSCode Node 개발 - 패키지 생성 및 실행, npm i..

Three.js는 자바스크립트 3D 라이브러리(JavaScript 3D library)로 웹 브라우저에서 3D를 표현(Rendering, 렌더링)할 수 있게 해 줍니다. Three.js 사이트(https://threejs.org/) Three.js는 오픈 소스 프로젝트로 GitHub에 공개되어 있다. (https://github.com/mrdoob/three.js/) Three.js는 GitHub에서 다음처럼 설명하고 있습니다. JavaScript 3D library The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only in..