文章目錄
- 一、物體運動的兩種方法
- 1.1 改變相機的位置
- 1.2 改變物體的位置
- 二、渲染回圈---運動的關鍵
- 三、評估性能---Stats
- 3.1 性能監視器Stats
- 3.2 性能監視器Stats的使用
- 四、一個栗子
一、物體運動的兩種方法
1.1 改變相機的位置
讓相機在坐標系里面移動，物體不動，
1.2 改變物體的位置
物體在坐標系里面移動，攝像機不動，
二、渲染回圈—運動的關鍵
物體運動的關鍵就是要渲染物體運動的每一個程序，讓它顯示給觀眾，渲染的時候，呼叫的是渲染器的render（）函式
renderer.render(scene,camera);
- 如果改變了物體的顏色或者位置之類的屬性，那么就需要不斷的繪制新的場景，就要重復呼叫render（）函式，才能將新的場景繪制到瀏覽器中去，、
- 為了實作回圈，這里使用到了
requestAnimationFrame（）這個函式 - 呼叫
requestAnimationFrame（）函式，傳遞一個callback引數，則在下一幀影片時，呼叫callback這個函式，
function animate(){
render();
requestAnimationFrame(animate);
}
三、評估性能—Stats
關于性能：測驗一個程式，性能上是否有瓶頸，在3d中經常使用幀數的概念，幀數：圖形處理器每秒鐘能夠重繪幾次，通常用fps來表示，- 幀數越高，畫面的感徑訓越好，
3.1 性能監視器Stats
- 關于它的介紹，可以在https://github.com/mrdoob/stats.js了解，
- 也可以在下載的three.js壓縮包中了解：
- three.js-master
- examples
- js
- libs
- stats.js
FPS：表示上一秒的幀數，值越大越好，一般為60左右，點擊下圖會變成綠色的，
MS：表示渲染一幀需要的毫秒數，這個數字越小越好，再次點擊可回到FPS視圖中，
3.2 性能監視器Stats的使用
在Three.js中，性能監視器被封裝在一個類中，這個類叫做Stats，
var stats = new Stats();
stats.setMode(1) //0:fps ,1:ms
//將Stats的界面放在左上角
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
setInterval(function(){
stats.begin();
//每一幀代碼
stats.end();
},1000/60);
代碼決議：
setMode函式：引數為0的時候，表示顯示的是FPS界面，引數為1時，表示顯示的是MS界面，Stats的domElement：表示繪制的目的地（DOM），波形圖就繪制在上面，Stats的begin函式：在要測驗的代碼前面呼叫begin函式，在代碼執行完畢后呼叫end函式，這樣就能統計出這段代碼執行的平均幀數了，- fps = 幀數/時間
使用步驟：
- new一個Stats物件
stats = new Stats（） - 將這個物件加入到HTML頁面中
- 呼叫
stats.update()函式來統計時間和幀數，
四、一個栗子
運用運動、渲染回圈、性能檢測
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>讓物體動起來</title>
<script src="three.js"></script>
<script src="stats.js"></script>
</head>
<body>
<div id='app'></div>
<script>
//創建場景
var scene = new THREE.Scene();
//創建相機
var camera = new THREE.PerspectiveCamera(105,window.innerWidth/window.innerHeight,1,1000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 40;
//創建渲染器
render = new THREE.WebGLRenderer({
antialias:true
});
//設定畫布大小
render.setSize(window.innerWidth,window.innerHeight);
var app = document.getElementById("app");
app.appendChild(render.domElement);
//創造一個立方體，點模型
var geometry = new THREE.CylinderGeometry(10,20,15,5);//引數：頂面半徑，地面半徑，高度，分成幾邊體
//創造一個立方體，網格模型
var material3 = new THREE.MeshBasicMaterial({
color:0x00ff00
});
var meshs = new THREE.Mesh(geometry,material3);
//創建物體的邊框線
var geoedg = new THREE.EdgesGeometry(geometry,10);
var edgcol = new THREE.LineBasicMaterial({color:0xffd700});
var geoline = new THREE.LineSegments(geoedg,edgcol);
meshs.add(geoline);
scene.add(meshs);
//渲染
render.render(scene,camera);
//性能監視器
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '30px';
stats.domElement.style.top = '10px';
app.appendChild(stats.domElement);
//產生影片
function animate(){
//相機移動
camera.position.y -=0.05;
if(camera.position.y < -10){
camera.position.z +=0.05;
}
render.render(scene,camera);
//物體移動
//meshs.position.y +=0.05;
//if(meshs.position.y>10){
//meshs.position.z -=0.05;
//}
//render.render(scene,camera);
//window.requestAnimationFrame(animate);
stats.update();
}
setInterval(animate,10);
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258440.html
標籤：其他
上一篇：微信小程式上傳及預覽檔案