如何基于three.js(webgl)引擎架构,实现3D密集架库房,3D档案室(3d机器人取档、机器人盘点、人工查档、设备巡检)
前言: 这是最好的时代,也是最坏的时代;是充满挑战的时代,也是充满机遇的时代。是科技飞速的时代,也是无限可能的时代。 近年来,人工智能(AI)技术的飞速发展已经席卷了全球,不断突破着技术边界,为各行各业带来前所未有的变革。作为引领未来的核心技术之一,AI正在深刻地改变着我...[2024/2/23]
three.js 汽车行驶动画效果
实现原理是使用TWEEN.Tween实现动画效果 实现 汽车模型加载 使用Promise编写模型的异步加载方法 参数position是汽车初始位置,参数rotation是汽车初始朝向 Car.prototype.loadCar = function (position, rotation)...[2023/12/8]
如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)
序: 又是很久没有更新文章了,这次索性将之前做的三维煤矿项目拿出来讲讲,一是回顾技术,二是锻炼一下文笔。 随着科技的不断发展,越来越多的人开始关注煤矿采集的安全和效率问题。为了更好地展示煤矿采集的过程和效率,可视化展示系统成为了一个非常重要的工具。 本文将介绍一种针对煤矿采集的...[2023/10/11]
Three.js 进阶之旅:滚动控制模型动画和相机动画 🦢
声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。 摘要 专栏上篇文章《Three.js 进阶之旅:页面*滑滚动-王国之泪》 讲解并实现了如何使用 R3F 进行页面图片*滑滚动,本文内容在上节的基础上,学习如何使用滚动控制...[2023/5/25]
Three.js 进阶之旅:全景漫游-高阶版在线看房 🏡
声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。 摘要 专栏上篇文章《Three.js 进阶之旅:全景漫游-初阶移动相机版》中通过创建多个球体全景场景并移动相机和控制器的方式实现了多个场景之间的穿梭漫游。这种方式的缺点也...[2023/4/10]
Three.js 进阶之旅:全景漫游-初阶移动相机版
声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。 摘要 3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现...[2023/3/29]
Three.js 进阶之旅:物理效果-3D乒乓球小游戏 🏓
声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。 摘要 本文在专栏上一篇内容《Three.js 进阶之旅:物理效果-碰撞和声音》的基础上,将使用新的技术栈 React Three Fiber 和 Cannon.js 来实...[2023/3/20]
threeJs实现波纹扩散及光标浮动效果详解
目录版本介绍threejs版本vue版本node版本正文核心代码导入即用1. 新建一个ts文件2. 在要用的页面导入 版本介绍 threejs版本 "version": "0.142.0", vue版本 "version": "^3.0.0" node版本 &qu...[2023/3/17]
Three.js 进阶之旅:物理效果-碰撞和声音 💥
声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。 摘要 本文内容主要汇总如何在 Three.js 创建的 3D 世界中添加物理效果,使其更加真实。所谓物理效果指的是对象会有重力,它们可以相互碰撞,施加力之后可以移动,而且...[2023/2/15]
Three.js 进阶之旅:新春特典-Rabbit craft go 🐇
声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。 摘要 兔年到了,祝大家身体健,康万事顺利。本文内容作为兔年新春纪念页面,将使用 Three.js 及 其他前端开发知识,创建一个以兔子为主题的 3D 简单的趣味页面 Ra...[2023/1/28]
three.js镜头追踪的移动效果实例
目录达到效果实现思路实现难点1、折现变曲线2、镜头朝向不受控3、镜头位置绑定不受控4、镜头抖动最终实现方法方法一:镜头沿线推进方法二:使用tween动画方法比较其他方法方法一:绘制一条折线+animate镜头推进方法二:绘制多条线段+animate镜头推进方法三:绘制多条线段+tween动画变化镜头...[2022/8/22]