Three.js는 성능 플러그인 통계를 사용하여 성능 모니터링 예제를 자세히 구현합니다.
- 巴扎黑원래의
- 2017-09-26 09:38:002451검색
Three.js는 브라우저에서 실행되는 3D 엔진입니다. 이를 사용하여 다양한 3차원 장면을 만들 수 있습니다. 다음 기사에서는 Three.js가 성능 플러그인을 사용하여 성능 모니터링을 구현하는 방법을 주로 소개합니다. 필요하면 참고해서 공부하자.
머리말
성능에 대해: 성능에 병목 현상이 있는지 확인하기 위해 프로그램을 테스트합니다. 3D 세계에서는 프레임 번호라는 개념이 자주 사용됩니다. 먼저 프레임 번호의 의미를 정의해 보겠습니다.
프레임 번호: 그래픽 프로세서가 초당 새로 고칠 수 있는 횟수이며 일반적으로 fps(Frames Per Second)로 표시됩니다.
성능 정보: 3D 세계에서 프레임 번호는 성능에 병목 현상이 있는지 확인하기 위해 프로그램을 테스트합니다. 자주 사용되는 개념이므로 먼저 프레임 번호의 의미를 정의하겠습니다.
프레임 수: 초당 그래픽 프로세서를 새로 고칠 수 있는 횟수, 일반적으로 fps(Frames Per Second)로 표시됩니다.
통계 성능 플러그인이 추가된 후 성능 프레임 수와 각 새로 고침에 사용되는 시간 기본적으로 왼쪽 상단에 표시되며 메모리를 차지합니다. 마우스 왼쪽 버튼을 클릭하여 전환하면 기본적으로 초당 프레임 수가 표시됩니다.
먼저 통계 플러그인을 소개해야 합니다. 공식 웹사이트에서 다운로드하는 파일의 주소는 example/js/libs/stats.min.js입니다.
그런 다음 구성 요소를 인스턴스화하고 이를 DOM에 추가해야 합니다.
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
} requestAnimationFrame() 함수 호출에서 통계를 업데이트해야 합니다. requestAnimationFrame()函数调用里面更新stats。
function animate() {
//更新控制器
controls.update();
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}就这样，页面当中就会显示出来正常插件效果了。
设置默认显示的监听。
Stats.prototype.setMode()
stats.setMode(0); //默认的监听fps stats.setMode(1); //默认的监听画面渲染时间 stats.setMode(2); //默认的监听当前的不知道是啥이제 페이지에 일반 플러그인 효과가 표시됩니다.
기본 디스플레이 모니터를 설정하세요.
Stats.prototype.setMode() 메소드는 플러그인의 기본 모니터링을 설정할 수 있습니다<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/TrackballControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.set(0, 0, 400);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1,1,1);
scene.add(light);
}
function initModel() {
var map = new THREE.TextureLoader().load("examples/textures/UV_Grid_Sm.jpg");
var material = new THREE.MeshLambertMaterial({map:map});
var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 200, 100, 1, 1, 1), material);
scene.add(cube);
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {
controls = new THREE.TrackballControls( camera );
//旋转速度
controls.rotateSpeed = 5;
//变焦速度
controls.zoomSpeed = 3;
//平移速度
controls.panSpeed = 0.8;
//是否不变焦
controls.noZoom = false;
//是否不平移
controls.noPan = false;
//是否开启移动惯性
controls.staticMoving = false;
//动态阻尼系数 就是灵敏度
controls.dynamicDampingFactor = 0.3;
//未知，占时先保留
//controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );
}
function render() {
renderer.render( scene, camera );
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
controls.handleResize();
render();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
//更新控制器
controls.update();
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}
</script>
</html>🎜🎜🎜케이스도 이전 섹션의 케이스를 사용하여 작성되었습니다. 전체 코드: 🎜🎜🎜 🎜🎜🎜rrreee위 내용은 Three.js는 성능 플러그인 통계를 사용하여 성능 모니터링 예제를 자세히 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!