【网站源码】3D元素周期表源码

最新推荐文章于 2024-04-09 15:24:18 发布

温沐沐

最新推荐文章于 2024-04-09 15:24:18 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/weixin_54485193/article/details/124394317

版权

这是一个使用Three.js和CSS3DRenderer创建的3D元素周期表交互式展示项目，提供表面、球体、螺旋和网格四种形态。用户可以通过简单的按钮切换不同展示方式，适合对化学元素感兴趣的用户或教育用途。

摘要由CSDN通过智能技术生成

源码下载地址

蓝奏云—元素周期表源码下载地址（点击蓝色字体跳转下载）

网站安装方法（后期我会出个详细的图文教程）：下面仅供参考

云服务器安装个宝塔面板（或者小皮面板啥的）——创建网站——绑定域名——解析域名——上传源码压缩包——解压——绑定运行目录——成功

小白用户可以参考上面的安装方法，大佬直接pass下载用就好了。

元素周期表的展现共有有四种形态：

下面是示例图（就放了两张）：

表面：

球体

index.html（代码我就放了这一页，是为了审核通过，不用在意）

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" media="all" href="css/autoptimize_a66fd387e384bb4dcfb51a8fb20faf24.css" rel="stylesheet"><title>3D元素周期表</title><meta name="description" content="超炫的3d动画设计"><meta name="keywords" content="3D动画，3D元素周期表"><link rel="shortcut icon" href="yuansu.ico"></head><body> <script src="js/three.min.js"></script> <script src="js/tween.min.js"></script> <script src="js/TrackballControls.js"></script> <script src="js/CSS3DRenderer.js"></script> <div id="container"></div><div id="info">多元化—元素周期表</div><div id="menu"> <button id="table">表面</button> <button id="sphere">球体</button> <button id="helix">螺旋</button> <button id="grid">网格</button> 
 <!--<button id="sphere"><a href="https://www.fanxingw.cn" target="_blank"><font color="#01DF01">繁星博客</font></a></button>--> </div> <script>var table = [
	"H", "Hydrogen", "1.00794", 1, 1,
	"He", "Helium", "4.002602", 18, 1,
	"Li", "Lithium", "#6.941", 1, 2,
	"Be", "Beryllium", "9.012182", 2, 2,
	"B", "Boron", "#10.811", 13, 2,
	"C", "Carbon", "#12.0107", 14, 2,
	"N", "Nitrogen", "#14.0067", 15, 2,
	"O", "Oxygen"