理想论坛_专业20年的财经股票炒股论坛交流社区 - 股票论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 3019|回复: 0

初探three.js几何体-Geometry

[复制链接]

9650

主题

9650

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
28966
发表于 2019-12-27 13:28 | 显示全部楼层 |阅读模式
three.js几多体我们还没有说完,这一节我们说一说THREE.Geometry(),简单几多体都是继续了这个工具,利用它会相对麻烦一些,可是可操纵性很是高,本日我们利用它建造一个自界说几多体-五角星,我们先开看一下成果。mode请移步至 郭志强的博客

Geometry工具有两个比力垂危的属性
1. vertices工具,他保存几多体全数点信息,是一个三维点数组
2. faces工具,他保存全数面信息,是一个THREE.Face3数组
所以我们先建立组成五角星的点,然后增加到vertices工具中。
  1. 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 geometry.faces[i].materialIndex = i % 2)geometry.computeFaceNormals();
复制代码
一共有20个面,倒数第二行我们为faces中数组的每一项设备materialIndex值,稍后我们在说。末端一行是重新盘算面的法向量。
末端我们为每一个面本性化材质。
  1. 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

免责声明:假如加害了您的权益,请联系站长,我们会实时删除侵权内容,感谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|理想论坛_专业20年的财经股票炒股论坛交流社区 - 股票论坛

GMT+8, 2020-7-12 17:00 , Processed in 0.174791 second(s), 29 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表