- 博客(23)
- 收藏
- 关注
RSS订阅原创 js录制屏幕并输出视频
借助navigator，需要注意的是navigator.mediaDevices.getDisplayMedia需要在https使用，若部署环境为http,则会导致navigator.mediaDevices.getDisplayMedia为undefined。time为录制的时长，若时长为一秒则time值为1000。
2023-10-09 15:31:00
658
原创 arcgis js 缓冲区分析（GP服务）
arcgis文档中的有提供缓冲区的接口 geometryService，但要4.19后版本才提供案例中使用的版本为4.16，因此这里的缓冲区分析借助gp工具。
2023-09-16 00:48:22
799
1
原创 JavaScript 数据结构
链表是一种动态的数据结构，不同于数组的是，链表分配内存空间的灵活性，它不会像数组一样被分配一块连续的内存。链表的灵活性在于它的每个元素节点分为两部分，一部分是存储元素本身，另一部分是指向下一个节点元素的引用。当要插入数据时，把上一个节点的向下指针指向新数据节点，新数据节点的向下指针指向原有数据。但是链表不像数组那样可以直接通过索引立刻定位，只能通过遍历。
2021-08-23 16:00:26
226
原创 threejs 效果合成器（EffectComposer）
用于在three.js中实现后期处理效果。该类管理了产生最终视觉效果的后期处理过程链。 后期处理过程根据它们添加/插入的顺序来执行，最后一个过程会被自动渲染到屏幕上。构造函数EffectComposer( renderer 例子outlinePassoutlinePass方法如下：function initEffectComposer(){ composer = new THREE.EffectComposer( renderer ); const renderPass = new TH
2021-08-17 16:56:24
1643
3
原创 threejs Point
利用point实现雪花下落的效果const amount=500;const radius=150;function addSnow1(){ for(let i=0 ;i<amount;i++){ vertex.x=(Math.random()*2-1)*radius; vertex.y=(Math.random()*2-1)*radius; vertex.z=(Math.random()*2-1)*radius; vertex.toArray(positi
2021-08-13 16:52:33
602
原创 threejs 实例化网格（InstancedMesh）
实例化网格（InstancedMesh）一种具有实例化渲染支持的特殊版本的Mesh。你可以使用 InstancedMesh 来渲染大量具有相同几何体与材质、但具有不同世界变换的物体。 使用 InstancedMesh 将帮助你减少 draw call 的数量，从而提升你应用程序的整体渲染性能。当前的实现需要InstancedMesh和其它3D物体间不共享材质。其构造函数，如图实现方式：function testInstanceMesh(count){ //100万 卡顿 if(!coun
2021-07-26 14:40:41
2755
原创 Cesium.js 根据经纬度 获取高程信息
由api可知，通过sampleTerrain，可实现获取高程信息，如图同时，通过异步加载形式，获取return的数据function getHeigthByLngLat11(lng, lat ){ let positions = Cesium.Cartographic.fromDegrees(lng,lat);//经纬度转为世界坐标 //异步函数 return new Promise((resolve, reject)=>{ new Cesium
2021-07-21 20:35:05
2928
2
原创 threejs LOD
threejs中提供了LOD可实现根据与相机的distance，从而实现远处减面的操作通过addLevel ( object : Object3D, distance : Float )将不同精度的对象，add到lod中，distance为到摄像机的距离，具体方法如下const x=500; const y=500; const z=500; const geometry = [ [ new THREE.CylinderGeometry( R, R,30 ,30,30 ), 20
2021-07-15 19:05:55
1800
3
原创 threejs 添加几何模型
添加cube,若不添加纹理则将{map:texture }改为{color:0xffff00}function addTexCube(mesh){ let texture = new THREE.TextureLoader().load( mesh.url ); let geo=new THREE.CubeGeometry(mesh.data.width,mesh.data.height, mesh.data.long); let mat=new THREE.MeshLambertMateri
2021-07-05 17:09:43
484
原创 百度地图 图层
百度地图图层线轨迹图层 LineTripLayer 基础线图层SimpleLineLayer飞线图层 FlyLineLayer基础面图层 ShapeLayerThreejs图层 ThreeLayer波纹点 RippleLayer波纹点2D效果 RippleLayer波纹点3D效果 GroundRippleLayer图层在添加图层之前，需要先初始化图层管理器，从而将图层添加到图层管理器中初始化MapVGL容器对象，用来管理各可视化图层对象。var view = new mapvgl.View({
2021-06-04 17:29:56
2343
1
原创 threejs 裁剪
设置渲染器中的localClippingEnabled为true,即renderer.localClippingEnabled = true;//设置为可剪裁对于模型的material，如let material = new THREE.MeshLambertMaterial( { color: colorToHex(meshData.Color[0]), flatShading: THREE.SmoothShading, clippingPlan
2020-05-20 16:20:52
1527
1
原创 Three.js加载Json 拾取模型
js加载json文件window.onload = function (){ let url = "data/test.json"; let request = new XMLHttpRequest(); request.open("get", url);/*设置请求方法与路径*/ request.send(null);/*不发送数据到服务器*/ request.onload = function () {/*XHR对象获取到返回信息后执行*/ if (request.status =
2020-05-19 11:21:33
2583
原创 HTML5 canvas 实现图片的缩放与平移
定义所需要的变量var canvas=document.getElementById("myCanvas");var canvasDraw=canvas.getContext("2d");var startPointX=0;//起始点 xvar startPointY=0;//起始点 yvar imgX=0;//设置img在的位置var imgY=0;//var imgX1=0;...
2020-03-10 17:15:10
2842
2
原创 HTML5 canvas 动态绘制
HTML5 <canvas> 标签用于绘制图像，但<canvas> 元素本身并没有绘制能力，需使用脚本来完成实际的绘图任务。<canvas id="myCanvas" width="500" height="500" style="background: aliceblue;left:200px;top:200px;position: absolute;">...
2020-03-06 10:19:45
1137
原创 js实现div拖动
这里对于鼠标覆盖input时，使得拖动失效，因此通过对input绑定onmouseover事件，获取鼠标经过的标签 var inputName; boxid.onmouseover = function (event) { inputName = event.target.name;//鼠标每经过一个元素，就把该元素赋值给变量el }获取所需拖动的divva...
2019-12-23 12:01:04
183
1
原创 threejs动态加载div标签
divid为标签的id值，为了方便后续操作，htmlstr为需要添加的标签文本，position为标签的物体坐标function addLabel(divid,htmlstr,position) { var addDivDom = document.createElement('div'); div1 = addDivDom; var bodyDom = document...
2019-10-15 18:38:56
3740
5
原创 angular与TimelineMax实现进度条的动态加载（js）
这里进度条的样式采用bootstrap提供的进度条，定义进度条所需的数据，如：$scope.simulationProgressData = { width: 1, show: false, dayList: ‘’, left:50, };因进度条中含有多个不同的数据，因此将所需要显示的数据存入dayList，使用ng-repeat将dayList中所有的数据进行显示 <div ng-...
2019-10-15 09:50:39
683
1
原创 three.js实现obj模型爆炸
由于obj模型是一个有多个mesh组成的组，而不是mesh，因此通过改变obj模型中mesh即children的位置，可实现模型爆炸。通过在控制台输入console.log(model.children)查看，如图首先获取模型中心坐标，由于在设置模型的位置信息时，将模型的中心的设置为（0，0，0），因此这里直接获取（0，0，0）作为模型中心坐标。var modelWorldCenter=n...
2019-04-16 16:36:38
3977
3
原创 JavaScript 字符串操作
JavaScript中字符串常用的操作方法charAt（）：获取字符串索引值处的字符，索引值从0开始indexOf（）：返回指定字符第一次出现的索引值lastIndexOf（）：返回指定字符最后一次出现的索引值substring（）：根据索引值截取字符串，索引值只能为正数slice（）：同样用于截止字符串，且可为负数split（）：根据指定分隔符分割字符串replace（）：将字符串...
2019-04-15 15:27:08
1117
1
原创 threejs实现贴花效果
事件监听部分： window.addEventListener( 'resize', onWindowResize, false ); moved = false; orbitControls.addEventListener( 'change', function () {//鼠标移动？ moved = true; } ); window.addEventL...
2019-04-08 14:48:18
2282
1
原创 Three.js加载obj+mtl(OBJLoader2)
官方案例：添加链接描述方法实现：function addObjNew(objDef){//新版本写法 var objLoader = new THREE.OBJLoader2(); var callbackOnLoad = function ( event ) { model=event.detail.loaderRootNode;//获取模型 model.children.for...
2019-03-27 10:13:14
6936
5
原创 three.js 加载drc文件
将obj文件压缩成drc格式，可大大减小其大小。若已有编译好的draco_encoder.exe，可通过使用命令行压缩：draco_encoder.exe -i “文件路径名” -o “输出的文件路径名”。在加载drc文件时，需要借助DRACOLoader.js，且同一文件夹下需存在draco_decoder.js文件function addModeldrc(name){//加载drc文件 v...
2019-03-26 21:19:41
3397
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人