Rowan Liu's Tech
Home
Blog
CSS
JS
lib
Read
About
GitHub
Home
Blog
CSS
JS
lib
Read
About
GitHub
  • 框架
  • Vue ClI 源码探索
  • vue 源码解读

    • Vue.js技术揭秘
    • Flow
    • Vue.js源码目录设计
    • Vue.js源码构建
    • 从入口开始
    • 数据驱动
    • new Vue发生了什么
    • Vue实例挂载的实现
    • render
    • Virtual DOM
    • createElement
    • update
    • 组件化
  • threejs journey

    • three.js
    • 第一章我们做了什么
    • 基本组件
    • 光源
    • 材质
    • 学习使用几何体
    • 高级几何体和二元操作
    • 粒子和粒子系统
    • 创建、加载高级网格和几何体
    • /lib/threejs/webgl/
  • react journey

    • React
    • Ant Design
  • vuepress

    • 评论
  • egg

    • egg init
  • jQuery系列

    • jQuery一个在JavaScript基础之上封装的函数库。
  • nestjs

    • OAuth 2.0
    • [译]Passport 文档(一)入门
    • [译]Passport 文档(二)提供者
    • [译]Passport 文档(三)基本 & 摘要
    • [译]Passport 文档(四)操作

高级几何体和二元操作

  • ConvexGeometry 凸面体
  • LatheGeometry 扫描体
  • TubeGeometry 管状几何体
  • ExtrudeGeometry 拉伸几何体

ConvexGeometry

通过ConvexGeometry我们可以在一组点外面建立一个凸包。凸包就是包围这组点的最小图形。

LatheGeometry

通过LatheGeometry可以从一条光滑的曲线开始创建图形。曲线是通过节点定义的,曲线通常被称作样条曲线。当样条曲线绕着一个固定的点旋转时就构成了一个类似花瓶或者铃铛的图形。

通过拉伸创建几何体

拉伸THREE.CircleGeometry对象,能够得到类似圆柱体的图形。 拉伸THREE.PlanceGeometry对象,能够得到类似方块的图形。 最通用的拉伸图形方法是使用THREE.ExtrudeGeometry对象。

ExtrudeGeometry

拉伸几何体,沿Z轴拉伸

TubeGeometry

沿着三维样条曲线拉伸出一根管子。

从SVG拉伸

将SVG路径转为Three.js图形 https://github.com/asutherland/d3-threeD

SVG(Scalabel Vector Graphics) 可缩放矢量图,是基于XML标准,用来在网页上创建二维矢量图。

d3-ThreeD库提供transformSVGPathExposed函数,可以将SVG转为Thress.js图形

ParametricGeometry

通过ParametricGeometry可以创建基于等式的几何体

TextGeometry 三维文本

使用二元操作组合网格

总结

  • 使用ConvexGeometry、TubeGeometry和LatheGeometry可以创建相当有趣的几何体。
  • 将已有的SVG路径转为Three.js路径是可能的。
  • 使用ExtrudeGeometry可以轻松的将二维几何体转为三维几何体。
  • 使用文本时需要指定字体。
  • 通过ThreeBSP可以在网格上应用三种二元操作:union、subtract和intersect.
Edit this page
Last Updated: 2026/1/12 10:15
Contributors: Rowan Liu
Prev
学习使用几何体
Next
粒子和粒子系统