让cube动起来

首先,我们用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)
    }
}

完整代码连接




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值