three.js 几何体(三)
时间:2022-07-24
本文章向大家介绍three.js 几何体(三),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上一篇介绍了几何体的构造体参数,这篇郭先生就接着上一篇说。
1. ExtrudeGeometry挤压几何体
挤压几何体允许我们从一条形状路径中,挤压出一个Geometry。ExtrudeGeometry有两个参数,第一个参数是一个图形,第二个参数是它的配置
var shape = new THREE.Shape();
shape.moveTo(0, 1.5);
shape.bezierCurveTo(2, 3.5, 4, 1.5, 2, -0.5);
shape.lineTo(0, -2.5);
shape.lineTo(-2, -0.5);
shape.bezierCurveTo(-4, 1.5, -2, 3.5, 0, 1.5);
var extrudeSettings = {
steps: 2, //用于沿着挤出样条的深度细分的点的数量,默认值为1
depth: 0.3, //挤出的形状的深度,默认值为100
bevelEnabled: true, //对挤出的形状应用是否斜角,默认值为true
bevelThickness: 0.3, //设置原始形状上斜角的厚度。默认值为6
bevelSize: 0.5, //斜角与原始形状轮廓之间的延伸距离
bevelSegments: 2, //斜角的分段层数,默认值为3
curveSegments: 12, //曲线上点的数量,默认值是12
};
var grometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
2. LatheGeometry车削几何体
车削几何体创建具有轴对称性的网格,它将一条线绕着Y轴来进行旋转。
var points = [];
for (let i = 0; i < 41; i++) {
points.push(
new THREE.Vector2(
Math.abs(Math.sin((Math.PI * i) / 10)) * 1.8,
i * 0.1 - 2
)
);
}
var geometry = new THREE.LatheGeometry(points, 30);
车削几何体的第一个参数是一个Vector2对象数组。每个点的X坐标必须大于0,第二个参数是要生成的车削几何体圆周分段的数量,默认值是12
3. ParametricGeometry参数化几何体
参数化几何体生成由参数表示其表面的几何体。参数化几何体的第一个参数是一个函数,该函数由三个参数u,v,t转换成,u、v值作为参数定义每个顶点的位置,t该点的位置对象,可通过该对象设置u,v组成额度定点。slices属性定义u值应该分成多少份,stacks属性定义v值应该分成多少份
var geometry = new THREE.ParametricGeometry(
(u, v, target) => {
let x = Math.sin(Math.PI * 2 * u) * 1.7 * Math.abs(Math.sin(Math.PI * v));
let y = v * 4 - 2;
let z = Math.cos(Math.PI * 2 * u) * 1.7 * Math.abs(Math.cos(Math.PI * v));
target.set(x, y, z);
},
30,
12
);
参数化几何体可以做出十分丰富的数学几何体,要求有一定的几何知识。
转载请注明地址:郭先生的博客
- 解决win10 关键错误开始菜单和cortana无法工作 的问题(转-真的成功了)
- “AS3.0高级动画编程”学习:第二章转向行为(下)
- windows系统中eclipse C开发环境的架设
- 5个酷毙的Python工具
- ”盒模型“之如何防止边框和内边距把元素撑开
- excel中的不同类型图表叠加
- 这几天遇到的关于IE6/sql2008/win2003的奇怪bug
- 基于Web的工作流管理系统的设计与实现
- 这是对position讲解最通俗易懂的版本了。
- 你到底该如何看待比特币?
- OpenApplus小程序容器
- 点名了,最具投资价值的50家物联网企业名单发布
- 数据结构C#版笔记--树与二叉树
- Java8新特性第3章
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PCIe例程理解(一)用户逻辑模块(接收)仿真分析
- 细品服务并发限流+Redis-cell的使用
- 在VCUTRD 2020.1 里设置HDMI-TX显示QT界面
- 稀疏数组 & 环形队列
- Spring+Mybatis+Atomikos实现分布式事务
- Android低功耗蓝牙总结
- 【云原生技术研究】 从bpftrace看如何利用eBPF实现内核追踪
- Qt多线程编程
- JavaScript中的时间与日期、正则表达式和Function类型
- JavaScript中的变量、作用域、内存问题和基本包装类型
- 【LeetCode之C#解法】 移动零、爬楼梯
- jQuery框架概述
- 久等了!Docker容器常用命令
- CentOS7下利用Ambari搭建HDP大数据平台
- 聊聊java中的哪些Map:(七)ConcurrentHashMap的size方法的一致性分析