点：可以用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. （4）对象的的初始化与__init__方法以及绑定方法

    class OldboyStudent: # name='xxxx' # 相似的特征: school = 'oldboy' # 相似的技能 def choose_course(self): print ...

  2. 【问题】PPS、PPSX自动放映格式打开直接进入编辑模式

    在做自动放映格式的PPT的时候,发现另存为PPS或PPSX格式后,自动放映无法实现,而是直接进入了PPT编辑模式,于是开始寻找原因.发现是文件关联有问题,这与安装多个版本的ppt有关系. 解决办法: ...

  3. getParameter、getParameterValues、getParameterMap用法详解

    首先request中的参数parameter是一个map表,如下例 map={username=[xxx],password=[xxx],hobby=[eat,drink]} (1)当调用getPar ...

  4. pandas 基础用法

    pandas 是一个基于 Numpy 构建, 强大的数据分析工具包 主要功能 独特的数据结构 DataFrame, Series 集成时间序列功能 提供丰富的数学运算操作 灵活处理缺失数据 Serie ...

  5. MySQL Disk--SSD与RAID

    ===================================================SSD与RAID 51.在RAID 5这类Parity-RAID上存在partial-stripe ...

  6. MySQL删除超大表操作

    ======================================================================== 问题原因 通常情况下,会使用innodb_file_p ...

  7. 比jsonpath 更方便的json 数据查询JMESPath 使用

      类似xml 的xpath json 有jsonpath 都是为了方便进行数据查询,但是jsonpath 的功能 并不是很强大,如果为了方便查询可以使用jmespath. 以下为简单使用: 查询格式 ...

  8. TNS-12535 TNS-00505的处理方法

    原文地址:TNS-12535 TNS-00505的处理方法 作者:wzq609 硬件说明: 操作系统版本:ORACLE LINUX 6.3  64位 数据库版本:11.2.0.3   64位 问题说明 ...

  9. es6 中，大多数开发者和 babel 之类的工具默认添加 use strict 到 JS 文件的头部，确保采用严格模式

    严格模式(use strict) 有助于防止问题用法,并且它也有助于安全使用 JavaScript. 在 ES5 中, 严格模式是可选项,但是在 ES6 中,许多特性要求必须使用严格模式. 因此大多数 ...

  10. C#调用Python脚本的简单示例

    C#调用Python脚本的简单示例 分类:Python (2311)  (0)  举报  收藏 IronPython是一种在 .NET及 Mono上的 Python实现,由微软的 Jim Huguni ...