初探three.js几何体
今天说说three.js的几何体,常见的几何体今天就不说了,今天说一说如何画直线,圆弧线,以及高级几何体。
1. 画一条直线
画直线我们使用THREE.Geometry()对象。
//给空白几何体添加点信息,geometry会把这些点自动组合成线。
var material = new THREE.LineBasicMaterial({color: 0x00ff00});
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0,0,0));
geometry.vertices.push(new THREE.Vector3(10,10,10));
geometry.vertices.push(new THREE.Vector3(0,20,0));
var line = new THREE.Line(geometry, material);
这样就在空间画出了一条折线。
2.画一条圆弧线
画圆弧线我们借助THREE.ArcCurve()对象。这个对象有点类似于d3.js中的布局(layout),它的本质就是根据参数生成一系列点坐标,他有一些方法.getPoints()从圆弧线均匀获得圆弧上面点的坐标。下面是THREE.ArcCurve()的部分源码。
THREE.ArcCurve = function ( aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise ) { THREE.EllipseCurve.call( this, aX, aY, aRadius, aRadius, aStartAngle, aEndAngle, aClockwise ); };
我们可以知道有6个参数,并且继承自THREE.EllipseCurve()。加下来我们来画圆弧。
var arc = new THREE.ArcCurve(0, 0, 30, 0, Math.PI * 2, true);
var points = arc.getPoints(1000);
var ring = new THREE.Geometry();
points.forEach(v => ring.vertices.push(new THREE.Vector3(v.x,0,v.y)));
var mat = new THREE.LineBasicMaterial({color: 0x999900});
var line = new THREE.LineLoop(ring, mat);
注意points都是XY平面上面的点。最后使用THREE.LineLoop来绘制圆弧线。
3. 使用ConvexGeometry()凸包
什么是凸包?简单地说凸包就是,在空间中每三个不在一条直线的点都可以组成一个平面,如果空间中有一组点,那么会组成很多平面,如果平面不透明,我们只能看到最外层的若干个面,这个面组成的几个体就是凸包。
like this !(这个只是加了岩石纹理)
凸包使用起来非常简单
let asteroidMate = new THREE.MeshBasicMaterial();
let points = [];
let rad = Math.pow(Math.random(), 3) * ASTERIODRADIUS;
for(var j=0; j<30; j++) {
points.push(new THREE.Vector3(Math.random() * 10, Math.random() * 10, Math.random() * 10))
}
var asteroidGeom = new THREE.ConvexGeometry(points); var asterMesh = new THREE.Mesh(asteroidGeom, asteroidMate);
这就是30个点组成的随机凸包。大家可以试试用它来自定义图形或者制作随机图形。
4. LatheGeometry() 旋转体
旋转体就是将由一组点组成的线绕固定轴旋转形成的几何体,LatheGeometry有4个参数,第一个是points点数组,第二个是分段数,第三个是旋转开始角度,第四个是旋转角度。
ar points = [];
for(var i=-12; i<=10; i = i + 0.5) {
if(i < 0) {
console.log(Math.sqrt(36 - Math.pow(i + 6, 2)) * 1.2, i)
points.push(new THREE.Vector3(Math.sqrt(36 - Math.pow(i + 6, 2)) * 1.2, i))
} else if(i < 8 && i >= 0) {
console.log(Math.sqrt(16 - Math.pow(i - 4, 2)) * 1.2, i)
points.push(new THREE.Vector3(Math.sqrt(16 - Math.pow(i - 4, 2)) * 1.2, i))
} else {
console.log(Math.sqrt(1 - Math.pow(i - 9, 2)) * 1.2, i)
points.push(new THREE.Vector3(Math.sqrt(1 - Math.pow(i - 9, 2)) * 1.2, i))
}
}
var latheGeo = new THREE.LatheGeometry(points, 30, 0, Math.PI * 2);
latheMesh = createMesh(latheGeo);;
5. ExtrudeGeometry()拉伸几何体
拉伸几何体就是将一个几何体沿着Z轴拉伸形成的几何体。它的参数比较多但是不难理解。
var material = new THREE.MeshNormalMaterial();
var shapeGeomery = new THREE.Shape();
shape.moveTo(-10, -10);
shape.lineTo(10, -10);
shape.lineTo(10, 10);
shape.lineTo(-10,10);
shape.lineTo(-10, -10);
var geometry = new THREE.ExtrudeGeometry(shapeGeomery, {
amount: 2, //拉伸的深度
bevelThickness: 2, //斜角的深度
bevelSize: 3, //斜角的高度
bevelSegments: 30, //斜角分段数
bevelEnabled: true, //开启斜角
curveSegments: 12, //拉伸的段数
steps: 1 //沿深度方向的段数
})
var shape = new THREE.Mesh(geometry, material);
这里注意几点,
1.ExtrudeGeometry()的第一个参数是一个shape对象,
2.区分一下这三个分段数,bevelSegments是斜角的分段,它影响斜角的光滑程度,curveSegments是拉伸曲线的段数,steps是沿深度方向的段数。
6.TubeGeometry()沿曲线拉伸
这个方法很简单,就是验证曲线拉伸成一根管,简单的东西直接上代码
var points = [];
for (var i = 0; i < controls.numberOfPoints; i++) {
var randomX = -20 + Math.round(Math.random() * 50);
var randomY = -15 + Math.round(Math.random() * 40);
var randomZ = -20 + Math.round(Math.random() * 40); points.push(new THREE.Vector3(randomX, randomY, randomZ));
}
var tubeGeometry = new THREE.TubeGeometry(new THREE.SplineCurve3(points), 64, 3, 16, false);
var meshMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, opacity: 0.2});
var tubeMesh = new THREE.Mesh(tubeGeometry, meshMaterial)
这里只需注意TubeGeometry()的第一个参数是一个SplineCurve3对象,需要将三维点数组用SplineCurve3处理成三维曲线。
7.ParametricGeometry()基于等式的几何体
这个东西类似于高数中的参数方程,通过三阶等式来创建空间曲面,使用ParametricGeometry()的时候,我特意使用了v69版本和v104两个版本,使用方法是不同的。下面我们从代码中寻找区别。
// v69
var oldVersion = function (u, v) {
var x = u * 50 - 25;
var z = v * 50 - 25;
var y = Math.sin(u * 50 - 25) + Math.sin(v * 50 - 25) + Math.pow((Math.pow((u - 0.5), 2) + Math.pow((v - 0.5), 2)) * 10, 2) - 10;
return new THREE.Vector3(x, y, z);
};
var geometry = new THREE.ParametricGeometry(oldVersion, 120, 120)
var newVersion = function (u, v, target) {
var x = u * 50 - 25;
var z = v * 50 - 25;
var y = Math.sin(u * 50 - 25) + Math.sin(v * 50 - 25) + Math.pow((Math.pow((u - 0.5), 2) + Math.pow((v - 0.5), 2)) * 10, 2) - 10;
target.set(x,y,z);
};
var geometry = new THREE.ParametricGeometry(newVersion, 120, 120)
可以看出方法中传递了第三个参数,这里使用set方法做了优化,(所以说每当出现新的js标准后,都出新生一些框架或者出现新版本)。相信喜欢数学的小伙伴都会非常喜欢这个几何体。下面随便展示一个demo
### 8. 组合网格
未完待续。。。(这将是一个非常有意思的几何体)
### 9. Geometry()实现自定义面
未完待续。。。(同样可以很发散)
更多demo请移步至原文
转载请注明原文地址 http://www.bettersmile.cn 郭志强的博客
初探three.js几何体的更多相关文章
- 初探three.js几何体-Geometry
three.js几何体我们还没有说完,这一节我们说一说THREE.Geometry(),简单几何体都是继承了这个对象,使用它会相对麻烦一些,但是可操作性非常高,今天我们使用它制作一个自定义几何体-五角 ...
- 初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
- 初探three.js
相信大多数选择前端的小伙伴都有一个设计师的梦,今天我来说一说three.js.three.js是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.学习了 ...
- three.js 几何体(二)
上一篇简单的介绍了几何体的构造体参数,这一篇郭先生就更加详细的说一说(十分简单的几何体我就不说了). 1. ShapeGeometry形状几何体 形状几何体方便我们从一个或多个路径形状中创建一个单面多 ...
- 初探 Ext JS 6 (sencha touch/ext升级版)
Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...
- 初探grunt.js
package.js { "name": "ttd_v3", "version": "0.1.0", "aut ...
- 初探flow.js
第一部分:前言 我们知道JS是弱类型语言,在声明变量时不论是什么类型的变量我们都用var即可,所以js是非常灵活的,但是同时问题就是弱类型语言有可能会出错,比如在调用函数时,且往往在运行起来时才可以检 ...
- 前端初学者——初探Modernizr.js Modernizr.js笔记
什么是Modernizr? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...
- 初探node.js
一.定义及优势 定义:Node.js是一个基于 Chrome V8 引擎 的 JavaScript 运行时,它以事件驱动为基础实现了非阻塞模型. 优势:由于Web场景下的大多数任务(静态资源读取.数据 ...
随机推荐
- 力扣(LeetCode)二进制间距 个人题解
输入:6 输出:1 解释: 6 的二进制是 0b110 . 示例 4: 输入:8 输出:0 解释: 8 的二进制是 0b1000 . 在 8 的二进制表示中没有连续的 1,所以返回 0 . 提示: 1 ...
- react-router重定向
① ②通过this.props重定向
- java的Io流机制的学习
IO流机制 File类的使用 File类的构造方法 File(URI uri) File(String pathname) File(File parent, String child) File(S ...
- 树莓派4B安装netcore
准备材料 SDFormatter.exe ---格式化SD卡,空的SD就可以不用了 2019-09-26-raspbian-buster.img ---下载好树莓派系统镜像 win32diskimag ...
- Linux安装redis数据库
这几天在搞redis数据库,花了好大功夫,才成功安装在Linux上,这里将自己的安装步骤分享出来,同时也做个记录,备忘. 新人一枚,不对之处,请多指教! 首先登陆Linux服务器 Linux里,我习惯 ...
- 【2018寒假集训 Day2】【2019.5.11更新】【动态规划】花店橱窗布置(FLOWER)
花店橱窗布置(FLOWER) 提交文件名:flower 问题描述: 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序编号, ...
- sublime插件开发教程2
直接进入正题 先新建个chajian.py python写起 import sublime import sublime_plugin class ExampleCommand(sublime_plu ...
- C#笔记01——注释、进制、基本数据类型、量和输入输出函数
一.注释 1.单行注释 使用方法:行首加 ” //“: VS2019中的快捷键(以后如果不特加说明都是VS2019): 注释(CTRL+E,C): 取消注释(CTRL+E,U): 2.多行注释 使用方 ...
- word2vec:CBOW和skip-gram模型
1.CBOW模型 之前已经解释过,无论是CBOW模型还是skip-gram模型,都是以Huffman树作为基础的.值得注意的是,Huffman树中非叶节点存储的中间向量的初始化值是零向量,而叶节点对应 ...
- Linux三个比较特殊的权限
Linux还有三个比较特殊的权限,分别是:setuid,setgid,stick bit . -:表示一般文件 d:表示目录文件 l:表示链接文件 b:表示块设备 c:表示字符设备 p:表示管道 s: ...