所有的三位物体都是由点构成,两点构成线,三点构成面,ThreeJs又如何绘制出点、线、面呢 ?

在ThreeJs中:

  • 模型由几何体和材质构成
  • 模型以何种形式(点、线、面)展示取决于渲染方式

1. 几何体

首先我们来创建一个自定义的几何体

var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
THREE.Geometry是所有几何体的基类,它有几个重要的属性:
  • vertices : 数组,保存该几何体下所有顶点(Vector3对象)
  • colors : 数组,保存该几何体下所有顶点的颜色信息(Color对象)
  • faces : 数组,保存该几何体下所有面信息(Face3对象)

此时该几何体为空,我们需要创建一些点,然后绑定到该几何体

var p1 = new THREE.Vector3( 0, 0, 0 );
var p2 = new THREE.Vector3( 50, 0, 50 );
var p3 = new THREE.Vector3( 50, 50, 50 );
var p4 = new THREE.Vector3( 0, 50, 0 );
//绑定顶点到几何体
geometry.vertices.push(p1, p2, p3, p4);
//如果需要每个点展示不同颜色,需要给每个顶点添加颜色,也可以通过材质设置统一颜色
geometry.colors = [
new THREE.Color( 0xFF0000 ),
new THREE.Color( 0x00FF00 ),
new THREE.Color( 0x0000FF ),
new THREE.Color( 0xFFFF00 )
];

这里创建了一个几何体,接下来我们把他以点的形式渲染到页面上

    //如果以点的形式渲染,需要设置点对应材质
var pointMaterial = new THREE.PointsMaterial({
color: 0xFFFFFF, //设置颜色,默认 0xFFFFFF
vertexColors: true, //定义材料是否使用顶点颜色,默认false ---如果该选项设置为true,则color属性失效
size: 5 //定义粒子的大小。默认为1.0
});
//生成点模型
var points = new THREE.Points(geometry, pointMaterial);
//将模型添加到场景
scene.add(points);

接下来我们创建一个线模型

    //如果以线的形式渲染,需要设置线材质
var lineMaterial = new THREE.LineBasicMaterial({
color: 0xFFFFFF, //设置颜色,默认 0xFFFFFF
vertexColors: true, //设置为true线条会以两点颜色渐变 ---如果该选项设置为true,则color属性失效
linewidth: 5, //线宽,window下不生效
}); var line = new THREE.Line(geometry, lineMaterial);
scene.add(line);

再来创建一个网格(面)模型

    //创建一个面,参数为几何体顶点的索引
var face1 = new THREE.Face3( 0, 1, 2 );
//设置这个面的法向量
face1.normal = new THREE.Vector3( 0, 0, -1 );
//设置各个顶点对应颜色
face1.vertexColors = [
new THREE.Color(0xFF0000),
new THREE.Color(0x00FF00),
new THREE.Color(0x0000FF),
];
geometry.faces.push(face1);
//设置网格材质,这里设置为Lambert材质为一种不发光材质
var meshMaterial = new THREE.MeshLambertMaterial({
vertexColors : THREE.VertexColors,
side: THREE.DoubleSide
}); var mesh = new THREE.Mesh(geometry, meshMaterial);
scene.add(mesh);

可以看出以网格形式渲染需要先创建Face3对象,这是因为我们几何体的每个面都有其对应的法向量,即设置以哪个角度反射光线

Face3对象对应的属性

  • a,b,c : 对应三角面的三个点(Vector3对象)
  • color :颜色
  • normal :该三角面的法向量(Vector3对象)
  • vertexColors : 设置三角面三个点对应的法向量(Vector3对象数组),通常一个面都有一个统一的法向量,即设置 normal 即可

以上是我们创建自定义模型的基本操作,ThreeJs为我们提供了很多自带的模型,我们只需要调用API即可创建

等等....

