标签：
首先，我们用three.js让cube动起来。
Three.js是一个简化的webgl的js库,webgl可以在浏览器上创造一个完美的三维世界。webgl就是在浏览器实现三维效果的一套规范。绘制一个三维立方体，使用webgl需要100多行，而three.js只要10几行。
three.js使用最重要的东西：场景（scene），相机（camera），渲染器（renderer）。有了这三件东西，我们才能够使用相机将场景渲染到网页去。
场景是展示所有东西的容器。three.js场景只有THREE.Scene.构建场景用new即可。
相机就是决定场景展现的角度。
Three.js的六个基本步骤
1.设置three.js渲染器
2.设置摄像机camera
3.设置场景scene
4.设置光源light
5.设置物体object
6.书写主函数执行以上五步
三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。
首先我们来看第一个小例子。three.js源码大家可以点击下载
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
width:100%;
height: 100%;
}
</style>
<script src="three.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();
//场景
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
//相机这里我们创建了一个标准的透视相机，创建了一个场景和相机后，
// 最后我们需要输出画面，也就是渲染，这里我们可以使用WebGLRenderer
var renderer = new THREE.WebGLRenderer();
//THREE.WebGLBufferRenderer
//渲染器3d效果
//Three.CanvasRenderer2d效果
renderer.setSize(window.innerWidth,window.innerHeight,0.1,1000);
//?这里表示我们设定的渲染窗口，可以理解就是我们的相机
document.body.appendChild(renderer.domElement);
////这里表示名为domElement的元素是我们整个场景显示上去的东西，
// 而appendChild表示domElement是body标签的子节点
var geometry = new THREE.CubeGeometry(1,1,1);
//参数长宽高
var material=new THREE.MeshBasicMaterial({color:0x00ff00});
var cube=new THREE.Mesh(geometry,material);
scene.add(cube);
camera.position.z=5;
//相机离物体的距离
//我们将上面所添加的东西，输出到屏幕上，并进行实时渲染。
function render(){
requestAnimationFrame(render);
//requestAnimationFrame函数就是让render函数重复执行。
// 不断更新屏幕的数据，实时渲染
//render?-- render重复执行
cube.rotation.x+=0.1;
//沿着x轴不断旋转
cube.rotation.y+=0.1;
renderer.render(scene,camera);
}
render();
</script>
</body>
</html>
这样用浏览器打开就会看见一个旋转的cube。
要让cube动起来，还有一种方式就是利用css。大家可以参考这篇文章写的不错，css3d旋转。
css虽然 CSS 3D 并非真的 3D，CSS 3D 坦白说就是纯粹利用计算的方法，三维空间里的物体映射到二维平面。就像我们拿张约，用铅笔在上头画个正立方体之类的，也因为是借了浏览器的运算，自然而然非常地耗性能，往往只要有过多的形状转换为 3D 呈现，就会发现电脑的风扇开始狂转，这也是使用 CSS 3D 必须要注的地方，毕竟 CSS 原本就不是拿来做 3D 应用的技术，可以画 3D，只是可以加强 CSS 呈现的美感和能力，但用在精细的 3D 动画或转场效果，还是交给专业的 3D 绘图软件来。
3d图形中最重要的就是上面所说的相机，立体空间（场景），立体元素。然而在css里面这些东西都是不存在的。css里面都是用div替代。
一般有3类div，最外面为camera，第二层为scene，第三层为立体元素。
css中第一个重要的属性：transform-style属性；
transform-style：flat（默认，二维效果）/perserve-3d（三维效果）
translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px;
scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleY()。
rotateX(angle) 是元素依照x轴旋转；
rotateY(angle) 是元素依照y轴旋转；
rotateZ(angle) 是元素依照z轴旋转。
第二个重要的属性：perspective(length)透视景深效果、
当元素没有设置perspective(length)时，所有后代元素被压缩在同一个二维平面上，不存在景深的效果
当两个属性都设置，就会看见立体效果。
html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/styleex.css">
</head>
<body>
<div class="camera">
<div class="scene font">1</div>
<div class="scene back">6</div>
<div class="scene right">4</div>
<div class="scene left">3</div>
<div class="scene top">5</div>
<div class="scene bottom">2</div>
</div>
</body>
</html>
css
*{
padding: 0; margin: 0;
}
.scene
{
list-style:none;
}
.camera
{
width:200px;
height:200px;
margin:100px auto;
position:relative;
-webkit-transform-style:preserve-3d;
}
/*利用perspective，*/
.scene
{
width:200px;
height:200px;
position:absolute;
text-align:center;
line-height:200px;
font-size:80px;
font-weight:bold;
color:#fff;
}
.font
{
background:rgba(255,0,0,1);
-webkit-transform:rotateX(90deg) translateZ(100px);
}
.top
{
background:rgba(200,200,0,1);
-webkit-transform: translateZ(-100px);
}
.right
{
background:rgba(0,255,0,1);
-webkit-transform:rotateY(270deg) translateZ(100px);
}
.bottom
{
background:rgba(0,255,255,1);
-webkit-transform:rotateX(270deg) translateZ(100px);
}
.left
{
background:rgba(255,0,255,1);
-webkit-transform:rotateY(90deg) translateZ(100px);
}
.back
{
background:rgba(0,0,255,1);
-webkit-transform: translateZ(100px) ;
}
/*****当执行下列时，立方体自由旋转******/
.camera{-webkit-animation:run 5s linear infinite ;}
@-webkit-keyframes run {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg)
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg)
}
}
标签：
原文地址：http://blog.csdn.net/qq_23948283/article/details/51332483
