最近在学习three.js在拿example中的项目练手，用了一整天的时间模仿了一个炫酷的元素周期表，在原有的基础上进行了一些改变。下面我会逐步讲解这个项目，算是加深理解，让大家提提意见。

因为我未搭建个人服务器。截几张图给大家看看效果我做的效果（大部分是和原来的一样）。可能一部分人已经见过这个经典动画了。（这里是原项目地址：https://threejs.org/examples/css3d_periodictable.html）

除了优化了原来的HELIX和GRID形式的的排版之外，我用另外一种方式也创建了两种自定义的排版方式。等会分享给大家。

下面是GitHub仓库地址，文件很简单，就一个HTML文件。想自己手动实现或者拿去用的可以看一下。喜欢的给颗星星，不胜感激（请忽略代码中的注释哈哈）。

https://github.com/yjhtry/projects_three.js/blob/master/CSS3DRenderer.html

下面开始分析这个小项目

技术栈

HTML, CSS3, Javascript
three.js, tween.js
三角函数

实现原理

利用three.js提供的CSS3DRenderer渲染器，通过CSS3转换属性将分层3D转换应用于DOM元素。其实就是包装一下DOM元素，可以像操作three.js中Mesh对象一样去操作DOM元素。本质上还是利用CSS3的3D动画属性。这个项目就是操作转换后DOM元素的position和rotation的属性值来创建动画
使用轻量级动画库tween'补间'控制DOM元素position和rotation属性值的过渡。
确定不同排版的每一个DOM元素的position和rotation（部分排版需要确定rotation）的值，并将之保存在THREE.Object3D的子对象的position属性中（也可以是一组想象数组后面我会详细讲解），然后使用‘补间’将DOM元素的position和rotation像其保存的对应属性值过渡。

话不多说，直接上代码。

HTML结构

<div id="container">
    	<!-- 选中菜单结构 start-->
    	<div id="menu">
    		<button id="table">TABLE</button>
    		<button id="sphere">SPHERE</button>
    		<button id="sphere2">SPHERE2</button>
    		<button id="plane">PLANE</button>
    		<button id="helix">HELIX</button>
    		<button id="grid">GRID</button>
    	</div>
    	<!-- end -->
    </div>

HTML部分非常简单仅仅是一个包含六个控制转换的按钮的选择栏，下面看看他们的样式

        #menu {
		position: absolute; 
		z-index: 100;
		width: 100%; 
		bottom: 50px; 
		text-align: center; 
		font-size: 32px 
	}

	button {
		border: none;
		background-color: transparent; 
		color: rgba( 127, 255, 255, 0.75 ); 
		padding: 12px 24px; 
		cursor: pointer; 
		outline: 1px solid rgba( 127, 255, 255, 0.75 );
	}

	button:hover { 
		background-color: rgba( 127, 255, 255, 0.5 ) 
	}

	button:active { 
		background-color: rgba( 127, 255, 255, 0.75 ) 
	}

首先将选择栏绝对定位到窗口底部50px处，这里注意z-index： 100，将其层级设置为最高可以防止hover，click事件被其它元素拦截。然后清除button默认样式，并给它增加了：hover和：active伪类，使交互更生动。

效果如下：

然后是118个DOM元素的结构和样式，因为他们是在JavaScript代码中动态创建了，这里我单独写了一个元素的结构。

<div class="element">
    <div class="number">1</div>		
    <div class="symbol">H</div>
    <div class="detail">Hydrogen<br>1.00794</div>
</div>

