3d元素周期表text（1）

先上代码

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"><title>3D-元素周期表copy</title><link rel="stylesheet" href="./css/css.css"></head><body><!-- 引入script  --><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><!--  html代码 --><div id="container"></div><div id="info">3D-元素周期表copy</div><div id="menu"><button id="table">表面</button><button id="sphere">球体</button><button id="helix">螺旋</button><button id="grid">网格</button></div><script src="./js/index.js"></script>
</body></html>

css：

html,
body {height: 100%;
}body {background-color: #000000;margin: 0;font-family: Helvetica, sans-serif;overflow: hidden;
}a {color: #ffffff;
}#info {position: absolute;width: 100%;color: #ffffff;padding: 5px;font-family: monospace;font-size: 13px;/* 粗体 */font-weight: bold;text-align: center;z-index: 1;
}#menu {position: absolute;bottom: 20px;width: 100%;text-align: center;font-family: verdana, Tahoma, Arial, Hei, "Microsoft Yahei", SimHei;
}button {color: rgba(127, 255, 255, 0.75);background: transparent;outline: 1px solid rgba(127, 255, 255, 0.75);border: 0px;padding: 5px 10px;cursor: pointer;
}button:hover {background-color: rgba(0, 255, 255, 0.5);
}button:active {color: #000000;background-color: rgba(127, 255, 255, 0.75);
}.element {width: 120px;height: 160px;box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);border: 1px solid rgba(127, 255, 255, 0.25);text-align: center;cursor: default;
}.element:hover {box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.75);
}.element .number {position: absolute;top: 20px;right: 20px;font-size: 12px;color: rgba(127, 255, 255, 0.75);
}.element .symbol {position: absolute;top: 40px;left: 0px;right: 0px;font-size: 60px;font-weight: bold;color: rgba(255, 255, 255, 0.75);text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
}.element .details {position: absolute;bottom: 15px;left: 0px;right: 0px;font-size: 12px;color: rgba(127, 255, 255, 0.75);
}

js：
inidex.js:

