Three.js - 渲染问题 - 动画在晃动
Three.js - issue with rendering - animation is shaking
我在旋转球体的渲染时遇到一个奇怪的问题:动画似乎在晃动,我不知道这个问题是从哪里来的。
这是 this link
上的示例
和渲染函数:
function render() {
controls.update();
requestAnimationFrame(render);
// For camera rotation : parametric parameter
timer = Date.now()*0.0001;
// Coordinates of camera
coordCamera.set(radiusCamera*Math.cos(timer), radiusCamera*Math.sin(timer), 0);
// Rotate camera function
rotateCamera();
// Rendering
renderer.render(scene, camera);
}
具有 rotateCamera
和 computeRotation
功能:
function computeRotation (objectRotation, coordObject) {
// Apply rotation matrix
var rotationAll = new THREE.Matrix4();
var rotationX = new THREE.Matrix4().makeRotationX(objectRotation.rotation.x);
var rotationY = new THREE.Matrix4().makeRotationY(objectRotation.rotation.y);
var rotationZ = new THREE.Matrix4().makeRotationZ(objectRotation.rotation.z);
rotationAll.multiplyMatrices(rotationX, rotationY);
rotationAll.multiply(rotationZ);
// Compute world coordinates
coordObject.applyMatrix4(rotationAll);
}
function rotateCamera() {
// Compute coordinates of camera
computeRotation(torus, coordCamera);
// Set camera position for motion
camera.position.set(coordCamera.x, coordCamera.y, coordCamera.z)
}
如果有人能看出问题所在,那就太好了,
感谢您的帮助
更新:
我试图在下面插入解决方案;我没有制作动画,没有显示任何内容:这里是我对 jsfiddle 的尝试:
https://jsfiddle.net/ysis81/uau3nw2q/5/
我也用 performance.now() 试过,但动画仍然在抖动;你可以在 https://jsfiddle.net/ysis81/2Lok5agy/3/
上查看
我已经开始悬赏来解决这个问题。
requestAnimationFrame 将执行带有时间戳参数的回调渲染函数。使用该参数计算自上一帧以来经过了多少毫秒。然后使用该差异作为旋转的某个百分比。
var mySpecificLogic = function (millesecondsSinceLastFrame) {
// rotate your camera here
// if you want it to rotate 20 degrees every second
var rotPerSecond = 20;
var rotationPerMS = rotPerSecond / 1000;
var rotationInDegrees = millesecondsSinceLastFrame * rotationPerMS;
// call your rotation function
// note: if you are also trying to move the ball with the mouse
// you'll want a hook to disable this basic rotation
// set the camera to whatever rotation you want
renderer.render(scene, camera);
};
var startTheWholeThing = function() {
var lastFrameTime;
var deltaT;
function recurse( thisFrameTime ) {
window.requestAnimationFrame(recurse);
lastFrameTime = lastFrameTime || thisFrameTime;
deltaT = thisFrameTime - lastFrameTime;
mySpecificLogic(deltaT);
lastFrameTime = thisFrameTime;
}
recurse();
};
startTheWholeThing();
我在旋转球体的渲染时遇到一个奇怪的问题:动画似乎在晃动,我不知道这个问题是从哪里来的。
这是 this link
上的示例和渲染函数:
function render() {
controls.update();
requestAnimationFrame(render);
// For camera rotation : parametric parameter
timer = Date.now()*0.0001;
// Coordinates of camera
coordCamera.set(radiusCamera*Math.cos(timer), radiusCamera*Math.sin(timer), 0);
// Rotate camera function
rotateCamera();
// Rendering
renderer.render(scene, camera);
}
具有 rotateCamera
和 computeRotation
功能:
function computeRotation (objectRotation, coordObject) {
// Apply rotation matrix
var rotationAll = new THREE.Matrix4();
var rotationX = new THREE.Matrix4().makeRotationX(objectRotation.rotation.x);
var rotationY = new THREE.Matrix4().makeRotationY(objectRotation.rotation.y);
var rotationZ = new THREE.Matrix4().makeRotationZ(objectRotation.rotation.z);
rotationAll.multiplyMatrices(rotationX, rotationY);
rotationAll.multiply(rotationZ);
// Compute world coordinates
coordObject.applyMatrix4(rotationAll);
}
function rotateCamera() {
// Compute coordinates of camera
computeRotation(torus, coordCamera);
// Set camera position for motion
camera.position.set(coordCamera.x, coordCamera.y, coordCamera.z)
}
如果有人能看出问题所在,那就太好了,
感谢您的帮助
更新:
我试图在下面插入解决方案;我没有制作动画,没有显示任何内容:这里是我对 jsfiddle 的尝试:
https://jsfiddle.net/ysis81/uau3nw2q/5/
我也用 performance.now() 试过,但动画仍然在抖动;你可以在 https://jsfiddle.net/ysis81/2Lok5agy/3/
上查看我已经开始悬赏来解决这个问题。
requestAnimationFrame 将执行带有时间戳参数的回调渲染函数。使用该参数计算自上一帧以来经过了多少毫秒。然后使用该差异作为旋转的某个百分比。
var mySpecificLogic = function (millesecondsSinceLastFrame) {
// rotate your camera here
// if you want it to rotate 20 degrees every second
var rotPerSecond = 20;
var rotationPerMS = rotPerSecond / 1000;
var rotationInDegrees = millesecondsSinceLastFrame * rotationPerMS;
// call your rotation function
// note: if you are also trying to move the ball with the mouse
// you'll want a hook to disable this basic rotation
// set the camera to whatever rotation you want
renderer.render(scene, camera);
};
var startTheWholeThing = function() {
var lastFrameTime;
var deltaT;
function recurse( thisFrameTime ) {
window.requestAnimationFrame(recurse);
lastFrameTime = lastFrameTime || thisFrameTime;
deltaT = thisFrameTime - lastFrameTime;
mySpecificLogic(deltaT);
lastFrameTime = thisFrameTime;
}
recurse();
};
startTheWholeThing();