点：可以用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);
个人代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/Three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}

</style>
<script>
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);
}

</script>
</head>

<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>

three3D地图设置两点之间的连线的更多相关文章

  1. c++ 算法 栅格中两点之间连线

    屏幕划线,通过平面坐标系实现,基本组成是一个一个的点,起点为A,终点为B 本文的算法,可以实现平面栅格中,指定的A,B两点之间进行连线(代码中仅打印了两点间需要画出的坐标点) #include < ...

  2. (转）c# math 计算两点之间的角度公式

    计算两点之间的角度公式是: 假设点一(X1,Y1),点二(X2,Y2) double angleOfLine = Math.Atan2((Y2 - Y1), (X2 - X2)) * 180 / Ma ...

  3. three3D地图

    终于闲下来了,前段时间做了个项目,高精度精准定位系统,用到了three3D地图 听起来是不是很炫酷?其实并不难.先把部分代码附上(文件比较多,只粘贴部分的) $(function () {     i ...

  4. Python计算地图上两点经纬度间的距离

    处理地图数据时,经常需要用到两个地理位置间的距离.比如A点经纬度(110.0123, 23.32435),B点经纬度(129.1344,25.5465),求AB两点之间的距离.我们可以用haversi ...

  5. js通过经纬度计算两点之间的距离

    最近这几天在做地图的时候,获取到目的地经纬度和当前所在位置的经纬度,通过这几个参数,用js代码就能获取到这两点之间的直线距离: function (lat1, lng1, lat2, lng2) { ...

  6. sql server2008根据经纬度计算两点之间的距离

    --通过经纬度计算两点之间的距离 create FUNCTION [dbo].[fnGetDistanceNew] --LatBegin 开始经度 --LngBegin 开始维度 --29.49029 ...

  7. C#面向对象思想计算两点之间距离

    题目为计算两点之间距离. 面向过程的思维方式,两点的横坐标之差,纵坐标之差,平方求和,再开跟,得到两点之间距离. using System; using System.Collections.Gene ...

  8. 2D和3D空间中计算两点之间的距离

    自己在做游戏的忘记了Unity帮我们提供计算两点之间的距离,在百度搜索了下. 原来有一个公式自己就写了一个方法O(∩_∩)O~,到僵尸到达某一个点之后就向另一个奔跑过去 /// <summary ...

  9. Floyd算法——计算图中任意两点之间的最短路径

    百度百科定义:传送门 一.floyd算法 说实话这个算法是用来求多源最短路径的算法. 算法原理: 1,从任意一条单边路径开始.所有两点之间的距离是边的权,如果两点之间没有边相连,则权为无穷大. 2,对 ...

随机推荐

  1. VLOOKUP函数的使用方法

    VLOOKUP(lookup_value,table_array,col_index_num,range_lookup) lookup_value:为在查找范围的第一列中要查找的值.比如下图的 C2 ...

  2. WinHex简介

    WinHex是一个专门用来对付各种日常紧急情况的小工具.它可以用来检查和修复各种文件.恢复删除文件.硬盘损坏造成的数据丢失等.同时它还可以让你看到其他程序隐藏起来的文件和数据.得到 ZDNetSoft ...

  3. Thinkphp分页类使用

    3.2.2分页设置变化: $count = $pro->count(); //查询出总条数 $page=new \Think\Page($count,5); $page->rollPage ...

  4. css中display为none 和visibility为hidden的区别

    区别一: display:none Turns off the display of an element (it has no effect on layout);  all child eleme ...

  5. gitlab怎么删除创建的项目

    在gitlab新建了一个项目,怎么将此项目删除呢?打开这个工程,点击右上角的“settings”拉到最下面,有个show them to me,点击~在下拉选项的最后,有个remove框,点击即可以彻 ...

  6. POJ3585 Accumulation Degree(二次扫描与换根法)

    题目:http://poj.org/problem?id=3585 很容易想出暴力.那么就先扫一遍. 然后得到了指定一个根后每个点的子树值. 怎么转化利用一下呢?要是能找出当前点的父亲的 “ 不含当前 ...

  7. 49个你应该了解的Android Studio技巧、插件与资源 http://www.apkbus.com/blog-822721-72630.html (出处: 安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户)

    49个你应该了解的Android Studio技巧.插件与资源http://www.apkbus.com/blog-822721-72630.html(出处: 安卓巴士 - 安卓开发 - Androi ...

  8. View绘制基本知识点

    !通过阅读Android开发艺术探索整理   底层工作原理:测量流程.布局流程.绘制流程   常见回调方法:构造方法 onAttach onVisiblityChanged onDetach   Vi ...

  9. ML(3.2): NavieBayes R_kalR

    ML3.1 介绍e1071包实施朴素贝叶斯分类的函数,本例使用klaR包中的NaiveBayes函数,因为该函数较之前者增加了两个功能,一个是可以输入先验概率,另一个是在正态分布基础上增加了核平滑密度 ...

  10. [UE4]组件

    用来组成Actor的子对象,Actor是由组件组成的. 几个关键的Component类型: 一.UActorComponent 这个Component的基类,可以被放到Actor里面, 可以接受Tic ...