Three.js中使用requestAnimationFrame方法实现立方体转动和小球跳动的动画
場景
Three.js中顯示坐標軸、平面、球體、四方體：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119150682
在上面顯示平面和球體以及四方體的基礎上怎樣讓四方體和小球動起來，形成下面
的效果。
?
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
??? 如果要在場景中加人動畫，那么首先要找到一種方法。使得場景可以以一定的時問間隔
進行渲染。在HTML5和相應的JavaScript API(應用開發接口)出來之前。這個方法是使
用setlnterval ( function. interval)方法。例如，我們可以通過setlnterval()方法指定函數
每100毫秒調用一次。這個函數的問題是它并不考慮瀏覽器中發生的事情。如果你正在瀏
覽其他頁面.這個函數仍然會每隔幾毫秒就會被調一次。除此之外,setlnterval()方法并沒
有跟顯示器的重畫同步。這可能會導致較高的CPU使用率，降低系統效率。
??? 幸運的是，現在的瀏覽器已經有了解決setlnterval()函數問題的方法。即requestAnimationFrame()函數。
通過requestAnimationFrame()你可以指定一個函數。按照瀏覽器定義的時間間隔調用你可以在這個指定的函數里執行所有必要的繪畫操作，
而瀏覽器則會盡可能保證繪畫過程平滑、高效。
在上面最后渲染場景的時候抽離出方法，并使其定時調用該方法去渲染場景
??????? // 渲染場景var step = 0;renderScene();function renderScene() {// 方塊繞坐標軸旋轉//在每個坐標軸的rotation 屬性上增加0.02，其效果就是//使得這個方塊繞所有的軸旋轉cube.rotation.x += 0.02;cube.rotation.y += 0.02;cube.rotation.z += 0.02;// 修改球體的坐標使其按照一條曲線跳躍//要修改在x軸上的position 和y 軸上的positon//定義彈跳的速度step += 0.04;sphere.position.x = 20 + ( 10 * (Math.cos(step)));sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));// 使用requestAnimationFrame定時渲染場景requestAnimationFrame(renderScene);renderer.render(scene, camera);}完整示例代碼
<!DOCTYPE html><html><head><title>第一個動畫的使用</title><script type="text/javascript" src="./js/three.js"></script><style>body {/* 將邊距設置為0，溢出設置為隱藏，以實現全屏顯示 */margin: 0;overflow: hidden;}</style> </head> <body><!-- 顯示的div --> <div id="WebGL-output"> </div><script type="text/javascript">// 初始化的方法function init() {// 創建一個場景，它將包含我們所有的元素，如物體，攝像機和燈光var scene = new THREE.Scene();// 創建一個相機，它定義了我們正在看的地方var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 創建渲染器并設置大小var renderer = new THREE.WebGLRenderer();//將renderer的背景色設置為接近白色renderer.setClearColorHex();renderer.setClearColor(new THREE.Color(0xEEEEEE));//設置大小renderer.setSize(window.innerWidth, window.innerHeight);// 創建平面，并定義平面的尺寸var planeGeometry = new THREE.PlaneGeometry(60, 20);//創建一個基本材質，并設置顏色var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//把兩個對象合并到Mesh網格對象var plane = new THREE.Mesh(planeGeometry, planeMaterial);// 設置平面繞x軸旋轉90度plane.rotation.x = -0.5 * Math.PI;// 設置平面的坐標位置plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;// 將平面添加進場景scene.add(plane);// 創建一個立方體var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);//設置材質//把線框屬性wireframe設置為truevar cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});//合并var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 設置立方體坐標cube.position.x = 20;cube.position.y = 12;cube.position.z = 2;// 將立方體添加進場景scene.add(cube);// 創建一個球體var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);//把線框屬性wireframe設置為truevar sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);// 設置球體的坐標sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;// 添加進場景scene.add(sphere);// 定義相機的坐標，即懸掛在場景的上方camera.position.x = -30;camera.position.y = 40;camera.position.z = 30;//為了確保相機能夠拍攝到這些物體，使用lookat函數指向場景的中心camera.lookAt(scene.position);// 將renderer的輸出掛接到HTML終點div元素document.getElementById("WebGL-output").appendChild(renderer.domElement);// 渲染場景var step = 0;renderScene();function renderScene() {// 方塊繞坐標軸旋轉//在每個坐標軸的rotation 屬性上增加0.02，其效果就是//使得這個方塊繞所有的軸旋轉cube.rotation.x += 0.02;cube.rotation.y += 0.02;cube.rotation.z += 0.02;// 修改球體的坐標使其按照一條曲線跳躍//要修改在x軸上的position 和y 軸上的positon//定義彈跳的速度step += 0.04;sphere.position.x = 20 + ( 10 * (Math.cos(step)));sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));// 使用requestAnimationFrame定時渲染場景requestAnimationFrame(renderScene);renderer.render(scene, camera);}}window.onload = init;</script> </body> </html>總結
以上是生活随笔為你收集整理的Three.js中使用requestAnimationFrame方法实现立方体转动和小球跳动的动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Windows下使用Java API操作
- 下一篇： Three.js中引入dat.gui库实