Three.js | Stats 라이브러리 추가하기

Stats 라이브러리 추가하기

stats는 코드 성능을 모니터링해주는 라이브러리다.

0. module설치

https://github.com/mrdoob/stats.js

GitHub - mrdoob/stats.js: JavaScript Performance Monitor

위에서 three.modue.js 를 내려받아 기존 build 폴더안에 넣어준다

1. import

import * as THREE from "../build/three.module.js";
import Stats from '../build/stats.module.js'
import { PointerLockControls } from '../examples/jsm/controls/PointerLockControls.js';
import { GLTFLoader } from '../examples/jsm/loaders/GLTFLoader.js';
import { FontLoader } from '../examples/jsm/loaders/FontLoader.js';
import { Water } from '../examples/jsm/objects/Water2.js';
import { DRACOLoader } from '../examples/jsm/loaders/DRACOLoader.js';

 

three js 모듈안에 같이 import 를 시켜주었다

 

2. 인스턴스 생성

class App {
	constructor() {
        this._stats = new Stats()
        this._stats.showPanel(1) // 0: fps, 1: ms, 2: mb, 3+: custom
        document.body.appendChild(this._stats.dom)
        .
        .
        .
    }
}

 

three js 모듈 초기화 하는 부분 제일 상단에 추가해주었다

3.begin() end() 메서드 추가

render(time) {
		//this.update(time);
        //console.log(this._renderer.info)
        // 카메라의 현재 회전값을 가져옵니다.
        const currentRotation = this._camera.rotation.clone();
        if(currentRotation.y >= Math.PI / 5){
            // y 축 주위의 회전값을 1.052로 설정합니다.
            currentRotation.y =  Math.PI / 5;
            currentRotation.x = 0;
            currentRotation.z = 0;
            // 설정한 회전값을 카메라에 적용합니다.
            this._camera.rotation.copy(currentRotation);
        }else if(currentRotation.y <= - Math.PI / 5){
            // y 축 주위의 회전값을 1.052로 설정합니다.
            currentRotation.y = - Math.PI / 5;
            currentRotation.x = 0;
            currentRotation.z = 0;
            // 설정한 회전값을 카메라에 적용합니다.
            this._camera.rotation.copy(currentRotation);
        }

        // 카메라의 현재 위치를 가져옵니다.
        const currentPosition = this._camera.position.clone();
        if(currentPosition.x >= 4.5 ){
            currentPosition.x = 4.5;
            this._camera.position.copy(currentPosition);
        }else if(currentPosition.x <= -4.5 ){
            currentPosition.x = -4.5;
            this._camera.position.copy(currentPosition);
        }else if(currentPosition.z >= 10 ){
            currentPosition.z = 10;
            this._camera.position.copy(currentPosition);
        }else if(currentPosition.z <= 6 ){
            currentPosition.z = 6;
            this._camera.position.copy(currentPosition);
        }
        this._stats.begin()
        this._renderer.render(this._scene, this._camera);
		requestAnimationFrame(this.render.bind(this));
        this._stats.end()
	}

 

모듈의 렌더 메소드 위 아래로 begin(), end() 메서드를 추가해주었다

 

4. update()메소드 추가

모듈이 update도 한다면 update()메소드도 추가해야한다

update(time) {
    time *= 0.001; // second unit
    console.log(this._waterlevel)
    this._gaugeChart1.updateData(21,34)
    this._gaugeChart2.updateData(25,29)
    this._gaugeChart3.updateData(2,24)
    this._gaugeChart4.updateData(1,14)
    this._gaugeChart5.updateData(10,17)
    this._gaugeChart6.updateData(17,20)
    this._waterlevel.updateData(50);
    this._popupinfo.updateData(20)
    this._stats.update()
}

 

제일하단에 추가해주었다

 

5.결과

왼쪽상단에 추가된것을 확인할 수 있다