首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

threejs地球、星空、世界轮廓绘制、飞线、坐标涟漪 、旋转动画(上篇)

前言 头一阵子B站,抖音都被 陶大宇大哥的倒转地球刷屏了,终于热度下去了,不用倒转头七了。 真的和地球扛上了,公司的大屏项目需要科技感的地球、飞线图。...目标设计样子: 实现步骤分解: ThreeJS环境初始化 星空背景 添加带纹理的地球 世界地图轮廓边界绘制 地球光晕 添加地球云层 城市位置标注和涟漪效果 添加飞线B样条 地球自转和镜头缩放动画 初始化...因为地球元素比较多,且需要转动,所以是一个3dobject对象,添加多个mesh。...材质对象 var line = new LineSegments(geometry, material); //间隔绘制直线 line.scale.set(R, R, R); //lineData.js...云层效果不是一个精灵,它是相当于在地球上又套了一个圆球,半径比地球大一点。

9K31

threejs地球、星空、世界轮廓绘制、飞线、坐标涟漪 、旋转动画(下篇)

接上篇:一个基于ThreeJS 实现的漂亮的3D 地球制作过程详解(上篇) 3D 地球成果展示 github仓库地址:https://github.com/RainManGO/3d-earth npm...实现过程 实现步骤分解: ThreeJS环境初始化 星空背景 添加带纹理的地球 世界地图轮廓边界绘制 地球光晕 添加地球云层 城市位置标注和涟漪效果 添加飞线B样条 地球自转和镜头缩放动画 接上篇从第七步骤说起...longitude * Math.PI) / 180; //转弧度值 var lat = (latitude * Math.PI) / 180; //转弧度值 lon = -lon; // three.js...earthRadius) / fromPartLen, z: (innerPoint.z * partCoefficient * earthRadius) / fromPartLen, }; }; 旋转动画...旋转动画的原理主要是利用tween 动画,然后更新地球位置和轨道控制器的zoom 。

3K20

【带着canvas去流浪(15)】threejs fundamentals翻译系列1-scene graph

本文是three.js系列博文的一篇,第一篇文章是【three.js基础知识】,如果你还没有阅读过,可以从这一篇开始,页面顶部可以切换为中文或英文。...我们将生成的模型加入到场景中,并把它定位到太阳左侧10个单位的地方,因为地球模型也被加入了objects数组,所以它也会转动。...点击在线示例可直接查看,原文中此处有支持在线编辑的示例代码 但是此时你看到的地球模型并不会绕着太阳转动,而仅仅是自己在转动,如果想让地球围绕太阳公转,可以将其作为太阳模型的子元素: //原代码 scene.add...这样,地球模型和太阳模型都变成了这个虚拟节点solarSystem的子节点。现在,当这三个节点都进行转动时,地球不再是太阳的子节点,所以也就不会被放大,正如我们期望的那样。...有时候我们需要一些辅助线以便可以更好地观察scene graph中的实体,three.js中提供了一些有用的工具。

1.6K10
领券