threejs之利用requestAnimationFrame降低动画频率
How to Adjust Animation Frequency in Three.js
Method 1:
Modify the x, y, z values of the object in the render function. Larger values result in faster movement, while smaller values result in slower movement.
Method 2: This method is only applicable for reducing animation frequency.
Use the time difference approach through a helper function to limit animation frequency. This article focuses on this method.
Animation example:
The animation is too fast. Here's the code to reduce the frequency:
Rendering code:
Effect after implementation:
To further reduce the animation frequency, simply set diffTime to a larger value.
Notes: By default, requestAnimationFrame executes at a frequency of 1000/60 ≈ 16ms per frame, which is related to the browser's screen refresh rate. Therefore, setting diffTime to 0 or 10 has the same effect.
So, how do I speed up the animation?
Just increase the x and y values of the motion, and disable the limitRateFn function.
image.png
Complete code is provided below. Please open it in a server environment and run it directly:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cube Motion</title>
<style>
body {
font-family: Monospace;
background: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#c {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://unpkg.com/three@0.108.0/build/three.module.js';
function main() {
let wireframe = false
// render
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: canvas
});
renderer.setSize(canvas.clientWidth, canvas.clientHeight);//设置窗口尺寸
// scene
const scene = new THREE.Scene();
// camera
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.2, 5);
camera.position.set(0, 1, 4);//设置相机位置
camera.lookAt(scene.position);//让相机指向场景中心
// 生成立方体1
function factoryCube1() {
const geometry = new THREE.ConeGeometry( 1, 2, 3 );
const material = new THREE.MeshPhongMaterial({
color: 0x44aa88,
wireframe
});
let cube = new THREE.Mesh(geometry, material)
cube.position.x = -2;
return cube
}
// 生成立方体2
function factoryCube2() {
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhysicalMaterial({
color: 0x8844aa,
wireframe
});
let cube = new THREE.Mesh(geometry, material)
cube.position.x = 0;
return cube
}
// 生成立方体3
function factoryCube3() {
const geometry = new THREE.SphereGeometry(1, 30, 30);
const material = new THREE.MeshNormalMaterial({
// color: 0xaa8844,
wireframe
});
let cube = new THREE.Mesh(geometry, material)
cube.position.x = 2;
return cube
}
const cubes = [
factoryCube1(),
factoryCube2(),
factoryCube3()
]
// 将立方体添加到场景
cubes.map(item => {
scene.add(item)
})
// 添加灯光
function addLight() {
//自然光
var ambientLight = new THREE.AmbientLight( 0x606060 );
scene.add( ambientLight );
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
}
addLight()
// 显示坐标系
function showXYZ() {
scene.add( new THREE.AxesHelper( 250 ) );
}
showXYZ()
// 降低动画频率
let diffTime = 60; // 动画最小时间间隔,单位 ms
let lastDate = Date.now() // 上次时间 - 初始记录的当前时间
let limitRateFn = function(animateFn) {
// 运动时间
let currentDate = Date.now()
if (currentDate - lastDate >= diffTime) {
lastDate = currentDate
animateFn()
}
}
function render() {
let animate = function(){
cubes.forEach((cube, ndx) => {
cube.rotation.x += 0.01 + 0.01 * ndx;
cube.rotation.y += 0.01 + 0.01 * ndx;
});
renderer.render(scene, camera);
}
// 指定动画频率降低
limitRateFn(animate)
// animate()
requestAnimationFrame(render);
}
render();
}
main()
</script>
</body>
</html>
References:
https://www.jianshu.com/p/fa5512dfb4f5
Thank you for reading! Please upvote if you find it helpful.
