007three中的三种渲染模式

三年三月
41 阅读3分钟

该系列文章主要用于记录学习three.js的过程，包括做的一些demo，笔记，以及个人思考；主要学习的课程是 神光的小册《three.js通关秘籍》，感兴趣的可以购买学习，质量还是可以的

在three.js中，有三种渲染物体模式：点模式、线模式、网络模式。

  • 点模式：点模式就是一个个点，这个很好理解

  • 线模式：就是点与点之间连城一条线

    • LineLoop：首尾两个点相连（默认是不相连）
    • LineSegments：每两个点之间连一条线，两个为一组，不跨组（默认情况下 中间的点既会跟前面的点相连，也会跟后面的点相连）

  • 网络模式：就是三个点连成一个三角形，三角形再连成物体（也是我们用的最多的模式）

    • 正反概念：three.js 规定，从相机的角度看过去，如果三角形是顺时针连接，那么就是正面（正面可见），如果是逆时针连接，那么就是反面（反面不可见）
    • 通过材质的设置，可以正反面都看的见 side: THREE.DoubleSide
    • 分段概念：分段指的是在创建几何体时，将其表面划分成更小的多边形（一般是三角形）的数量。分段数量越多，几何体表面就越平滑、细节越丰富，但同时也会增加内存的使用量和渲染的时间

点模式

就是渲染出一个个点，核心代码如下

const geogery = new THREE.BufferGeometry();
// 所有的点
const vertices = new Float32Array([
    0, 0, 0,
    100, 0, 0,
    0, 100, 0,
    0, 0, 100,
    100, 100, 0
]);

const attribute = new THREE.BufferAttribute(vertices, 3);
geogery.attributes.position = attribute;
const material = new THREE.PointsMaterial({
    color: new THREE.Color('red'), // 设置点的颜色
    size: 20, // 设置点的大小
})

const points = new THREE.Points(geogery, material);

线模式

线模式，就是默认把 点，按照顺序首尾相连

const geometry = new THREE.BufferGeometry();

const vertices = new Float32Array([
    0, 0, 0,
    100, 0, 0,
    0, 100, 0,
    0, 0, 100,
    100, 100, 0
]);
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute;

const material = new THREE.LineBasicMaterial({
    color: new THREE.Color('orange')
});
// const line = new THREE.Line(geometry, material); // 首尾不相连
// const line = new THREE.LineLoop(geometry, material); // 首尾相连
const line = new THREE.LineSegments(geometry, material); // 两两一组，不夸组，互不关联

首尾不相连const line = new THREE.Line(geometry, material); // 首尾不相连

首尾相连const line = new THREE.LineLoop(geometry, material); // 首尾相连

也可以两两搭配，两个位一组，如果多出一个就不渲染了const line = new THREE.LineSegments(geometry, material); // 两两一组，不夸组，互不关联

网络模型

正反概念： three.js 规定，从相机的角度看过去，如果三角形是顺时针连接，那么就是正面（正面可见），如果是逆时针连接，那么就是反面（反面不可见）

const geometry = new THREE.BufferGeometry();

const vertices = new Float32Array([
    0, 0, 0,
    100, 0, 0,
    0, 100, 0,
    100, 100, 0
]);

const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute;
// (2->1->3)和（2->3->1）是同一个三角形，但是一个顺时针完成，一个是逆时针，所以逆时针的在背面是看不到的
const indexes = new Uint16Array([
    // 0, 1, 2, 2, 1, 3 
    0, 1, 2, 2, 3, 1
]);
geometry.index = new THREE.BufferAttribute(indexes, 1);

const material = new THREE.MeshBasicMaterial({
    color: new THREE.Color('orange'),
    side: THREE.DoubleSide, // 通过设置材质的side属性为DoubleSide，那么双面都可以看到
});

const mesh = new THREE.Mesh(geometry, material);

可以通过设置side: THREE.DoubleSide使得双面都可以看到

分段的概念： 分段指的是在创建几何体时，将其表面划分成更小的多边形（一般是三角形）的数量。分段数量越多，几何体表面就越平滑、细节越丰富，但同时也会增加内存的使用量和渲染的时间

我们通过官网上的例子就可以感受一下

具体地址是这个( threejs.org/docs/scenes… )，可以点击体验（修改radialSegments和 heightSegments的值来体验）

avatar
文章
阅读
粉丝