ThreeJS用CSS3编写2D界面实现3D元素周期表【多种形状造型】

本源码演示了使用Threejs库元素周期酷炫特效，可用于3D大屏互动开发、签到开发、用于晚会、年会大屏互动特效参考，里面包括四种造型：圆环、平面、球形、网格居正，里面的UI使用的是CSS3DRenderer库开发，直接用CSS3特性，效果非常细腻，比用Canvas绘制贴图方式更精美，支持更新文字，文字嵌入到场景中，非常值得学习。
部分源码

//生成UI元素
for ( 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 ] + '
' + table[ i + 2 ];
	element.appendChild( details );

	var object = new 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 );
}

注：threejs/WebGL开发，非常值得学习。本地预览建议部署WEB服务器，配置运行服务器等网络访问地址运行，建议用火狐浏览器，谷歌浏览器等。