눈으로 개발하는 블로그

장고를 처음 실행하면 영어로 사이트가 보입니다. 사이트에 표시되는 언어를 영어에서 한국어로 변경하고 싶을 경우에는 LANGUAGE_CODE(언어 코드)를 변경하면 됩니다.  Internationalization(국제화) 설정 config 폴더에 있는 settings.py 파일에서 internationalization(국제화) 영역에 있는 LANGUAGE_CODE를 'en-us'에서 'ko-kr'로 변경하면 됩니다.# 언어 - 한국어LANGUAGE_CODE = 'ko-kr' 그러면 사이트가 한국어로 표시됩니다. 장고가 제공하는 메인 페이지는 myenv(가상환경) > Lib > site-packages > django > views > templates 폴더에 있는 default_urlconf.html 파일..

장고 기반 프로젝트를 처음 실행하면 터미널(Terminal)에 다음과 같이 붉은색으로 마이그레이션(Migration)에 대한 경고를 보여줍니다. You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions. Run 'python manage.py migrate' to apply them. 번역하면 적용되지 않은 마이그레이션이 18개 있습니다. 당신의 프로젝트가 앱(admin, auth, contenttypes, sessions)에 대한 마이그레이션을 할 때까지 제대로 작동하지 않을 수 있습니다.적용하..