ThreeJs 绘制点、线、面的更多相关文章

  1. 【带着canvas去流浪(5)】绘制K线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

  2. CAD交互绘制样条线(网页版)

    在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::SendStringToExecuteFun 把命令当着函数执行,可以传参数.详细说明如 ...

  3. CAD交互绘制样条线(com接口)

    在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::SendStringToExecuteFun 把命令当着函数执行,可以传参数.详细说明如 ...

  4. CAD参数绘制样条线(com接口)

    在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::PathLineTo 把路径下一个点移到指定位置.详细说明如下: 参数 说明 DOUBL ...

  5. CAD参数绘制样条线(网页版)

    在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::PathLineTo 把路径下一个点移到指定位置.详细说明如下: 参数 说明 DOUBL ...

  6. CAD动态绘制样条线(网页版)

    在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::SendStringToExecuteFun 把命令当着函数执行,可以传参数.详细说明如 ...

  7. 带着canvas去流浪系列之五 绘制K线图

    [摘要] 用canvas原生API实现百度Echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  8. 用Python爬取股票数据,绘制K线和均线并用机器学习预测股价(来自我出的书)

    最近我出了一本书,<基于股票大数据分析的Python入门实战 视频教学版>,京东链接:https://item.jd.com/69241653952.html,在其中用股票范例讲述Pyth ...

  9. 使用Python的pandas模块、mplfinance模块、matplotlib模块绘制K线图

    目录 pandas模块.mplfinance模块和matplotlib模块介绍 pandas模块 mplfinance模块和matplotlib模块 安装mplfinance模块.pandas模块和m ...

  10. mapboxgl绘制3D线

    最近遇到个需求,使用mapboxgl绘制行政区划图层,要求把行政区划拔高做出立体效果,以便突出显示. 拿到这个需求后,感觉很简单呀,只需要用fill-extrusion方式绘制就可以啦,实现出来是这个 ...

随机推荐

  1. 经典问题----最短路径(Floyd弗洛伊德算法)(HDU2066)

    问题简介: 给定T条路,S个起点,D个终点,求最短的起点到终点的距离. 思路简介: 弗洛伊德算法即先以a作为中转点,再以a.b作为中转点,直到所有的点都做过中转点,求得所有点到其他点的最短路径,Flo ...

  2. cordova插件新的窗口实例打开连接: cordova-plugin-inappbrowser

    1. 添加插件:cordova plugin add cordova-plugin-inappbrowser  : 2. InAppBrowser可以使用新的窗口实例打开连接,提供了地址栏的显示隐藏, ...

  3. return,break,continue三者区别

    详解:http://www.cnblogs.com/yangdabao/p/6172210.html return:直接结束这个方法,后面所有代码不再执行,不管循坏外,还是循环内,全部停止,直接返回 ...

  4. 获取spring容器对象方法和原因

    为什么要获取Spring容器对象:拿到spring容器对象后,你就可以用spring管理的bean了,拿到bean,自然可以使用bean的方法,场景:比如jsp页面.通过注解是无法注入bean的,在开 ...

  5. 创建一个dynamics 365 CRM online plugin (四) - PreValidation

    开始之前,我们要确认一下 Plugin 的 pipeline. PreValidation -> PreOperation -> Server Side System Main Event ...

  6. Java泛型相关总结(下)

    约束与局限性 不能用基本类型实例化类型参数 不能像Pair<double>这样调用,只能Pair<Double>,原因是类型擦除 运行时类型查询只使用于原始类型 虚拟机中的对象 ...

  7. 目标文件obj的各段 2

    #程序的自我修养  page68

  8. Oauth2手册 第一章

    来源:https://github.com/jeansfish/RFC6749.zh-cn/blob/master/SUMMARY.md 1. 简介在传统的客户端-服务器身份验证模式中,客户端请求服务 ...

  9. [ZZ] 边缘检测 梯度与Roberts、Prewitt、Sobel、Lapacian算子

    http://blog.csdn.net/swj110119/article/details/51777422 一.学习心得: 学习图像处理的过程中,刚开始遇到图像梯度和一些算子的概念,这两者到底是什 ...

  10. 黑电平校正BLC

    参考:https://www.cnblogs.com/zhangAlin/p/10661763.html