初探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是非常灵活的,但是同时问题就是弱类型语言有可能会出错,比如在调用函数时,且往往在运行起来时才可以检 ...
随机推荐
- ECharts实现拖拽
1.需求——如何在echarts中实现托拖拽的效果 2.解决方案 1.用Echarts的type为graph类型画图,优点:拖拽不用重新定点划线,有自带的连线关系,缺点:连线的样式及特效不能很好呈现 ...
- Makefile文件(DE1-soc软件实验”hello_word")
DE1-soc软件实验”hello_word"中,hello_word此程序很好理解,那Makefile文件又如何理解呢? 所要完成的Makefile 文件描述了整个工程的编译.连接等规则. ...
- C++-LUOGU2938- [USACO09FEB]股票市场Stock Market-[完全背包]
开O2,开O2,开O2 重要的事情说三遍 #include <set> #include <map> #include <cmath> #include <q ...
- jenkins常用
记最精简版的启动:gradle集成springboot+vue 安装jenkins,安装待推荐插件 服务器安装gradle 服务器安装npm 配置git仓库,配置git开发者账号等 配置gradle构 ...
- 5.Mybatis--解决属性名和字段名不一致的问题(起别名+resultMap)
我们看一下数据库中的字段 新建一个项目(我们拷贝之前的)来测试实体类字段跟数据库不一致 看看看,实体类中的属性是不是跟数据库表中的名不一样了 好,我们查询一下: 出现问题了:空值 为什么为空? 因为 ...
- Strange Bank(找零问题)
题目描述 为了使取钱变得困难,某家银行在一次操作中只允许其客户提取下列金额之一: 1日元(日本的货币) 6日元,62(=36)日元,63(=216)日元,… 9日元,92(=81)日元,93(=729 ...
- 【Python】摄氏度与华氏度互相转化
Python入门程序,大家可以举一反三,进行各种转换,比如单位转化,货币转化等等,自行发挥即可! 原理: 代码: Tempstr=input("请输入带有符号的温度值:\n")# ...
- 劳动人民万岁(拒绝惰性)------- 浅谈迭代对象(Iterable) 迭代器(Iterator)
一.前戏 问题:如果一次抓取所有城市天气 再显示,显示第一个城市气温时有很高的延时,并且很浪费储存空间 解决方案:以“用时访问”策略,并且能把说有城市气温封装到一个对象里,可用for一句进行迭代 二. ...
- Unity Hub破解
1.退出UnityHub,安装好nodejs后,用Win+R输入"cmd"执行以下命令 npm install -g asar 2.打开UnityHub安装目录如 C:\Progr ...
- AcWing 867. 分解质因数
#include <iostream> #include <algorithm> using namespace std; void divide(int x) { ; i & ...