1. 개발 진행 및 완료상황
1.1 진행 중인 프로젝트에서 파이썬으로 개발한 프로그램 테스트 완료
1.2 Three.js 스터디 및 인수인계 받기
2. 업무, 개발 중 발생한 이슈/고민 또는 이를 해결한 내용
2.1 파이썬으로 개발한 프로그램 테스트
1) Layer Setting 버튼을 클릭
2) 팝업에서 세팅 후, 저장 버튼을 클릭
3) 다시 메인에서 Layer Setting 버튼을 클릭
4) 프로그램 종료 발생
2.2 이슈 해결 내용
Layer Setting버튼을 클릭할 때 처음Layer 리스트와 저장된Layer 리스트변수의 값이 달라서 에러가 발생하여 값의 형태를 동일하게 변경
3. 오늘 새로 배운 내용
이번에 대리님께서 업무 인수인계를 해주셔서 좋은 기술을 배울 수 있었습니다.
3.1 Three.js
Three.js란? 웹 브라우저에서 WebGL을 통해 3차원 컴퓨터 그래픽스 애니메이션 응용을 만들고 표현하기 위해 사용되는 Javascript Library이자, API.
WebGL(Web Graphics Library): 웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 Javascript API -> HTML5 Canvas 요소 위에 렌더링됨
Three.js의 구조 
3.1.1 Renderer
- Three.js의 핵심 객체로
Scene과Camera객체를 넘겨 받아 카메라의 절두체 안 3D안 씬의 일부를 평면(2D) 이미지로 렌더링함
3.1.2 Scene
Object가Render되는 장소이다 -물체(Object),빛(Light)등을 놓는 장소Scene에Object,Light등을 추가하고 카메라와 같이Render한다.
1
2
// Scene 정의 예시
const scene = new THREE.Scene();
기본 요소
1
2
3
4
5
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(1,1,1);
const meterial = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube); //cube는 scene의 (0,0,0)에 기본적으로 위치하게 됨
3.1.3 Camera
Camera: 사물을 비춰주는 렌즈 역할을 하는 클래스
기본 요소
PerspectiveCamera(fov: number, aspect: number, near: number, far : number);
- fov:
기본값50(45~75) - aspect:
기본값1(canvas width/canvas height) - near:
기본값0.1 - far:
기본값2000
1
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
1
2
3
4
5
6
const camera = New THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.z = 5
camera.fov = 90;
camera.updateProjectionMatrix();
