arcgis两点之间连线_three3D地图设置两点之间的连线
点:可以用THREE.Vector3D来表示
现在来看看怎么定义个点,假设有一个点x=4,y=8,z=9。你可以这样定义它:
var point1 = new THREE.Vecotr3(4,8,9);
另外你也可以使用set方法,代码如下:
var point1 = new THREE.Vector3();
point1.set(4,8,9);
1、首先,我们声明了一个几何体geometry,如下:
var geometry = new THREE.Geometry();
几何体里面有一个vertices变量,可以用来存放点。
2、定义一种线条的材质,使用THREE.LineBasicMaterial类型来定义,它接受一个集合作为参数,其原型如下:
LineBasicMaterial( parameters )
Parameters是一个定义材质外观的对象,它包含多个属性来定义材质,这些属性是:
Color:线条的颜色,用16进制来表示,默认的颜色是白色。
Linewidth:线条的宽度,默认时候1个单位宽度。
Linecap:线条两端的外观,默认是圆角端点,当线条较粗的时候才看得出效果,如果线条很细,那么你几乎看不出效果了。
Linejoin:两个线条的连接点处的外观,默认是“round”,表示圆角。
VertexColors:定义线条材质是否使用顶点颜色,这是一个boolean值。意思是,线条各部分的颜色会根据顶点的颜色来进行插值。
Fog:定义材质的颜色是否受全局雾效的影响。
我们这里使用了顶点颜色vertexColors: THREE.VertexColors,就是线条的颜色会根据顶点来计算。
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
3、接下来,定义两种颜色,分别表示线条两个端点的颜色,如下所示:
var color1 = new THREE.Color( 0x444444 ),
color2 = new THREE.Color( 0xFF0000 );
4、定义2个顶点的位置,并放到geometry中,代码如下:
var p1 = new THREE.Vector3( -100, 0, 100 );
var p2 = new THREE.Vector3( 100, 0, -100 );
geometry.vertices.push(p1);
geometry.vertices.push(p2);
5、为4中定义的2个顶点,设置不同的颜色,代码如下所示:
geometry.colors.push( color1, color2 );
geometry中colors表示顶点的颜色,必须材质中vertexColors等于THREE.VertexColors 时,颜色才有效,如果vertexColors等于THREE.NoColors时,颜色就没有效果了。那么就会去取材质中color的值,这个很重要,大家一定记住。
6、定义一条线
定义线条,使用THREE.Line类,代码如下所示:
var line = new THREE.Line( geometry, material, THREE.LinePieces );
第一个参数是几何体geometry,里面包含了2个顶点和顶点的颜色。第二个参数是线条的材质,或者是线条的属性,表示线条以哪种方式取色。第三个参数是一组点的连接方式,我们会在后面详细讲解。
然后,将这条线加入到场景中,代码如下:
scene.add(line);
个人代码如下:
Three框架
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 0;
camera.position.y = 1000;
camera.position.z = 0;
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
camera.lookAt({
x : 0,
y : 0,
z : 0
});
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
light.position.set(100, 100, 200);
scene.add(light);
}
var cube;
function initObject() {
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial( { vertexColors: true } );
var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
// 线的材质可以由2点的颜色决定
var p1 = new THREE.Vector3( -100, 0, 100 );
var p2 = new THREE.Vector3( 100, 0, -100 );
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.colors.push( color1, color2 );
var line = new THREE.Line( geometry, material, THREE.LinePieces );
scene.add(line);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}
arcgis两点之间连线_three3D地图设置两点之间的连线相关推荐
- Unity中判断地图上两点之间相对于正北方向的角度 c#实现
由于最近项目需要一些关于地理位置展示方面的需要,需要牵涉到地理位置方面与角度之间的计算.文章中参考了大神的代码,但是其是java代码实现的,无法在unity中直接使用.有兴趣的可以直接阅读原文http ...
- Java对接高德地图计算距离_高德地图计算两点之间的距离java+html
高德地图现在使用比较多了,但是高德地图计算两点之间的距离有些问题.下面提供一个很好的解决方案. 代码如下: /** * 两点的经纬度获取两点距离米 * @param (121.293986,37.27 ...
- JAVA利用数组求两点距离_利用java、js或mysql计算高德地图中两坐标之间的距离
利用java.js或mysql计算高德地图中两坐标之间的距离 2019-09-19 编程之家收集整理的这篇文章主要介绍了利用java.js或mysql计算高德地图中两坐标之间的距离,编程之家小编觉得挺 ...
- ArcGIS Pro从0到1入门实战教程 书籍淘宝线上销售,免费下载数据和视频
网址:https://m.tb.cn/h.USz9rbD?tk=cu0Vd2cABAV 购书后五星好评,加下面微信,截图发给我们:送Python电子书,下面是我们的微信 关注翎树文化,获得更多好书信息 ...
- 如何用ArcGIS出一张标准中国地图?常见误区有哪些?
GIS地图已经应用越来越广泛,无论是传统的城市规划行业,还是现在的智慧城市.政府系统,都经常能看到中国地图,但是要做一张正确的.标准的中国地图并不简单. 先上一张非常标准的地图案例. 一.地图区域完整 ...
- ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
- php 地图两点距离计算,计算地图上两点间的距离PHP类
计算地图上两点间的距离,使用的是谷歌地图 class GeoHelper { /** * @param int $lat1 * @param int $lon1 * @param int $lat2 ...
- (转) Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
- 国产CAD制图软件中怎么设置两点标注?
在使用浩辰CAD制图软件绘制图纸的过程中,有些时候会需要进行两点标注,那么今天我们来给大家价绍一下CAD如何设置标注中的两点标注功能,使用国产CAD制图软件--浩辰CAD建筑软件来操作就很简单的哦!一 ...
- PCB设计之线宽、线距规则设置
1.阻抗的信号线 应该按照叠层计算出来的线宽.线距来设置. 比如射频信号(常规50R控制).重要单端50R.差分90R.差分100R等信号线,通过叠层可计算出具体的线宽线距(下图所示). 2.一般线宽 ...
最新文章
- 公基考计算机知识吗,2021河北唐山事业单位公基备考知识:计算机常识
- PCL谢谢笔记 体素栅格滤波(下采样)
- Sqlite表的结构修改
- 六十一、分析Springboot中的项目结构介绍
- Visual Studio 2008 Windows Server 2008 预发布-20日在南宁
- 有些人可能也在哪见过这样的HTML5效果
- 苹果html阅读器,设置Safari 10.0.2阅读器Reader字体
- leetcode力扣78. 子集
- 安装idea(最新版IntelliJ IDEA)编译器(详细到每步)
- 2019互联网+直播平台开发如何发展?
- 信用评分模型详解(下)之 信用评分系统搭建
- html iframe显示不全,滚动的iframe解决,但在iframe页面显示不全
- 20190422每周精品之认知
- http://nianjian.xiaze.com/tags.php?/%E6%BD%BC%E5%85%B3%E5%B9%B4%E9%89%B4/1/13595315666/
- 【c#基础-MessageBox】MessageBox的使用和消息框
- JS输入框检验字符数(中文为2个字符,英文为1个字符)
- 【MD5】校验下载文件完整性
- 计划FM为人人网提供首个开源Ruby SDK
- 微信小程序案例学习笔记
- 威纶通触摸屏宏指令GetData和SetData函数的使用方法示例
热门文章
- solidworks钣金件设计术语creo/ug适用
- android手机主流屏幕大小,如何选择适合自己的手机屏幕大小 屏幕大小选择标准【详解】...
- php自动盖章,印章自动生成器?
- STM32官方编程IDE及烧录软件介绍
- 火星坐标系转北京54坐标方法
- 名老中医经验继承研究现状及“中医处方智能分析系统”应用前景
- android系统b181更新包,华为nova 2s官方固件rom刷机包_华为nova2s完整系统升级包
- C语言——(乘法口诀表)
- IGBTMOS管的工作原理及检测方法
- matlab多行注释快捷键。