想要用tween实现相机的移动,three.js渲染的canvas画布上相机位置一点没动,如何解决??

🏆本文收录于「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钩子正确设置并提供了scenecamerarendererschedule

根据你的代码,这里有一些可能的解决方案:

  • 确保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电子书籍、简历模板等海量资料,你想要的我都有,关键是你不来拿。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/35435.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux 批量mv批量cp | 批量复制粘贴剪切

一、【问题描述】 cp 和 mv这种基本命令&#xff0c;多对一是可以做的 比如 cp /conf/* /despath mv /conf/* /path/bak/ 但是一对多会报错&#xff0c;加-r参数也会报错&#xff0c;而且会有问题&#xff0c;不建议这么做&#xff0c;找一台测试机器你会发现加了-r甚至复制…

每日新闻掌握【2024年6月26日 星期三】

2024年6月26日 星期三 农历五月廿一 大公司/大事件 OpenAI将终止对中国提供API服务 从6月24日晚间开始&#xff0c;已有多名用户收到了来自OpenAI的邮件。该邮件表示&#xff0c;“我们的数据显示您的组织来自OpenAI目前不支持的地区的API流量。”邮件进一步表示&#xff0c;…

高内聚低耦合【代码:ShoppingCart(一个类中提供多种操作购物车的方法体现高内聚)支付方式接口(信用卡类、微信支付类实现支付接口 体现低耦合)】

高内聚低耦合 ⾼内聚指的是&#xff1a;⼀个模块中各个元素之间的联系的紧密程度&#xff0c;如果各个元素(语句、程序段)之间的联系程度越⾼&#xff0c;则内聚性越⾼&#xff0c;即 “⾼内聚”。 低耦合指的是&#xff1a;软件中各个层、模块之间的依赖关联程序越低越好。修…

第1章 物联网模式简介---独特要求和体系结构原则

物联网用例的独特要求 物联网用例往往在功耗、带宽、分析等方面具有非常独特的要求。此外&#xff0c;物联网实施的固有复杂性&#xff08;一端的现场设备在计算上受到挑战&#xff0c;另一端的云容量几乎无限&#xff09;迫使架构师做出艰难的架构决策和实施选择。可用实现技…

【自动调参】年化29.3%,最大回撤18.5%​:lightGBM的参数优化

原创文章第570篇&#xff0c;专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 研报复现继续&#xff1a;【研报复现】年化27.1%&#xff0c;人工智能多因子大类资产配置策略之benchmark 昨天调了一版参数&#xff0c;主要是lambda_l1, lambda_l2&#xff0c;防…

Vmvare12安装CentOS7.6

Vmvare12安装 注意事项 安装完成以后有这两个虚拟网卡。 CentOS官网镜像地址 https://www.centos.org/download/mirrors/Vmvare安装CentOS7.6 创建虚拟机 安装CentOS7.6 选择桌面版 磁盘分区 上述是确认使用自动分区。 设置密码 设置license information 欢迎页面 CentOS7…

使用Python实现网页数据获取与处理:以财经新闻为例

在现代数据驱动的世界中&#xff0c;获取并处理丰富的网页数据是非常重要的技能。本文将介绍如何使用Python编写一个程序&#xff0c;自动获取财经新闻数据并进行处理。这不仅可以帮助我们快速获取最新的财经信息&#xff0c;还可以为后续的数据分析和研究提供支持。 环境准备…

宝兰德受邀出席华为开发者大会2024,携手共绘基础软件新篇章

6月21日-23日&#xff0c;华为开发者大会&#xff08;HDC 2024&#xff09;在东莞松山湖举行&#xff0c;作为全球开发者的年度盛会&#xff0c;本次大会汇聚了众多业界精英与前沿技术。华为分享了HarmonyOS、盘古大模型、昇腾AI云服务、GaussDB数据库、自研仓颉编程语言等最新…

微信小程序录音

微信小程序的录音功能通过一组API来实现&#xff0c;主要涉及录音管理器&#xff08;RecorderManager&#xff09;的使用。下面是详细的实现步骤和代码示例&#xff1a; 初始化录音管理器 首先需要获取录音管理器的实例&#xff0c;可以通过 wx.getRecorderManager() 方法来获…

