网页js实现的各种3D树形结构模型

空中湖

已于 2022-09-02 09:16:36 修改

阅读量1.3k

点赞数 1

分类专栏： js 文章标签：前端 javascript html

于 2022-09-02 09:16:13 首次发布

本文链接：https://blog.csdn.net/kongzhonghu/article/details/126655429

版权

js 专栏收录该内容

49 篇文章 4 订阅

订阅专栏

树状结构的意义就在于它能在一个系统内部帮助我们很好的建立知识之间的关联，并最终回归知识的本质。

树形结构有着令人着迷的性质，很多我们现实生活中存在的关系都能用树形结构来描述，对树形结构的迷恋，令我萌生了在代码世界再现树结构的想象，我也收集了很多实现了树形结构的代码来对大家的理解问题和展示问题有所启发。

让树生长在代码世界，一个新的世界。

js模拟一棵树的生长过程最终生成一课漂亮的3D树结构

js制作的3D树模型四种树类型

js通过L系统生成漂亮逼真的树模型

js模拟3D奇异树模型

js制作的3D圣诞树，可自定义的圣诞节礼物

js模拟3D树模型超cute

js制作的3D毕达哥拉斯树

js生成一棵漂亮的树模型

js生成的霍夫曼3D树hufman 3D tree

js生成的3D树模型

js生成的倒计时树模型

js通过参数生成树模型

js制作的模拟一棵树的生长过程并最终生成一棵超漂亮的3D树

js生成的漂亮3D树模型

js制作的模拟一棵树的生长过程并最终生成一棵超漂亮的3D树 (mubanmao.top)

代码赏析：


<html>
	<head>
		<meta name="viewport" content="initial-scale=0.75,maximum-scale=0.75"/>
		<title>tree</title>
		<style>
			* {
				font-family: monospace;
				z-index: 10;
			}
			body {
				margin: 0;
				padding: 0;
				border: 0;
				background-color: black;
			}
			canvas {
				width: 100%;
				height: 100%;
				z-index: 8;
			}
			span {
				color: white;
			}
			div {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 330;
				height: 170;
				border-color: white;
				border-width: 2;
				border-style: solid;
				background-color: rgba(0, 0, 0, 0.8);
				z-index: 9;
			}
        </style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
		<script src="TreeD.js"></script>
	</body>
</html>