원리눈에는 보이지않는 광선을 발사광선이 충돌한 객체들을 특정배열에 부딪힌 순서대로 담음제일 처음 부딪힌 객체의 이름을 가지고 이벤트 발생시킴 class App { constructor() { this._setupThreeJs() this._setupCamera(); this._setupLight(); this._setupModel(); this._setupControls(); this._setupEvents(); this._pointer = new THREE.Vector2(); this._raycaster = new THREE.Raycaster(); //카메라이동 조작부관련 thi..
FPS drop 방지를 위한 성능최적화그래픽사양이 좋지않은 컴터에서 버벅임 현상이 심했다아래는 이를 해결했던 방식들이다 1. 클래스화코드의 중복을 막기위해 클래스화 하였다. App에서 ThreeJS 구동을위한 기본적인 코드를 작성했고간단한 모델링은 직접 클래스로 구현하여App안에서 인스턴스를 생성하는 방식으로 작성했다App클래스에는 여러 인스턴스 변수들과 메소드들이 존재하는데당연한거지만 constructor 내에서 메소드를 초기화할때메소드내에서 사용되는 변수들은 메소드코드 윗쪽에 다 선언해주어야한다.안그러면 undefined 뜬다.복잡한 모델링은 블렌더에서 제작해 import 했다 2. 모델링 압축모델링은 블렌더에서 진행했다. 공들여 작업하고 용량을 보니 한파일에 100mb, 400mb 어마무시하게 ..
Stats 라이브러리 추가하기stats는 코드 성능을 모니터링해주는 라이브러리다.0. module설치https://github.com/mrdoob/stats.js GitHub - mrdoob/stats.js: JavaScript Performance MonitorJavaScript Performance Monitor. Contribute to mrdoob/stats.js development by creating an account on GitHub.github.com위에서 three.modue.js 를 내려받아 기존 build 폴더안에 넣어준다1. importimport * as THREE from "../build/three.module.js";import Stats from '../build/sta..
Geometry - PlaneGeometry1.구성planegeometry는 4개의 인자를받는다width, height, widthSegments, heightSegments 2. 너비에 대한 길이첫번째 인자는 너비에 대한 길이이다.기본값은 1이다0.5로 변경해보자const geometry = new THREE.PlaneGeometry(0.5); 3.높이에대한 길이두번째 인자는 높이에대한 길이이다.3으로 수정해보자const geometry = new THREE.PlaneGeometry(0.5, 3); 4. 너비 방향에 대한 분할 수세번째 인자는 너비 방향에 대한 분할 수 이다.기본값은 1이다.2로 변경해보자const geometry = new THREE.PlaneGeometry(0.5, 3, 2);5...
Geometry - RingGeometry1. 구성RingGeometry는 6개의 인자를받는다innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength 2. 내부반지름기본값은 0.5이다0.7로 변경해보자const geometry = new THREE.RingGeometry(0.7) 0.2로 변경해보자const geometry = new THREE.RingGeometry(0.2) 3. 외부반지름기본값은 1이다0.7로 변경해보자const geometry = new THREE.RingGeometry(0.7,0.7) 4. 가장자리 둘레방향에 대한 분할 수 세번째 인자는 가장자리 둘레방향에 대한 분할 수 이다.기본 값은 32이다.5로..
SphereGeometry1. 구성SphereGeometry는 생성자의 인자로radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength 를 받는다 2. 구의 반지름 크기첫번째 인자(radius)는 구의 반지름 크기이다.구의 크기가 결정된다고 볼 수 있다.기본값은 1이다.0.5를 줘보자.const geometry = new THREE.SphereGeometry(0.5); 3. 수평방향에 대한 분할 수두번째 인자는 수평방향에 대한 분할 개수(widthSegments) 이다.기본값은 32이다.6을 줘보자const geometry = new THREE.SphereGeometry(0.5,6); 4. 수직방향에 대한 분할 수..
