点：可以用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. JavaWeb-入门第一课-1.静态web动态web 2.web服务器 3.下载和安装Tomcat-web服务器

    文章来源:http://www.cnblogs.com/xdp-gacl/p/3729033.html 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思 静态web资源(如html ...

  2. 用zcat查看压缩日志中百度抓取的量

    比如查看124.251.44.85这一台服务器的07-13,07-14,07-15的日志中百度抓取http://www.baidu.com/search/spider.html 的量 wc命令参考博客 ...

  3. SpringMVC请求参数注解两个小问题

    今天遇到使用SpringMVC请求注解遇到的两个小问题: 如果用@requestBody注解,则请求体内容类型一般要为application/json,如果其类型为multipart/form-dat ...

  4. tomcat catalina.out切割脚本

    shell脚本catalina.out 切割脚本...每天23.30切割.删除七天之前的日志这里3个tomcat实例(1)拷贝日志文件(2)清空日志文件*只能清空如果删除tomcat不重启不会生成新的 ...

  5. HBase的Scan

    HBase的Scan和Get不同,前者获取数据是串行,后者则是并行:是不是有种大跌眼镜的感觉? Scan有四种模式:scan,(Table)snapScan,(Table)scanMR,snapsho ...

  6. angularjs 本地数据存储LocalStorage

    1.定义服务 //=========本地存储数据服务============ app.factory('locals', ['$window', function ($window) { return ...

  7. java编码-多重（乱码）

    一.1,UTF编码 - 2,ISO解码 - 3,UTF编码 - 4,ISO解码 String ISO = "ISO-8859-1"; String UTF = "UTF- ...

  8. 开启postgresql的远程权限

    cd /etc/postxxxx/版本号/main vim postgresql.conf 修改 #listen_addresses ='localhost'为 listen_addresses =' ...

  9. 淘宝用户api 如何获得App Key和API Secret

    下面我们通过截图的方式详细说明申请淘宝应用的步骤. 一.访问淘宝开放平台http://open.taobao.com/ 申请成为合作伙伴 二.填写个人信息申请入住 三.点击创建应用 四.填写应用名称, ...

  10. BASIC-17_蓝桥杯_矩阵乘法

    示例代码: #include <stdio.h>#define N 30 int main(void){ int n = 0 , m = 0 , sum = 0; int i = 0 , ...