threejs之利用requestAnimationFrame降低动画频率
作者: 图恩分类: 编程开发阅读: 390发布时间： 2022-04-14 06:31:46
threejs中如何更改动画运动的频率？
方式一：
更改render函数中物体运动的x，y，z值，大则快，小则慢。
方式二：这种方式只能用于降低动画运动频率。
使用辅助函数通过对比时间差限制动画运动频率，本文主要讲解这种方式。
页面动画如下：
animate.gif
动画太快了，现在我们加上降低动画频率代码：
image.png
render中调用：
image.png
实现后的效果：
animate2.gif
若想将再降低一点动画频率，只需将diffTime设置大一点即可。
注意：默认情况下，requestAnimationFrame执行频率是1000/60,大概是16ms多执一次，这个和浏览器屏幕刷新频率有关系。因此如果你想加快动画运动频率的化，会发现diffTime设置为0和设置为10效果是一样的。
那我就是想加快动画怎么办？
只需将运动的x，y值改大点即可，同时关闭limitRateFn函数。
image.png
完整代码如下，注意服务器的方式打开，可直接运行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>立方体运动</title>
<style>
body {
font-family: Monospace;
backgroud: #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>
参考：
https://www.jianshu.com/p/fa5512dfb4f5
来都来了，点个赞吧。
发表评论 (审核通过后显示评论)：