窗口大小调整会导致动画加速。(ThreeJS)
窗口大小调整会导致动画加速。(ThreeJS)
提问于 2022-03-15 01:34:53
我有下面的代码，当我调整窗口的大小时，我想知道为什么它会失控。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>FooBarBaz</h1>
<p>LaDeDa</p>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
var objects = [
{
name : "earth",
mesh : new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), new THREE.MeshPhongMaterial()),
init : function(scene){
this.mesh.position.set(0,0,0);
//this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
scene.add(this.mesh);
},
animate : function(t){return}
},
{
name : "satellite",
mesh : new THREE.Mesh(new THREE.SphereGeometry(0.1, 32, 32), new THREE.MeshPhongMaterial()),
init : function(scene){
this.mesh.position.set(1.5,0,0);
//this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
scene.add(this.mesh);
},
animate : function(t){this.mesh.position.set(Math.sin(t)*1.5,Math.cos(t)*1.5,0);}
}];
objects.forEach(object => object.init(scene));
var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 0.5);
scene.add(light);
camera.position.x = 0;
camera.position.y = -5;
camera.position.z = 0;
camera.lookAt(new THREE.Vector3( 0, 0, 0));
var timeStep = 0.01;
var time = 0;
var controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.target.set( 0, 0, 0 );
var render = function () {
time += timeStep;
requestAnimationFrame( render );
objects.forEach(object => object.animate(time));
controls.update();
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
render()
}
window.addEventListener('resize', onWindowResize, false)
document.body.appendChild( renderer.domElement );
render();</script>
</body>
</html>
你可以看到，每次你调整窗口的大小，它就会越来越快.为什么？
回答 1
Stack Overflow用户
发布于 2022-03-15 01:54:49
因为调整调用的大小、呈现和呈现调用请求动画框架( render )，所以最终会出现多个隐藏的呈现重叠循环。通过添加一个不请求动画帧的函数renderOnce，并使用它来调整大小，解决了这个问题。在调整大小的同时，动画仍然会移动得更快，但是一旦调整完大小，动画的速度就会恢复正常。
var renderOnce = function () {
time += timeStep;
objects.forEach(object => object.animate(time));
controls.update();
renderer.render(scene, camera);
}
var render = function () {
renderOnce();
requestAnimationFrame( render );
}
window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
renderOnce();
}同时，调整大小时的加速也可以通过将time+=timeStep从renderOnce移到渲染来解决。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71476038
复制相关文章
相似问题
腾讯云开发者
