我正在使用 Three.js 創建影片，但我的animate()功能無法正常作業。簡化代碼如下：
let obj;
let camera = new THREE.PerspectiveCamera(fov, asp, near, far);
let scene = new THREE.Scene();
const loader = new THREE.GLTFLoader();
async function init() {
obj = await loader.loadAsync("./public/modelo/scene.gltf");
scene.add(obj.scene);
animate(obj.scene.children[0]);
renderer.render(scene, camera);
function animate(objeto){
console.log(objeto);
requestAnimationFrame(animate);
objeto.rotation.z = 0.005;
renderer.render(scene, camera);
}
}
init();
該函式適用于第一次呼叫，但之后我可以通過我的console.log()陳述句看到出錯的地方。在第一次運行時animate()，該行按預期列印出物件。但是，在所有隨后的呼叫中，該陳述句只回傳一個浮點數，該數隨著每次連續呼叫而大大增加。我檢查并確保物件在第一個函式呼叫結束時完好無損，所以我不確定這里發生了什么。有什么建議？
uj5u.com熱心網友回復：
問題在于您的代碼中的這一行：
requestAnimationFrame(animate);
從MDN 檔案中requestAnimationFrame，您傳遞給它的回呼 - 在這里animate，是：
當需要為下一次重繪更新影片時呼叫的函式。回呼函式傳遞一個引數，一個 DOMHighResTimeStamp 類似于 performance.now() 回傳的那個，指示 requestAnimationFrame() 開始執行回呼函式的時間點。
換句話說，你animate被呼叫時帶有時間戳——在某些方面我想象它的行為很像一個數字（我個人并不熟悉 aDOMHighResTimeStamp是什么），并解釋了你所看到的。它肯定不會以您的“objeto”為引數被呼叫。
為了確保這一點，只需作為回呼傳入一個函式將animate使用正確的引數呼叫。將上面的呼叫替換為
requestAnimationFrame(() => { animate(objeto); });
編輯：或者如@Bergi 所建議的那樣，我們可以通過在函式中簡單地定義objeto外部animate,來完全避免需要引數init。由于您總是animate使用相同的引數呼叫，因此無需專門傳遞它，因此您的代碼可以是：
async function init() {
obj = await loader.loadAsync("./public/modelo/scene.gltf");
const objeto = obj.scene.children[0];
scene.add(obj.scene);
animate();
renderer.render(scene, camera);
function animate(){
console.log(objeto);
requestAnimationFrame(animate);
objeto.rotation.z = 0.005;
renderer.render(scene, camera);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/395532.html
標籤：javascript 功能 动画片 类型 三.js