🏆本文收錄于「Bug調優」專欄，主要記錄項目實戰過程中的Bug之前因后果及提供真實有效的解決方案，希望能夠助你一臂之力，幫你早日登頂實現財富自由🚀；同時，歡迎大家關注&&收藏&&訂閱！持續更新中，up！up！up！！

問題描述

??這次問題應該簡單一點，就是我寫了個ts文件用hooks封裝了一下，然后在另一個ts文件中引入進來了第五行的相機camera，想要用tween實現相機的移動，但是這里出現個問題，打印的相機位置不斷地移動了，但是three.js渲染的canvas畫布上相機位置一點沒動，

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import * as TWEEN from "@tweenjs/tween.js";
import { useThree } from "./useThree";
const { scene, camera, renderer, schedule } = useThree();interface CarModel {cameraMove: TWEEN.Tween<THREE.Vector3>;
}
export default async function car(): Promise<CarModel> {const loader = new GLTFLoader();let cameraMove: any;// let cameraMove=new TWEEN.Tween(camera.position).to({ x: 215, y: 1, z: 80 }, 20000);try {      cameraMove=new TWEEN.Tween(camera.position).to( new THREE.Vector3(215, 1, 80), 13000).onUpdate(() => {console.log('相機移動',camera.position);camera.updateProjectionMatrix();});} catch (error) {};   function animate() {requestAnimationFrame(animate);TWEEN.update(); renderer.render(scene, camera);}animate();return {cameraMove,};
}

如上問題有來自我自身項目開發，有的收集網站，有的來自讀者，如有侵權，立馬刪除。

解決方案

??如下是上述問題的解決方案，僅供參考：

??在Three.js中使用TWEEN.js來實現相機移動時，確保相機位置更新和渲染循環正確設置是非常重要的。從你提供的代碼來看，有幾個可能的問題點需要檢查：

1. Tween 更新：確保TWEEN.update()在動畫幀中被調用，以便更新所有tween的狀態。

2. 相機投影矩陣更新：在更新相機位置后，調用camera.updateProjectionMatrix()是正確的，但要確保它在每次渲染之前被調用。

3. 渲染循環：渲染循環animate函數需要持續運行以重新渲染場景。

4. Tween啟動：確保cameraMove tween已經被啟動，TWEEN.Tween實例需要調用.start()方法來開始動畫。

5. 錯誤處理：catch塊為空，如果try塊中拋出錯誤，將不會打印或處理錯誤信息。

6. 返回 Tween 對象：你返回了cameraMove，但沒有在animate函數外部啟動它。

7. useThree 鉤子：確保useThree鉤子正確設置并提供了scene、camera、renderer和schedule。

根據你的代碼，這里有一些可能的解決方案：

• 確保cameraMove.start()在創建tween后被調用，以啟動動畫。

cameraMove.start();

• 將animate函數放置在組件的生命周期中，確保它在組件掛載后運行。

• 檢查useThree鉤子是否正確設置，并且camera對象是Three.js中的PerspectiveCamera實例。

• 檢查是否有其他JavaScript錯誤或Three.js場景設置問題，這可能會阻止場景正確渲染。

• 確保沒有其他腳本或CSS樣式影響canvas元素。

• 如果你使用的是React或類似的前端框架，請確保animate函數在組件卸載時被正確停止，以避免內存泄漏。

這是一個更新后的示例代碼，它包含了啟動tween和錯誤處理：

// ...其他代碼try {      cameraMove = new TWEEN.Tween(camera.position).to(new THREE.Vector3(215, 1, 80), 13000).onUpdate(() => {console.log('相機移動', camera.position);camera.updateProjectionMatrix();}).onComplete(() => {console.log('相機移動完成');}).start(); // 啟動tween
} catch (error) {console.error('相機移動初始化失敗:', error);
}// ...其他代碼

如果這些解決方案仍然無法解決問題，請檢查瀏覽器的開發者控制臺是否有任何錯誤信息，并確保Three.js和TWEEN.js庫被正確導入和使用。

??希望能夠幫到有需要的你。

??PS：如若遇到采納如下方案還是未解決的同學，希望不要抱怨&&急躁，畢竟影響因素眾多，我寫出來也是希望能夠盡最大努力幫助到同類似問題的小伙伴，即把你未解決或者產生新Bug黏貼在評論區，我們大家一起來努力，一起幫你看看，可以不咯。

??若有對當前Bug有與如下提供的方法不一致，有個不情之請，希望你能把你的新思路或新方法分享到評論區，一起學習，目的就是幫助更多所需要的同學，正所謂「贈人玫瑰，手留余香」。

??寫在最后

??ok，以上就是我這期的Bug修復內容啦，如果還想查找更多解決方案，你可以看看我專門收集Bug及提供解決方案的專欄「Bug調優」，都是實戰中碰到的Bug，希望對你有所幫助。到此，咱們下期拜拜。

碼字不易，如果這篇文章對你有所幫助，幫忙給bugj菌來個一鍵三連(關注、點贊、收藏) ，您的支持就是我堅持寫作分享知識點傳播技術的最大動力。

同時也推薦大家關注我的硬核公眾號:「猿圈奇妙屋」 ；以第一手學習bug菌的首發干貨，不僅能學習更多技術硬貨，還可白嫖最新BAT大廠面試真題、4000G Pdf技術書籍、萬份簡歷/PPT模板、技術文章Markdown文檔等海量資料，你想要的我都有！

📣關于我

我是bug菌，CSDN | 掘金 | InfoQ | 51CTO | 華為云 | 阿里云 | 騰訊云 等社區博客專家，C站博客之星Top30，華為云2023年度十佳博主，掘金多年度人氣作者Top40，51CTO年度博主Top12，掘金/InfoQ/51CTO等社區優質創作者；全網粉絲合計 20w+；硬核微信公眾號「猿圈奇妙屋」，歡迎你的加入！免費白嫖最新BAT互聯網公司面試真題、4000G PDF電子書籍、簡歷模板等海量資料，你想要的我都有，關鍵是你不來拿。

---