ThreeJS之3D柱形图-Toy模板网

这篇具有很好参考价值的文章主要介绍了ThreeJS之3D柱形图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

学习threejs第二篇，3D柱形图练习，本文参考了网上的实现方式，用html方式进行了实现。先上效果图：

threejs 图表,ThreeJs,学习笔记,javascript,html,前端

关键代码：

数据准备

let data = [[65, 20],[60, 10],[70, 10],[20, 20],[50, 30],[10, 40],];

柱形图分为上下两部分，因此使用了二维数组，表示上半部分和下半部分。

生成柱形图

通过对数据源的循环，以此生成矩形图，图表使用顶点颜色，同时设置材料的vertexColors属性。

			let barWidth = Math.floor(WIDTH / data.length * 0.691 * 0.70721);
			data.forEach((d, i) => {
				let group = new THREE.Group()
				let box1 = new THREE.BoxBufferGeometry(barWidth, HEIGHT / maxY * d[0], barWidth, 1, 1, 1)
				let box2 = new THREE.BoxBufferGeometry(barWidth, HEIGHT / maxY * d[1], barWidth, 1, 1, 1)
				box1.computeBoundingBox();
				box2.computeBoundingBox();
				let count = box1.attributes.position.count;
				let color1 = new THREE.Color()
				let color2 = new THREE.Color()
				box1.addAttribute('color', new THREE.BufferAttribute(new Float32Array(count * 3), 3));
				box2.addAttribute('color', new THREE.BufferAttribute(new Float32Array(count * 3), 3));
				let colors1 = box1.attributes.color;
				let colors2 = box2.attributes.color;
				for (let i = 0; i < count; i++) {
					let x = box1.attributes.position.getX(i);
					let y = box1.attributes.position.getY(i);
					let z = box1.attributes.position.getZ(i);
					//console.log(i, x, y, z)
					if (y > 0) {
						color1.setHex(0x1C8CFF)
						color2.setHex(0x00FFC2)
					} else {
						color1.setHex(0x093783)
						color2.setHex(0x117B5C)
					}
					colors1.setXYZ(i, color1.r, color1.g, color1.b)
					colors2.setXYZ(i, color2.r, color2.g, color2.b)
				}

此处box1.addAttribute，与threejs的版本有关，新版本中移除了该方法。

最后渲染，完工。

学习threejs的第二天，做个简单的记录。

代码地址：

threejs实现的3D柱形图-Javascript文档类资源-CSDN文库文章来源地址https://www.toymoban.com/news/detail-617059.html

到了这里，关于ThreeJS之3D柱形图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！