让cube动起来

最新推荐文章于 2024-08-02 06:00:00 发布

yill_h

最新推荐文章于 2024-08-02 06:00:00 发布

阅读量1.2k

点赞数

文章标签： webgl 三维 three.js 计算机图形学

本文链接：https://blog.csdn.net/qq_23948283/article/details/51332483

版权

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

完整代码连接