三维
文章平均质量分 51
杨大大28
Mind and Head!
展开
-
理解glsl语言的gl_FragCoord与u_resolution
1 概念(1)u_resolution 是画布尺寸,即代表画布宽高(2)gl_FragCoord:是一个 vec4 类型的变量 (x, y, z, 1/w),其中 x, y 是当前片元的窗口坐标。直译就是片元坐标2 结合例子理解如下效果和代码#ifdef GL_ESprecision mediump float;#endif// u_resolution (画布尺寸)uniform vec2 u_resolution;void main() { vec2 st = gl_F原创 2021-12-28 11:18:56 · 3125 阅读 · 5 评论 -
threejs结合tween实现动画效果
1 渲染一个八卦图,实现尺寸从1增大到2,并伴随着旋转效果如下如果用原生js实现上面效果的话,代码如下:首先创建一个八卦图圆面:// 创建圆面let texture = new THREE.TextureLoader().load( require(`../../assets/images/bagua.jpeg`));let geometry = new THREE.CircleGeometry(20, 150);let mesh=new THREE.Mesh( g.原创 2021-12-06 20:08:11 · 4637 阅读 · 0 评论 -
threejs 三次贝塞尔曲线
1 用到如下接口THREE.CubicBezierCurve3 :创建一个平滑的3d贝塞尔曲线,通过定义起点,终点和两个控制点创建THREE.Sprite :创建一个总是朝向摄像机的平面;2 效果显示起点、终点和两个控制点的位置;显示被插入点的位置;起点和终点之间插入10段,获取11个点起点和终点之间插入100段,获取101个点代码: let coors=[ [-80, 0, 0], [-40, 100, 0], [40, 1..原创 2021-11-26 10:24:33 · 1570 阅读 · 0 评论 -
echarts 地图鼠标点击和滚动事件
1 开启鼠标点击和滚动设置roam为true geo: { map: 'china', roam: true, // 鼠标缩放和平移漫游 // silent: true, zoom: 1.1, center: [105.32817322555658, 33.930049038112244], itemStyle: { .原创 2021-11-24 20:04:31 · 2218 阅读 · 0 评论 -
threejs自定义顶点(vertex)创建几何体
threejs 提供了很多生成几何体的方法,如下:调用上面的方法可以很方便创建各种几何体,比如创建一个平面和立方体盒子,设置长宽高或者长宽就可以创建,代码和效果如下:const material = new THREE.MeshBasicMaterial({ color: "orange",});// 立方体const cubegeometry = new THREE.BoxGeometry(10, 10, 10);const cube = new THREE.Mesh(.原创 2021-11-17 23:32:12 · 3546 阅读 · 7 评论 -
threejs 模型添加文字的几种方式
在给几何体或者导入的模型表面添加文字时,可以用如下方式1 将文字绘制到画布中,并将其用作Texture给正方体某个表面添加文字,为例;如下创建一个正方体// ---------------------------------------------------------------------// 添加模型// ---------------------------------------------------------------------var geometry = new原创 2021-11-16 23:30:09 · 15839 阅读 · 4 评论 -
threejs 创建光照,光晕以及阴影
一 创建光照1 环境光 无特定的方向,光照会应用到全局 var ambientLight = new THREE.AmbientLight("white"); scene.add(ambientLight);2 平行光(太阳光) 平行光照亮的整个区域接收到的光强是一样的。光是平行的;可以生成阴影的光之一 var light = new THREE.DirectionalLight("red");//光源颜色...原创 2021-10-17 12:02:21 · 2062 阅读 · 0 评论 -
Threejs创建几何体并贴材质
目录一 创建球体二 创建正方体三 创建圆柱体threejs如何创建比如球体,正方体,圆柱体,并贴材质;一 创建球体纯色纹理和图片纹理的两种球体代码: var geometry0 = new THREE.SphereGeometry(50, 40, 40); var material0 = new THREE.MeshBasicMaterial( {color: 0x00ff00 } ); var sphere0= new THREE.Mesh(.原创 2021-10-16 22:02:45 · 1467 阅读 · 0 评论 -
threejs 创建场景,轨道控制器以及天空盒子
系列文章目录第一章 新建一个场景提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:panda原创 2021-10-16 21:10:32 · 955 阅读 · 0 评论 -
cesium 实现绕点旋转效果
cesium可以实现摄像机绕着某一点,在水平方向上绕点旋转,这里利用zoomTo方法实现1 效果预览2 实现原理利用zoomTo方法,使摄像机镜头绕着某一点,不断更新水平方向head角度,即可实现效果zoomTo(target,HeadingPitchRange) 方法有两个参数,一个是目标对象,一个是摄像机姿态,我们轮询更新摄像机姿态就可以实现动态效果zoomTo(target: Entity | Entity[] | EntityCollection | DataSource.原创 2021-06-23 16:29:43 · 5477 阅读 · 0 评论 -
cesium 如何使实体平滑更新位置
如果需要不断更新实体位置,实现平滑过渡的效果可以借鉴该方式,两种方式实现,一是直接赋值新坐标位置,但有时会出现闪烁情况;这里推荐第二种,通过回调函数的方式更新位置1 直接赋值方式直接赋值方式,cesium绘制原理使首先移除,然后在新位置渲染一个一次进行效果如下可以看到明显缺点:会有闪烁;表现为无有无有....,如果轮询间隔短,甚至出现消失的效果import { Viewer, Cartesian3, Color, PolygonHierarchy,...原创 2021-06-23 17:22:57 · 8091 阅读 · 16 评论 -
cesium 淹没分析效果实现
在某些大场景,比如洼地区域,或者在区省级别,全国范围内的项目,可以借鉴;首先实现淹没效果,然后结合业务,实现淹没分析相关功能。1 效果预览2 实现原理结合多边形的扩展高度 extrudedHeight属性实现,其实就是多边形的拉伸效果;同样设计到动画问题,需要使用回调函数,在回调函数中不断更新拉伸的高度,实现平滑淹没效果extrudedHeight: new CallbackProperty(function () { height+=step return height原创 2021-06-23 17:39:01 · 2145 阅读 · 1 评论 -
三维模型转换工具大全
github地址:具体用法都有;压缩效果不错;https://github.com/CesiumGS/gltf-pipeline原创 2020-12-17 16:55:19 · 3805 阅读 · 6 评论 -
threejs 与cesium 坐标系的区别
threejs 是标准的空间坐标系,右手笛卡尔坐标,即y轴向上原点 O:空间零零点(0,0,0)cesium 是地球空间坐标系,也是右手笛卡尔坐标,但z轴向上原点 O:椭球地心X: 地心指向 零度经线与赤道交点(地心 指向 经度 0 ° 与 纬度 0 ° 交点 )Y: 地心指向 东经 90 与赤道交点 (地心 指向经度 90 °与 纬度 0° 交点)Z: 地心指向 北极点...原创 2020-11-09 18:19:59 · 2351 阅读 · 0 评论