장고(Django)는 하이 레벨 파이썬 웹 프레임워크(high-level Python web framework)입니다.웹 개발에 필요한 구성과 환경 설정들을 프레임워크가 처리해 주기 때문에 개발에 더 집중할 수 있습니다.그리고 무료이며 오픈 소스입니다.  장고(Django)는 프런트엔드(사용자 대면)와 백엔드(데이터베이스 및 로직)를 모두 개발할 수 있는 풀 스택 프레임워크(Full Stack Framework)입니다. Django에서 D가 묵음이기 때문에 "드장고"가 아닌 "장고"로 읽으시면 됩니다. 더 자세한 내용 장고 사이트를 참고하시기 바랍니다. (https://www.djangoproject.com)  장고 확인 현재 가상 환경에 장고가 설치되어 있는지 확인하기 위해서 Terminal(터미널)에..

파이썬은 프로젝트 별로 파이썬 환경이 독립될 수 있도록 가상 환경(virtual environments)을 제공하고 있습니다.가상 환경을 생성하면 프로젝트 별로 다른 라이브러리와 버전을 다르게 설치하고 관리할 수 있게 됩니다. 왜 가상 환경을 생성해야 할까요? 그냥 필요한 라이브러리를 설치하면 안 될까요? 여러 프로젝트들이 동일한 환경에서 개발되면 문제가 없겠지만 여러 프로젝트들이 다르게 사용하는 라이브러리가 있거나 다른 라이브러리 버전이 있을 경우에는 문제 됩니다. 그래서, 프로젝트 별로 가상 환경을 생성하고 가상 환경에 라이브러리를 설치하면 이런 문제점들을 해결할 수 있습니다. 더 자세한 내용은 파이썬 문서를 참고하시기 바랍니다. (https://docs.python.org/3/library/venv..

이어서 추출된 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..

IntelliJ Community Edition은 Ultimate Edition의 Artifacts에 있는 Web Application, JavaEE Application, EJB Application를 지원하지 않습니다. 그래서 직접 Maven의 package를 실행해줘야 합니다. 메이븐 프로젝트 패키징하기 - WAR 만들기 1. intelliJ IDE의 오른쪽에 있는 Maven를 클릭합니다. 2. Maven Lifecycle에서 package를 선택하고 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Run 'test2 [package]'"를 클릭합니다. 그러면 target 폴더에 artefact가 출력됩니다. 로그를 보면 target 폴더에 test2 폴더를 생성하여 컴파일된 클래스들과 리소스들을 출..

메이븐 프로젝트 폴더 생성 1. intelliJ IDE의 메뉴 File > Project Structure를 클릭하거나 Ctrl + Alt + Shift + S 키를 누릅니다. 2. Project Structure 대화상자에서 Project Settings에 있는 Modules를 선택합니다. 메이븐 프로젝트에서 필요로 하는 폴더가 존재하지 않을 경우 Project Structure 대화상자의 오른쪽에 붉은색으로 필요한 폴더를 보여줍니다. src\main 폴더에 소스 폴더(java)가 없습니다. src 폴더에 테스트 소스 폴더(test)가 없습니다. src\test 폴더에 테스트 리소스(resources) 폴더가 없습니다. 메이븐 프로젝트에서 필요한 폴더를 생성하도록 하겠습니다. 3. java 소스 폴더를..

WebApp Maven Project(웹앱 메이븐 프로젝트) 생성하기 1. "New Project"를 클릭합니다. 2. New Project 대화상자에서 Generators에 있는 Maven Archetype를 선택합니다. 저는 프로젝트 이름(Name)을 "test2"로 입력하였습니다. 프로젝트 경로(Location)는 "C:\workspaces\studyj"로 하였습니다. (Git 연동은 다음에 하도록 하겠습니다.) JDK는 이전에 설치한 "Eclipse Temurin Version 1.8.0_372"를 선택하였습니다. ("Eclipse Temurin Version 1.8.0_372" 버전 JDK 설치는 여기(https://carrotweb.tistory.com/280)를 참고하시기 바랍니다.) 메이븐..

General Maven Project(기본 메이븐 프로젝트) 생성하기 1. "New Project"를 클릭합니다. 2. New Project 대화상자에서 프로젝트 이름(Name)을 입력하고 프로젝트 경로(Location), 개발언어(Language), 빌드 시스템(Build system), JDK를 선택하고 "Create" 버튼을 누릅니다. 저는 프로젝트 이름(Name)을 "test1"로 입력하였습니다. 프로젝트 경로(Location)는 "C:\workspaces\studyj"로 변경하였습니다. (Git 연동은 다음에 하도록 하겠습니다.) 개발언어(Language)는 "Java"로 선택하였습니다. 빌드 시스템(Build system)은 "Maven"를 선택하였습니다. JDK는 이전에 설치한 "Eclip..

IntelliJ IDEA Community 2023.1을 설치하면 자동으로 JBR-17.0.6가 설치됩니다. JBR-17.0.6이 설치된 경로는 IntelliJ가 설치된 폴더에 "jbr" 폴더입니다. (저는 "C:\workspaces\IntelliJ\jbr"입니다.) JBR은 JetBrains Runtime으로 OpenJDK 17.0.6을 기반으로 만들어졌습니다. 즉, JetBrains이 IDE(Integrated Development Environment, 통합 개발 환경)에서 사용할 목적으로 OpenJDK(Open Java Development Kit)를 가져와서 기능을 추가하고 개선한 JDK입니다. JetBrains Runtime에는 크롬 임베디드 기능과 향상된 클래스 재정의 기능이 포함되어 있습니..

IntelliJ IDEA 다운로드 1. JET BRANS 사이트(https://www.jetbrains.com/idea/)에 접속합니다. 현재 최신버전은 2023.1.2입니다. 2. 오른쪽 상단에 있는 Download나 페이지에 있는 Download를 클릭하면 Download IntelliJ IDEA 페이지로 이동합니다. 두 개의 버전을 다운로드할 수 있습니다. Ultimate는 유료 버전으로 입니다. 30일간은 무료로 이용한 할 수 있습니다. 이후에는 라이선스 구매해서 등록해야 사용할 수 있습니다. 현재 개인 라이선스 비용은 1년에 169달러입니다. Communiry Edition는 무료 버전입니다. Ultimate에 비해 지원 가능한 개발 언어, 프레임워크, 도구들이 제한되어 있습니다. 그러나 Jav..