初探three.js几何体-Geometry
three.js几何体我们还没有说完,这一节我们说一说THREE.Geometry(),简单几何体都是继承了这个对象,使用它会相对麻烦一些,但是可操作性非常高,今天我们使用它制作一个自定义几何体-五角星,我们先开看一下效果。mode请移步至 郭志强的博客
Geometry对象有两个比较重要的属性
1. vertices对象,他保存几何体所有点信息,是一个三维点数组
2. faces对象,他保存所有面信息,是一个THREE.Face3数组
所以我们先创建组成五角星的点,然后添加到vertices对象中。
let points = [];
points.push(new THREE.Vector3(0, 0, gui.thickness))
points.push(new THREE.Vector3(0, 0, - gui.thickness))
for(let i=0; i<5; i++) {
points.push(new THREE.Vector3(Math.sin(Math.PI * 2 / 5 * i) * gui.size_long, Math.cos(Math.PI * 2 / 5 * i) * gui.size_long, 0))
points.push(new THREE.Vector3(Math.sin(Math.PI * 2 / 5 * i + Math.PI * 2 / 10) * gui.size_short, Math.cos(Math.PI * 2 / 5 * i + Math.PI * 2 / 10) * gui.size_short, 0))
}
geometry.vertices = points;
点加完了,我们开说一说面,在three.js中,一个面是由三个点组成(新版本要求必须为3个点),但是由于点的排列顺序有顺时针和逆时针两种,我们想要看到面,就需要让三个点沿逆时针排序,下面来创建点。
geometry.faces.push(new THREE.Face3(0, 3, 2));
geometry.faces.push(new THREE.Face3(0, 4, 3));
geometry.faces.push(new THREE.Face3(0, 5, 4));
geometry.faces.push(new THREE.Face3(0, 6, 5));
geometry.faces.push(new THREE.Face3(0, 7, 6));
geometry.faces.push(new THREE.Face3(0, 8, 7));
geometry.faces.push(new THREE.Face3(0, 9, 8));
geometry.faces.push(new THREE.Face3(0, 10, 9));
geometry.faces.push(new THREE.Face3(0, 11, 10));
geometry.faces.push(new THREE.Face3(0, 2, 11));
geometry.faces.push(new THREE.Face3(1, 2, 3));
geometry.faces.push(new THREE.Face3(1, 3, 4));
geometry.faces.push(new THREE.Face3(1, 4, 5));
geometry.faces.push(new THREE.Face3(1, 5, 6));
geometry.faces.push(new THREE.Face3(1, 6, 7));
geometry.faces.push(new THREE.Face3(1, 7, 8));
geometry.faces.push(new THREE.Face3(1, 8, 9));
geometry.faces.push(new THREE.Face3(1, 9, 10));
geometry.faces.push(new THREE.Face3(1, 10, 11));
geometry.faces.push(new THREE.Face3(1, 11, 2));
geometry.faces.forEach((d,i) => geometry.faces[i].materialIndex = i % 2)
geometry.computeFaceNormals();
一共有20个面,倒数第二行我们为faces中数组的每一项设置materialIndex值,稍后我们在说。最后一行是重新计算面的法向量。
最后我们为每一个面个性化材质。
let mate1 = new THREE.MeshBasicMaterial({color: 0xffaa00})
let mate2 = new THREE.MeshBasicMaterial({color: 0x00ff00})
var faceMaterial = new THREE.MeshFaceMaterial([mate1, mate2]);
mesh = new THREE.Mesh(geometry, faceMaterial);
这里说到了THREE.MeshFaceMaterial对象,它允许我们为不同的面设置材质,它会对应geometry.faces数组中每一项的materialIndex值,由于我们把奇数项的materialIndex设置成了0,偶数项设置成了1,所以五角星的面形成了交替颜色。
今天就先说这么多,下一节说一说二维操作网格。
转载请注明原文地址 https://www.cnblogs.com/vadim-web/p/12106006.html
初探three.js几何体-Geometry的更多相关文章
- 初探three.js几何体
今天说说three.js的几何体,常见的几何体今天就不说了,今天说一说如何画直线,圆弧线,以及高级几何体. 1. 画一条直线 画直线我们使用THREE.Geometry()对象. //给空白几何体添加 ...
- 初探three.js
相信大多数选择前端的小伙伴都有一个设计师的梦,今天我来说一说three.js.three.js是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.学习了 ...
- 初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
- three.js 几何体(二)
上一篇简单的介绍了几何体的构造体参数,这一篇郭先生就更加详细的说一说(十分简单的几何体我就不说了). 1. ShapeGeometry形状几何体 形状几何体方便我们从一个或多个路径形状中创建一个单面多 ...
- 材质(Material)和几何体(Geometry)
1. 材质 一个材质结合一个几何体可以组成一个mesh对象.材质就像物体的皮肤,决定了几何体的外表.例如:皮肤定义了一个几何体看起来是否像金属.透明与否,或者显示为线框. 基本的材质如下: 1. ...
- three.js 几何体(三)
上一篇介绍了几何体的构造体参数,这篇郭先生就接着上一篇说. 1. ExtrudeGeometry挤压几何体 挤压几何体允许我们从一条形状路径中,挤压出一个Geometry.ExtrudeGeometr ...
- 初探 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是非常灵活的,但是同时问题就是弱类型语言有可能会出错,比如在调用函数时,且往往在运行起来时才可以检 ...
随机推荐
- 优酷1080p的kux格式文件转码
@echo off for /r . %%i in (*.kux) do ( "C:\Program Files (x86)\YouKu\YoukuClient\nplayer\ffmpeg ...
- css 单位之px , em , rem
px : Pixel像素单位.像素是相对显示器分辨率而言.em : 相对长度单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px).rem : 相对单 ...
- 2 request的get和post方法
requests的get方法 1 在百度里面查询关键字的方法,并获取带百度当前页面 import requests keywords = input('请输入>>>').strip( ...
- Python3标准库:string通用字符串操作
1. string:通用字符串操作 string模块在很早的Python版本中就有了.以前这个模块中提供的很多函数已经移植为str对象的方法,不过这个模块仍保留了很多有用的常量和类来处理str对象. ...
- jar包和war包的介绍和区别(转载)
来源:https://www.jianshu.com/p/3b5c45e8e5bd 做Java开发,jar包和war包接触的挺多的,有必要对它们做一个深入的了解,特总结整理如下: 1.jar包的介绍 ...
- 第三十九篇 入门机器学习——Numpy.array的基础操作——合并与分割向量和矩阵
No.1. 初始化状态 No.2. 合并多个向量为一个向量 No.3. 合并多个矩阵为一个矩阵 No.4. 借助vstack和hstack实现矩阵与向量的快速合并.或多个矩阵快速合并 No.5. 分割 ...
- Ninject 2.x细说---2.绑定和作用域
Ninject 2.x细说---2.绑定和作用域 转载weixin_33725272 最后发布于2011-11-06 00:03:00 阅读数 9 收藏 Ninject中提供多种接口和实现类的绑 ...
- bzoj 4827: [HNOI2017]礼物 (FFT)
一道FFT 然而据说暴力可以水70分 然而我省选的时候看到了直接吓傻了 连暴力都没打 太弱了啊QAQ emmmm 详细的拆开就看其他题解吧233 最后那一步卷积其实我一直没明白 后来画画图终于懂了 ...
- testng如何实现用例间依赖
todo: 参考: https://www.cnblogs.com/znicy/p/6534893.html
- jumpserver 常见错误解决
官方链接:https://jumpserver.readthedocs.io/zh/master/faq_install.html 重启jumpserver后台 #cd /opt#python3.6 ...