CSS样式

    .element {
		width: 120px;
		height: 160px;
		cursor: default;
		text-align: center;
		border: 1px solid rgba( 127, 255, 255, 0.25 );
		box-shadow: 0 0 12px rgba( 0, 255, 255, 0.5 );
	}

	.element:hover{ 
		border: 1px solid rgba( 127, 255, 255, 0.75 ); 
		box-shadow: 0 0 12px rgba( 0, 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: 0; 
		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 .detail {
		position: absolute; 
		left: 0; 
		right: 0; 
		bottom: 15px; 
		font-size: 12px; 
		color: rgba( 127, 255, 255, 0.75 ); 
	}

注意box-shadow和text-shadow。下面是效果图

通过box-shadow和text-shadow使DOM元素产生了立体感。

JavaScript部分

首先定义了118个元素的数据储存结构，这里使用的是数组（因外数量较多，我只拿过来前二十五个，github代码中有完整数据）

    const 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
            ]

先来分析一下这个数据结构

"H", "Hydrogen", "1.00794", 1, 1,

一共118个元素，每个元素在table数组定义了五条数据分别是符号（symbol），英文全称，质量（detail）,元素在表格排版中所在的列（column）和行（row）这两个数据在创建表格盘版的时我会说明使用方法。

		let scene, camera, renderer, controls;
		const objects = [];
		const targets = { 
			grid: [],
			helix: [], 
			table: [], 
			sphere: [] 
		};

这里定义了一些全局变量。scene，camera，renderer是three.js的环境对象,相机及渲染器。controls是three.js提供控制库，用于与用户交互，很简单。objects用于存储118个DOM元素。targets对象包含四个数组类型的属性值，用来保存存有不同排版目标位置的Object3D子对象。

元素的创建以及动画的控制由init函数执行，下面主要的篇幅用于将它

function init() {

    const felidView   = 40;
    const width       = window.innerWidth;
    const height      = window.innerHeight;
    const aspect      = width / height;
    const nearPlane   = 1;
    const farPlane    = 10000;
    const WebGLoutput = document.getElementById('container');

    scene    = new THREE.Scene();
    camera   = new THREE.PerspectiveCamera( felidView, aspect, nearPlane, farPlane );
    camera.position.z = 3000;
			
    renderer = new THREE.CSS3DRenderer();
    renderer.setSize( width, height );
    renderer.domElement.style.position = 'absolute';
    WebGLoutput.appendChild( renderer.domElement );

（可能我的代码缩进比较奇怪，我主要是为了趣味性哈哈）这段代码创建了three.js的三个基本组件，场景，相机（perspectiveCamera），渲染器。这里需要注意的是，这里的far-clipping-plane设置的值比较大，自己做的话可以设置小一些，降低性能损耗。注意这里采用的是CSS3D渲染器。

透视相机的视锥图

平面之间的部分被称为视锥，简单点来说就是相机的拍摄区域。图上的fov（视场）是相机的第一个参数，决定了相机拍摄范围的大小，类似于人眼的横向视域（大于180deg了吧）。aspect参数控制相机投影平面的宽高比（一般是canvas的宽高比）这个主要是为了防止图片变形，因为投影平面上的图像最终会通过canvas显示。注意使用CSS3D渲染器时，显示视口是div元素。

let i   = 0;
let len = table.length;

for ( ; i < len; i += 5 ) {

    const element      		  = document.createElement('div');
    element.className 		  = 'element';
    element.style.backgroundColor = `rgba( 0, 127, 127, ${ Math.random() * 0.5 + 0.25 } )`;
			
    const number        = document.createElement('div');
    number.className    = 'number';number.textContent  = i / 5 + 1;
    element.appendChild( number );
			
    const symbol        = document.createElement('div');
    symbol.className    = 'symbol';
    symbol.textContent  = table[ i ];
    element.appendChild( symbol );
				
    const detail 	= document.createElement('div');
    detail.className 	= 'detail';
    detail.innerHTML 	= `${ table[ i + 1 ] }<br/>${ table[ i + 2 ] }`;
    element.appendChild( detail );

    const 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 );

		}

这段代码创建了显示周期表元素的HTML结构，并将每一个DOM元素使用THREE.CSS3DObject类包装成3D对象。然后随机分配对象的位置在( -2000, 2000 )这个区间内。最后把对象添加场景中，并放入objects数组中保存，为在后面的动画做准备。

上面的已经完成了118元素的创建到随机分配位置显示的部分。下面开始创建集中排版需要的数据。

table排版

function createTableVertices() {

    let i = 0;

    for ( ; i < len; i += 5 ) {

    const object      = new THREE.Object3D();

    // [ clumn 18 ]
    object.position.x = table[ i  + 3 ] * 140 - 1260;
    object.position.y = -table[ i + 4 ] * 180 + 1000;
    object.position.z = 0;

    targets.table.push( object );

	}
}

这个排版比较简单，使用table数组中每个元素的第四个数据（column）和第五个数据（row）直接就可以的到每个元素对应的table排版的位置信息，然后将它们赋值给对应的object.position属性中保存（这个不一定非要这样，只要是THREE.Vector3类型的数据就可以）。最后将对象保存到对应的数组中，以便在动画中使用。

shpere排版

const objLength = objects.length;

function createSphereVertices() {

	let i = 0;
	const vector  = new THREE.Vector3();

	for ( ; i < objLength; ++i ) {

	    let phi   = Math.acos( -1 + ( 2  * i ) / objLength );
	    let theta = Math.sqrt( objLength * Math.PI ) * phi;
	    const 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 );

	    // rotation object 
					
	    vector.copy( object.position ).multiplyScalar( 2 );
	    object.lookAt( vector );
	    targets.sphere.push( object );
	}

}

说实话这段代码理解的不是很到位总感觉原作者的算法复杂化了，代码贴出来请大佬分析一下。后面我自己用别的方法实现了一种‘圆’不是很好看，但是很好理解。我先说一下vector这个变量的作用，它用来作为'目标位置'，使用object.lookAt( vector )这个方法让这个位置的对象看向vector这一点所在的方向，在three.js的内部会将object旋转以‘看向vector’。将得到旋转的值并保存在object对象的rotation属性中，在动画中将元素对象的rotation属性过渡为对应的值，使其旋转。

helix排版

