1. Tìm hiểu requestAnimationFrame
Để 1 hoạt cảnh có thể chuyển động thì các khung hình sẽ được render , tùy theo trình duyệt, tốc độ xử lý của GPU máy tính mà số khung hình trên giây sẽ khác nhau.
Cơ bản hàm sẽ như sau
function renderScene() {
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
//Hàm renderSence sẽ được thực hiện lại sau mỗi lần render xong khung hình
Khi đó trong js html
document.getElementById("webgl-output").appendChild(renderer.domElement);
renderScene();
Bình thường chúng ta sẽ không thấy được tốc độ render của khung hình, trừ khi tốc độ render quá chậm thì sẽ làm khung hình của bạn bị giật lát.
Ta sẽ làm ví dụ như sau để thấy được tốc độ khung hình.
[upl-image-preview url=https://making.vn/assets/files/2021-11-18/1637201733-739699-image.png]
2. Tạo chuyển động cơ bản
function renderScene() {
stats.update();
// Quay hình vuông
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02;
//Tăng 0.02 sau mỗi lần render
// Nhảy vị trí qua lại cho hình cầu
step += 0.04;
sphere.position.x = 20 + 10 * Math.cos(step);
sphere.position.y = 2 + 10 * Math.abs(Math.sin(step));
// render dùng requestAnimationFrame
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
Hàm Cos và Sin sẽ tạo chuyển động dạng hình tròn.
[upl-image-preview url=https://making.vn/assets/files/2021-11-18/1637202912-598116-image.png]