// 定义元素，后面数字为行和列
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", "#15.9994", 16, 2,"F", "Fluorine", "18.9984032", 17, 2,"Ne", "Neon", "#20.1797", 18, 2,"Na", "Sodium", "22.98976...", 1, 3,"Mg", "Magnesium", "#24.305", 2, 3,"Al", "Aluminium", "26.9815386", 13, 3,"Si", "Silicon", "#28.0855", 14, 3,"P", "Phosphorus", "30.973762", 15, 3,"S", "Sulfur", "#32.065", 16, 3,"Cl", "Chlorine", "#35.453", 17, 3,"Ar", "Argon", "#39.948", 18, 3,"K", "Potassium", "#39.948", 1, 4,"Ca", "Calcium", "#40.078", 2, 4,"Sc", "Scandium", "44.955912", 3, 4,"Ti", "Titanium", "#47.867", 4, 4,"V", "Vanadium", "#50.9415", 5, 4,"Cr", "Chromium", "#51.9961", 6, 4,"Mn", "Manganese", "54.938045", 7, 4,"Fe", "Iron", "#55.845", 8, 4,"Co", "Cobalt", "58.933195", 9, 4,"Ni", "Nickel", "#58.6934", 10, 4,"Cu", "Copper", "#63.546", 11, 4,"Zn", "Zinc", "#65.38", 12, 4,"Ga", "Gallium", "#69.723", 13, 4,"Ge", "Germanium", "#72.63", 14, 4,"As", "Arsenic", "#74.9216", 15, 4,"Se", "Selenium", "#78.96", 16, 4,"Br", "Bromine", "#79.904", 17, 4,"Kr", "Krypton", "#83.798", 18, 4,"Rb", "Rubidium", "#85.4678", 1, 5,"Sr", "Strontium", "#87.62", 2, 5,"Y", "Yttrium", "88.90585", 3, 5,"Zr", "Zirconium", "#91.224", 4, 5,"Nb", "Niobium", "92.90628", 5, 5,"Mo", "Molybdenum", "#95.96", 6, 5,"Tc", "Technetium", "(98)", 7, 5,"Ru", "Ruthenium", "#101.07", 8, 5,"Rh", "Rhodium", "#102.9055", 9, 5,"Pd", "Palladium", "#106.42", 10, 5,"Ag", "Silver", "#107.8682", 11, 5,"Cd", "Cadmium", "#112.411", 12, 5,"In", "Indium", "#114.818", 13, 5,"Sn", "Tin", "#118.71", 14, 5,"Sb", "Antimony", "#121.76", 15, 5,"Te", "Tellurium", "127.6", 16, 5,"I", "Iodine", "126.90447", 17, 5,"Xe", "Xenon", "#131.293", 18, 5,"Cs", "Caesium", "#132.9054", 1, 6,"Ba", "Barium", "#132.9054", 2, 6,"La", "Lanthanum", "138.90547", 4, 9,"Ce", "Cerium", "#140.116", 5, 9,"Pr", "Praseodymium", "140.90765", 6, 9,"Nd", "Neodymium", "#144.242", 7, 9,"Pm", "Promethium", "(145)", 8, 9,"Sm", "Samarium", "#150.36", 9, 9,"Eu", "Europium", "#151.964", 10, 9,"Gd", "Gadolinium", "#157.25", 11, 9,"Tb", "Terbium", "158.92535", 12, 9,"Dy", "Dysprosium", "162.5", 13, 9,"Ho", "Holmium", "164.93032", 14, 9,"Er", "Erbium", "#167.259", 15, 9,"Tm", "Thulium", "168.93421", 16, 9,"Yb", "Ytterbium", "#173.054", 17, 9,"Lu", "Lutetium", "#174.9668", 18, 9,"Hf", "Hafnium", "#178.49", 4, 6,"Ta", "Tantalum", "180.94788", 5, 6,"W", "Tungsten", "#183.84", 6, 6,"Re", "Rhenium", "#186.207", 7, 6,"Os", "Osmium", "#190.23", 8, 6,"Ir", "Iridium", "#192.217", 9, 6,"Pt", "Platinum", "#195.084", 10, 6,"Au", "Gold", "196.966569", 11, 6,"Hg", "Mercury", "#200.59", 12, 6,"Tl", "Thallium", "#204.3833", 13, 6,"Pb", "Lead", "207.2", 14, 6,"Bi", "Bismuth", "#208.9804", 15, 6,"Po", "Polonium", "(209)", 16, 6,"At", "Astatine", "(210)", 17, 6,"Rn", "Radon", "(222)", 18, 6,"Fr", "Francium", "(223)", 1, 7,"Ra", "Radium", "(226)", 2, 7,"Ac", "Actinium", "(227)", 4, 10,"Th", "Thorium", "232.03806", 5, 10,"Pa", "Protactinium", "#231.0588", 6, 10,"U", "Uranium", "238.02891", 7, 10,"Np", "Neptunium", "(237)", 8, 10,"Pu", "Plutonium", "(244)", 9, 10,"Am", "Americium", "(243)", 10, 10,"Cm", "Curium", "(247)", 11, 10,"Bk", "Berkelium", "(247)", 12, 10,"Cf", "Californium", "(251)", 13, 10,"Es", "Einstenium", "(252)", 14, 10,"Fm", "Fermium", "(257)", 15, 10,"Md", "Mendelevium", "(258)", 16, 10,"No", "Nobelium", "(259)", 17, 10,"Lr", "Lawrencium", "(262)", 18, 10,"Rf", "Rutherfordium", "(267)", 4, 7,"Db", "Dubnium", "(268)", 5, 7,"Sg", "Seaborgium", "(271)", 6, 7,"Bh", "Bohrium", "(272)", 7, 7,"Hs", "Hassium", "(270)", 8, 7,"Mt", "Meitnerium", "(276)", 9, 7,"Ds", "Darmstadium", "(281)", 10, 7,"Rg", "Roentgenium", "(280)", 11, 7,"Cn", "Copernicium", "(285)", 12, 7,"Uut", "Unutrium", "(284)", 13, 7,"Fl", "Flerovium", "(289)", 14, 7,"Uup", "Ununpentium", "(288)", 15, 7,"Lv", "Livermorium", "(293)", 16, 7,"Uus", "Ununseptium", "(294)", 17, 7,"Uuo", "Ununoctium", "(294)", 18, 7
];// camera, scene, renderer controls;
// 摄像机，场景， 渲染器,   管制措施;
var camera, scene, renderer;
var controls;
// 对象
var objects = [];
// 目标
var targets = {table: [],sphere: [],helix: [],grid: []
};init();
animate();function init() {// 透视投影相机PerspectiveCamera,//创建一个摄像机对象（摄像机决定了能够在场景里看到什么）// fov，aspect，near，far// fov一般都定义45,aspect实际项目中使用的是屏幕的宽高比,near实际项目中都会设置为1,far我们视觉所能看到的最远距离camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);//设置摄像机的位置camera.position.z = 3000;创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）scene = new THREE.Scene();// tablefor (var i = 0; i < table.length; i += 5) {// 方框颜色var element = document.createElement('div');element.className = 'element';// 颜色是随机的element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';//元素序列var number = document.createElement('div');number.className = 'number';number.textContent = (i / 5) + 1;element.appendChild(number);// 元素符号var symbol = document.createElement('div');symbol.className = 'symbol';symbol.textContent = table[i];element.appendChild(symbol);// 元素下面的英文与相对原子质量var details = document.createElement('div');details.className = 'details';details.innerHTML = table[i + 1] + '<br>' + table[i + 2];element.appendChild(details);// 3d类，使其方块散列在四周var object = new THREE.CSS3DObject(element);object.position.x = Math.random() * 4000 - 2000;object.position.y = Math.random() * 4000 - 2000;object.position.z = Math.random() * 4000 - 2000;scene.add(object);objects.push(object);//定位，使其在屏幕的中间var object = new THREE.Object3D();object.position.x = (table[i + 3] * 140) - 1330;object.position.y = -(table[i + 4] * 180) + 990;targets.table.push(object);}// sphere//三维向量var vector = new THREE.Vector3();//使所有的卡片平均分布在球面上for (var i = 0, l = objects.length; i < l; i++) {var phi = Math.acos(-1 + (2 * i) / l);var theta = Math.sqrt(l * Math.PI) * phi;var object = new THREE.Object3D();object.position.x = 800 * Math.cos(theta) * Math.sin(phi);object.position.y = 800 * Math.sin(theta) * Math.sin(phi);object.position.z = 800 * Math.cos(phi);vector.copy(object.position).multiplyScalar(2);object.lookAt(vector);targets.sphere.push(object);}// helixvar vector = new THREE.Vector3();for (var i = 0, l = objects.length; i < l; i++) {var phi = i * 0.175 + Math.PI;var object = new THREE.Object3D();object.position.x = 900 * Math.sin(phi);object.position.y = -(i * 8) + 450;object.position.z = 900 * Math.cos(phi);vector.x = object.position.x * 2;vector.y = object.position.y;vector.z = object.position.z * 2;object.lookAt(vector);targets.helix.push(object);}// gridfor (var i = 0; i < objects.length; i++) {var object = new THREE.Object3D();object.position.x = ((i % 5) * 400) - 800;object.position.y = (-(Math.floor(i / 5) % 5) * 400) + 800;object.position.z = (Math.floor(i / 25)) * 1000 - 2000;targets.grid.push(object);}//renderer = new THREE.CSS3DRenderer();renderer.setSize(window.innerWidth, window.innerHeight);renderer.domElement.style.position = 'absolute';document.getElementById('container').appendChild(renderer.domElement);//controls = new THREE.TrackballControls(camera, renderer.domElement);//鼠标速度controls.rotateSpeed = 0.5;//鼠标滚轮滑动距离最小与最大controls.minDistance = 500;controls.maxDistance = 6000;//事件监听器，点击。。。。controls.addEventListener('change', render);var button = document.getElementById('table');button.addEventListener('click', function(event) {transform(targets.table, 2000);}, false);var button = document.getElementById('sphere');button.addEventListener('click', function(event) {transform(targets.sphere, 2000);}, false);var button = document.getElementById('helix');button.addEventListener('click', function(event) {transform(targets.helix, 2000);}, false);var button = document.getElementById('grid');button.addEventListener('click', function(event) {transform(targets.grid, 2000);}, false);transform(targets.table, 5000);//事件监听器，点击。。。。window.addEventListener('resize', onWindowResize, false);}function transform(targets, duration) {TWEEN.removeAll();for (var i = 0; i < objects.length; i++) {var object = objects[i];var target = targets[i];new TWEEN.Tween(object.position).to({x: target.position.x,y: target.position.y,z: target.position.z}, Math.random() * duration + duration).easing(TWEEN.Easing.Exponential.InOut).start();new TWEEN.Tween(object.rotation).to({x: target.rotation.x,y: target.rotation.y,z: target.rotation.z}, Math.random() * duration + duration).easing(TWEEN.Easing.Exponential.InOut).start();}new TWEEN.Tween(this).to({}, duration * 2).onUpdate(render).start();}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);render();}function animate() {requestAnimationFrame(animate);TWEEN.update();controls.update();}function render() {renderer.render(scene, camera);}

CSS3DRenderer.js


THREE.CSS3DObject = function(element) {THREE.Object3D.call(this);this.element = element;this.element.style.position = 'absolute';this.addEventListener('removed', function(event) {if (this.element.parentNode !== null) {this.element.parentNode.removeChild(this.element);for (var i = 0, l = this.children.length; i < l; i++) {this.children[i].dispatchEvent(event);}}});};THREE.CSS3DObject.prototype = Object.create(THREE.Object3D.prototype);THREE.CSS3DSprite = function(element) {THREE.CSS3DObject.call(this, element);};THREE.CSS3DSprite.prototype = Object.create(THREE.CSS3DObject.prototype);//THREE.CSS3DRenderer = function() {console.log('THREE.CSS3DRenderer', THREE.REVISION);var _width, _height;var _widthHalf, _heightHalf;var matrix = new THREE.Matrix4();var domElement = document.createElement('div');domElement.style.overflow = 'hidden';domElement.style.WebkitTransformStyle = 'preserve-3d';domElement.style.MozTransformStyle = 'preserve-3d';domElement.style.oTransformStyle = 'preserve-3d';domElement.style.transformStyle = 'preserve-3d';this.domElement = domElement;var cameraElement = document.createElement('div');cameraElement.style.WebkitTransformStyle = 'preserve-3d';cameraElement.style.MozTransformStyle = 'preserve-3d';cameraElement.style.oTransformStyle = 'preserve-3d';cameraElement.style.transformStyle = 'preserve-3d';domElement.appendChild(cameraElement);this.setClearColor = function() {};this.setSize = function(width, height) {_width = width;_height = height;_widthHalf = _width / 2;_heightHalf = _height / 2;domElement.style.width = width + 'px';domElement.style.height = height + 'px';cameraElement.style.width = width + 'px';cameraElement.style.height = height + 'px';};var epsilon = function(value) {return Math.abs(value) < 0.000001 ? 0 : value;};var getCameraCSSMatrix = function(matrix) {var elements = matrix.elements;return 'matrix3d(' +epsilon(elements[0]) + ',' +epsilon(-elements[1]) + ',' +epsilon(elements[2]) + ',' +epsilon(elements[3]) + ',' +epsilon(elements[4]) + ',' +epsilon(-elements[5]) + ',' +epsilon(elements[6]) + ',' +epsilon(elements[7]) + ',' +epsilon(elements[8]) + ',' +epsilon(-elements[9]) + ',' +epsilon(elements[10]) + ',' +epsilon(elements[11]) + ',' +epsilon(elements[12]) + ',' +epsilon(-elements[13]) + ',' +epsilon(elements[14]) + ',' +epsilon(elements[15]) +')';};var getObjectCSSMatrix = function(matrix) {var elements = matrix.elements;return 'translate3d(-50%,-50%,0) matrix3d(' +epsilon(elements[0]) + ',' +epsilon(elements[1]) + ',' +epsilon(elements[2]) + ',' +epsilon(elements[3]) + ',' +epsilon(-elements[4]) + ',' +epsilon(-elements[5]) + ',' +epsilon(-elements[6]) + ',' +epsilon(-elements[7]) + ',' +epsilon(elements[8]) + ',' +epsilon(elements[9]) + ',' +epsilon(elements[10]) + ',' +epsilon(elements[11]) + ',' +epsilon(elements[12]) + ',' +epsilon(elements[13]) + ',' +epsilon(elements[14]) + ',' +epsilon(elements[15]) +')';};var renderObject = function(object, camera) {if (object instanceof THREE.CSS3DObject) {var style;if (object instanceof THREE.CSS3DSprite) {// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/matrix.copy(camera.matrixWorldInverse);matrix.transpose();matrix.copyPosition(object.matrixWorld);matrix.scale(object.scale);matrix.elements[3] = 0;matrix.elements[7] = 0;matrix.elements[11] = 0;matrix.elements[15] = 1;style = getObjectCSSMatrix(matrix);} else {style = getObjectCSSMatrix(object.matrixWorld);}var element = object.element;element.style.WebkitTransform = style;element.style.MozTransform = style;element.style.oTransform = style;element.style.transform = style;if (element.parentNode !== cameraElement) {cameraElement.appendChild(element);}}for (var i = 0, l = object.children.length; i < l; i++) {renderObject(object.children[i], camera);}};this.render = function(scene, camera) {var fov = 0.5 / Math.tan(THREE.Math.degToRad(camera.fov * 0.5)) * _height;domElement.style.WebkitPerspective = fov + "px";domElement.style.MozPerspective = fov + "px";domElement.style.oPerspective = fov + "px";domElement.style.perspective = fov + "px";scene.updateMatrixWorld();if (camera.parent === undefined) camera.updateMatrixWorld();camera.matrixWorldInverse.getInverse(camera.matrixWorld);var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix(camera.matrixWorldInverse) +" translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";cameraElement.style.WebkitTransform = style;cameraElement.style.MozTransform = style;cameraElement.style.oTransform = style;cameraElement.style.transform = style;renderObject(scene, camera);};};

three.min.js与tween.min.js,TrackballControls.js 太大了，我放在我的主页文件里面啦哦！！
代码里面有一定的注释哦，欢迎小伙伴一起来交流。

3d元素周期表text（1）相关推荐

Three.js之吊炸天的3D元素周期表探究及再开发
吊炸天的3D元素周期表 three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包 ...
html css js 3d元素周期表源码
我没有提供 HTML.CSS.JS 三维元素周期表的源码,但是可以告诉你如何制作这样的表. 使用 HTML 创建表格结构,并使用 CSS 设置样式. 使用 JS 来添加交互效果,如点击某一元素时显示详 ...
3D_HTML5 3D元素周期表
地址:http://www.zcool.com.cn/gfx/ZMzI4ODIw.html
TWaver版3D化学元素周期表
很早就有人做3D网页版的化学元素周期表了,酷炫效果和新鲜技巧一度被众多粉丝奉为神明,争相研究和效仿.甚至有人放弃一切扑向这颗蜡烛,不由总是想到那个OPPO广告女主角拽拽的鄙视道:"辞职去旅游 ...
文字拉伸css_CSS 3D拉伸文字
文字拉伸css The technique I am demonstrating here isn't one I made from scratch; as far as I am aware, c ...
Matlab画图-非常具体，非常全面
Matlab画图强大的画图功能是Matlab的特点之中的一个,Matlab提供了一系列的画图函数,用户不须要过多的考虑画图的细节,仅仅须要给出一些基本參数就能得到所需图形,这类函数称为高层画图函数. ...
Matlab绘图详细总结
Matlab绘图强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数.此外,M ...
matlab绘图大全
Matlab绘图强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数.此外,M ...
Matlab画图小结（二）
#Matlab绘图强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数.此外, ...

3d元素周期表text（1）

先上代码

3d元素周期表text（1）相关推荐

最新文章

热门文章