function createHelixVertices() {

        let i = 0;
	const vector = new THREE.Vector3();

	for ( ; i < objLength; ++i ) {

	    let phi = i * 0.213 + Math.PI;

	    const object = new THREE.Object3D();

	    object.position.x = 800  * Math.sin( phi );
	    object.position.y = -( i * 8 ) + 450;
	    object.position.z = 800  * Math.cos( phi + Math.PI );

	    object.scale.set( 1.1, 1.1, 1.1 );

	    vector.x = object.position.x * 2;
	    vector.y = object.position.y;
	    vector.z = object.position.z * 2;

	    object.lookAt( vector );
	    targets.helix.push( object );

	}

}

这个排版很好理解，首先看一下Y轴采取的是在Y方向上逐个下降的算法。如果X，Z轴不做处理那就是延Y轴的排成一排。然后我讲一下这个0.213是怎么取的

因为总共118个元素，如果想让这些元素排列成圆的用上图的的两种函数就可以，我使用的是正弦函数，有图可以看出使118个元素排成四个圆只需要给每一个元素一个对应的角度，再通过Math.sin( angle )或Math.cos( angle )计算后，得到四组周期性的值，元素就会呈圆形排列。通过计算公式4 * Math.PI * 2 / 118得出0.213，这样每一个元素在周期表中的位置（这里是从0开始。）乘以0.213，得到与其对应的角度。使用这个角度通过正玄余玄函数得到在圆中的位置。

grid排版

function createGridVertices() {

	let i = 0;

	for ( ; i < objLength; ++i ) {

	    const object      = new THREE.Object3D();

	    object.position.x =  360  * ( i   % 5) - 800;
	    object.position.y = -360  * ( ( i /  5 >> 0 ) % 5 ) + 700;
	    object.position.z = -700  * ( i   / 25 >> 0 );

	    targets.grid.push( object );

	}
}

网格布局使用的主要是分组的思想，这是个5 * 5的网格。在X轴上的布局采用求余可以使元素分为五列，在Y轴上先除以5然后取整（这里我喜欢使用>>位操作符，和Math.floor一个效果）。这样做是为元素分行，然后求余分列。当一个平面内5 * 5排满后，在Z轴上判断元素属于哪一面。

上面四种布局是原来的经典布局，原作者使用的是将每个元素将要过低的位置保存起来。还有两种布局是我通过这种思想延伸的，比较偷懒，也很简单。先看一下是如何使用tween动画库来完成元素位置的过渡。

const gridBtn    = document.getElementById('grid');
const tableBtn   = document.getElementById('table');
const helixBtn   = document.getElementById('helix');
const sphereBtn  = document.getElementById('sphere');

gridBtn.addEventListener(    'click', function() { transform( targets.grid,   2000 )},   false );
tableBtn.addEventListener(   'click', function() { transform( targets.table,  2000 ) },  false );
helixBtn.addEventListener(   'click', function() { transform( targets.helix,  2000 ) },  false );
sphereBtn.addEventListener(  'click', function() { transform( targets.sphere, 2000 ) },  false );

function transform( targets, duration ) {

        TWEEN.removeAll();

	for ( let i = 0; i < objLength; ++i ) {

	let object = objects[ i ];
	let 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();

	}

	// 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
	new TWEEN.Tween( {} )
	    .to( {}, duration * 2 )
	    .onUpdate( render )
	    .start();

}

从事件绑定的回调可以看出，触发不同的排版时，我们传入对应的数据。然后将数据取出通过tween.js过渡这些数据产生动画。这里有tween.js使用的详细介绍https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md

循环之外的的这个‘补间’是用来在动画过渡期间执行渲染页面函数的。如下

function render() {

        renderer.render( scene, camera );

}

onWindowResize函数用于缩放页面时更新相机参数，场景大小以及重新渲染画面

animation通过requestAnimationFrame这个动画神器刷新‘所有补间数据’，更新trackball控制器

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );
	render();

}
		
function animation() {

        TWEEN.update();
        controls.update();
	requestAnimationFrame( animation );	
}

最后说一下我拓展的两种‘投机取巧的排版’

const sphere2Btn = document.getElementById('sphere2');
sphere2Btn.addEventListener( 'click', function() { transformSphere2( 2000 ) },  false );

function transformSphere2(duration) {

        TWEEN.removeAll();

	const sphereGeom = new THREE.SphereGeometry( 800, 12, 11 );
	const vertices = sphereGeom.vertices;
	const vector = new THREE.Vector3();

	for ( let i = 0; i < objLength; ++i ) {

		const target = new THREE.Object3D();

		target.position.copy(vertices[i]);
		vector.copy( target.position ).multiplyScalar( 2 );
		target.lookAt( vector );

		let object = objects[ i ];

		new TWEEN.Tween( object.position )
			.to( vertices[i],
			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();

}

整个动画的原理：为每个元素创建一个目标位置，这些位置组合产生的排版就是元素最终的排版，通过‘补间’过渡位置的转换。所以我直接使用three.js内置的几何体，使用它的vertices属性中的位置作为目标位置（有一点限制，vertices中顶点（位置）的数目最好接近118）。这样通过内置的几何体我们可以不进行数学计算，直接创建一些有意思的排版。

写到这里讲的也差不多了，我是一个刚入门前端的菜鸟，欢迎大家的指点和批评！喜欢的同学可以给个赞哦！