【IM即时通信 功能介绍】客户端用户在线状态订阅

本文档旨在介绍客户端用户在线状态订阅功能&#xff0c;该功能允许开发者通过 SDK 接口实时监控和接收指定用户的在线或离线状态变更通知。这一功能对于需要实时交流、状态同步或用户活动监控的应用场景至关重要。 功能特点 实时状态通知 跨平台通知&#xff1a;订阅成功后&…

使用 MediaPipe 实现实时手部追踪和手势识别 | Rerun展示

点击下方卡片&#xff0c;关注“小白玩转Python”公众号 在本文中&#xff0c;我将展示一个使用 MediaPipe Python 和 Rerun SDK 进行手部追踪和手势识别的示例。如果您有兴趣深入了解并扩展您的知识&#xff0c;我将指导您如何安装 MediaPipe Python 和 Rerun SDK 来进行手部追…

深入Scala的变量声明与类型推断:语法糖下的智能推导

Scala是一种静态类型语言&#xff0c;以其强大的类型推断系统而闻名。变量声明和类型推断是Scala编程中的基础概念&#xff0c;它们共同简化了代码的编写并提高了开发效率。本文将深入探讨Scala中变量声明的语法规则和类型推断的工作原理。 1. Scala静态类型的优越性 静态类型…

深入理解Python中的*和**在函数参数与调用中的奥秘

深入理解Python中的*和**在函数参数与调用中的奥秘 在Python编程中&#xff0c;*和**这两个操作符在函数参数和函数调用中扮演着特殊的角色。它们分别用于处理位置参数&#xff08;positional arguments&#xff09;和关键字参数&#xff08;keyword arguments&#xff09;&am…

Linux部署SVN

一.下载与安装 &#xff08;1&#xff09;yum安装 yum install subversion &#xff08;2&#xff09;源文件编译安装 ①下载svn源文件 subversion-xxx.tar.gz&#xff08;subversion 源文件&#xff09; subversion-deps-xxx.tar.gz&#xff08;subversion依赖文件&…

RAG项目工期

工期 第一期&#xff0c;基于term的检索&#xff0c;大模型生成 第二期&#xff0c;搭建前端界面&#xff0c;落地 上传pdf&#xff0c;一键解析&#xff0c;上传多个pdf 提问 第三期&#xff0c;使用向量检索&#xff0c;向量数据库选型 第四期&#xff0c;优化排序。 te…

BatchNorm和LayerNorm

参考链接 参考链接 参考链接

项目四 OpenStack身份管理

任务一 理解身份服务 1.1 •Keystone的基本概念 • 认证 &#xff08; Authentication &#xff09; —— 确认用户身份的过程 &#xff0c;又称身份验证 。 • 凭证 &#xff08; Credentials &#xff09; —— 又 称凭据&#xff0c;是用于 确认用户身份的数据 。 • 令牌…

短视频最佳时长:成都柏煜文化传媒有限公司

探索时间与内容之间的完美平衡 成都柏煜文化传媒有限公司 在数字媒体日益繁荣的今天&#xff0c;短视频已成为人们获取信息、娱乐休闲的重要形式。然而&#xff0c;关于短视频的最佳时长&#xff0c;一直是一个备受争议的话题。本文将探讨短视频时长的各种考量因素&#xff0…

MySQL报错Duplicate entry ‘0‘ for key ‘PRIMARY‘

报错现场 现象解释 因为你在插入时没有给 Customer.Id 赋值&#xff0c;MySQL 会倾向于赋值为 NULL。但是主键不能为 NULL&#xff0c;所以 MySQL 帮了你一个忙&#xff0c;将值转换为 0。这样&#xff0c;在第二次插入时就会出现冲突&#xff08;如果已经有一条记录为 0&…

微服务——服务治理

目录 1 什么是服务治理&#xff1f;2 为什么需要服务治理&#xff1f;3 服务治理的关键点3.1 服务注册与发现3.2 负载均衡3.3 容错与熔断3.4 服务监控与告警3.5 服务配置管理 4 示例说明5 总结 1 什么是服务治理&#xff1f; 简单来说&#xff0c;服务治理就是对微服务架构中的…