做电影分享网站违法吗网推平台有哪些比较好
stats性能插件添加了以后,会默认在左上角显示性能帧数,每次刷新所用时间,占用内存。鼠标左键点击可进行切换,默认显示每秒的帧数。
案例查看地址:http://www.wjceo.com/blog/threejs/2018-02-09/11.html
首先需要将stats插件引入,地址是官网下载文件里面的examples/js/libs/stats.min.js。
然后需要实例化一个组件,然后添加到dom当中。
//初始化性能插件var stats;function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}
需要在requestAnimationFrame()函数调用里面更新stats。
function animate() {//更新控制器controls.update();render();//更新性能插件stats.update();requestAnimationFrame(animate);}
就这样,页面当中就会显示出来正常插件效果了。
设置默认显示的监听。
Stats.prototype.setMode()方法可以设置插件的默认监听
stats.setMode(0); //默认的监听fps
stats.setMode(1); //默认的监听画面渲染时间
stats.setMode(2); //默认的监听当前的不知道是啥
案例也是用的上一节的案例写的,全部代码:
<!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 οnlοad="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>