ThreeJs入门19-geometry,绘制一个彩色矩形

2022-02-09 2,578 阅读3分钟

「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」

示例代码采用three.js-r73版本: cdnjs.cloudflare.com/ajax/libs/t…

对于纹理的基础知识已经介绍完了，现在来介绍下几何体geometry相关的知识。先从绘制一个矩形开始。

绘制线框矩形

我们之前的代码删掉等灯光部分代码和initObject中相关逻辑即可
我们将用到以下知识点：
- 平面几何体：THREE.PlaneGeometry
- 基础材质：THREE.MeshBasicMaterial
- 颜色：THREE.Color

首先定义一个平面几何体

// 创建一个平面几何体
geometry = new THREE.PlaneGeometry(100, 100)

几何体有四个参数，前两个参数定义宽高，后两个参数定义分段，分段参数我们先使用默认值

然后定义一个基础材质

// 定义材质
let material = new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors, // 材质颜色取顶点的颜色
    wireframe: true, // 将几何体渲染为线框
    color: 0xff0000 // 定义颜色
})

wireframe开启线框之后就可以看出几何体由哪些线组成
我们使用了color参数，这个时候vertexColors是不生效的，我们先把几何体显示出来，后面再去掉

定义网格，添加到场景中

let object = new THREE.Mesh(geometry, material)
scene.add(object)

显示效果：

实际上我们的矩形是由两个三角形组成的，中间的斜线相对于其他线条比较深，是因为两个三角形的线重合了。
从控制台看一下geometry中的参数组成

我们可以看出我们的矩形，是由四个向量顶点，两个面组成的，每个面的顶点都有一个索引值，就像下面这样，每三个顶点逆时针组成一个面。

绘制彩色矩形

有了上面的基础，我们给每个面的**vertexColors**添加对应顶点的颜色，即可绘制一个彩色的矩形

由于我们三个顶点组成一个面，所以我们定义三种颜色即可

// 定义三种颜色
var color1 = new THREE.Color(0x00900f)
var color2 = new THREE.Color(0x0000f0)
var color3 = new THREE.Color(0x20f0ff)

循环添加给面添加顶点颜色

 for (var i = 0; i < geometry.faces.length; i++) {
      var f = geometry.faces[i] // 获取面
      // 给面中每个顶点添加对应的颜色
      f.vertexColors[0] = color1
      f.vertexColors[1] = color2
      f.vertexColors[2] = color3
  }

去掉材质中color的定义

let material = new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors,
    wireframe: true, // 将几何体渲染为线框
    // color: 0xff0000
})

查看效果

我们现在绘制的矩形还是带线框的，把wireframe改成false再查看效果我们彩色矩形就绘制完成啦。

平面分段

之前定义geometry还有两个分段参数还没有用到，现在用一下看下效果
修改PlaneGeometry定义，改为宽高300，宽度分2份，高度分3份

geometry = new THREE.PlaneGeometry(300, 300, 2, 3)

后两个参数其实就是把我们的矩形进行分割用的，效果还不错。

codepen示例代码

总结

这一节我们主要讲了以下内容：

绘制线框矩形
绘制彩色矩形
平面分段