上一節實現可用鼠標控制相機的方式實現動態效果，但很多時候是需要場景自己產恒動態效果，而不是通過鼠標拖動，此時引入一個requestAnimationFrame方法，它實際上是通過定時任務的方式，每隔一點時間改變場景中內容后重新渲染一遍，間隔時間短的話視覺上就顯示出連續的動畫效果，Js本身也自帶定時方法 setInterval，同樣可以實現動畫效果，但是性能上不如requestAnimationFrame，比如瀏覽器的當前窗口并非是threeJs頁面，setInterval會一直循環執行，但是?requestAnimationFrame會停止，直到瀏覽器的Tab標簽切換到threejs頁面才會繼續執行。下面的源碼展示了通過requestAnimationFrame的方式實現動畫效果。（mesh.rotation.x += 0.02是改變正方體網格的z軸旋轉角度），requestAnimationFrame每執行一次就會旋轉一次。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--引入three.js，這是使用three必須的js文件，此處引入的是外網提供的three文件，如果引入有問題可以到官網下載three文件后引入本地的theee.js文件--><script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script><script src="three/OrbitControls.js"></script>
</head><body>
<script>/*** 創建場景對象Scene*/var scene = new THREE.Scene();/*** 相機設置*///窗口寬度var width = window.innerWidth;//窗口高度var height = window.innerHeight;//窗口寬高比var k = width / height;//三維場景顯示范圍控制系數，系數越大，顯示的范圍越大var s = 200;//創建相機對象var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);//設置相機位置camera.position.set(200, 300, 200);//設置相機方向(指向的場景對象)camera.lookAt(scene.position);/*** 光源設置*///新建點光源（常用光源分為點光源和環境光，點光源的效果類似燈泡，環境光的效果類似白天的太陽光）var point = new THREE.PointLight(0xffffff);//設置點光源的位置point.position.set(400, 200, 300);//將點光源添加到場景中scene.add(point);/*** 創建網格模型，也就是3D模型*///創建一個立方體幾何對象Geometryvar geometry = new THREE.BoxGeometry(100, 100, 100);//給幾何體創建材質，這里是改為藍色，材質對象Materialvar material = new THREE.MeshLambertMaterial({color: 0x0000ff});//網格模型對象Meshvar mesh = new THREE.Mesh(geometry, material);//網格模型添加到場景中，每個模型最終都要添加到場景中才會被渲染scene.add(mesh);/*** 創建渲染器對象*///創建渲染器對象（渲染要等所有東西都加進去再渲染場景，創建和3D模型和光源沒有先后順序）var renderer = new THREE.WebGLRenderer();//設置渲染區域尺寸（設置的是整個屏幕的長度和寬度renderer.setSize(width, height);//設置渲染的背景色renderer.setClearColor(0xb9d3ff, 1);//body元素中插入canvas對象，也可以在頁面中添加div，并加上id，通過id指定在某個div中渲染document.body.appendChild(renderer.domElement);//循環渲染function render() {//執行渲染操作 指定場景、相機作為參數renderer.render(scene, camera);// 使用 requestAnimationFrame 函數安排下一次渲染requestAnimationFrame(render);//修改正方體網格的x軸旋轉角度mesh.rotation.x += 0.02}//執行渲染render()//創建鼠標控制器 //let controls = new THREE.OrbitControls(camera, renderer.domElement );//監聽控制器，每次拖動后重新渲染畫面//controls.addEventListener('change', function () {// renderer.render(scene, camera); //執行渲染操作//});</script>
</body>
</html>效果如下，這里是圖片，只是其中一幀的樣子，沒有動態效果。看到動態效果可以把上面的代碼復制到html文件中雙擊打開在瀏覽器中執行。
如果有疑問可以在評論里留言。
)
![Java詳解之I/O[BIO、NIO、AIO使用方法和示范代碼]](http://pic.xiahunao.cn/Java詳解之I/O[BIO、NIO、AIO使用方法和示范代碼])
