当筵意气临九霄,星离雨散不终朝。这篇文章主要讲述#yyds干货盘点#BufferGeometry的setDrawRange的使用相关的知识,希望能为你提供帮助。
1.BufferGeometry注意
2.代码const MAX_POINTS = 500;
const geometry = new THREE.BufferGeometry();
// attributes
const positions = new Float32Array(MAX_POINTS * 3);
// 3 vertices per point
geometry.setAttribute(position, new THREE.BufferAttribute(positions, 3));
const colors = new Float32Array(MAX_POINTS * 3)
geometry.setAttribute(color, new THREE.BufferAttribute(colors, 3));
console.log(geometry, geometry)
console.log(aa, positions === geometry.attributes[position].array) // tips: true
// 第1个点
positions[0] = 10
positions[1] = 10
positions[2] = -10
// 第2个点
positions[3] = 30
positions[4] = 30
positions[5] = -30
// 第3个点
positions[6] = -30
positions[7] = 30
positions[8] = -30
const red = new THREE.Color(red)
const green = new THREE.Color(green)
const blue = new THREE.Color(blue)
// 第1个点的颜色
colors[0] = red.r
colors[1] = red.g
colors[2] = red.b
// 第2个点的颜色
colors[3] = green.r
colors[4] = green.g
colors[5] = green.b
// 第3个点的颜色
colors[6] = blue.r
colors[7] = blue.g
colors[8] = blue.b
// 设置绘制的范围
geometry.setDrawRange(0, 3);
// 从索引值为0开始, 绘制2个顶点数据
// geometry.setDrawRange(2, 1);
// 从索引值为2开始, 绘制1个顶点数据
// material ->
LineBasicMaterial
const material = new THREE.PointsMaterial(
vertexColors: true,
size: 20
);
const point = new THREE.Points(geometry, material);
scene.add(point);
当设置如下:
geometry.setDrawRange(0, 3);
// 从索引值为0开始, 绘制3个顶点数据
此时的效果如下:
可以看到,绘制了3个顶点出来了
当设置如下:
geometry.setDrawRange(2, 1);
// 从索引值为2开始, 绘制1个顶点数据
此时的效果如下:
可以看到,只绘制了一个顶点出来了
3.注意事项
4.总结
【#yyds干货盘点#BufferGeometry的setDrawRange的使用】
推荐阅读
- #yyds干货盘点# vue中的数据请求axios简单封装和使用
- C# 给Word每一页设置不同文字水印
- NoSQL之Redis配置与优化(前半段)
- uniapp实战笔记微信小程序设置字体的开发踩坑记录
- kubectl 彩色输出 -- kubecolor
- 私有化部署的企业级在线文档产品说明书,请查收!
- IP基本原理3-H3C认证网络工程师(H3CNE)
- 网络架构设计实现中的复杂性探讨01
- 第十五节:SpringBoot使用JPA访问数据库