手记

基于HTML5和CSS3构建3D模型

作者:聚划算资深前端开发工程师 王鹏(花名:云数)


前言

关于CSS 3D的研究,其实早在2013年就开始了。无奈受限于当时的浏览器兼容性以及硬件性能等原因,对3D的一些探索也只是停留在DEMO阶段。这里可以参考我之前Github上的一个3D房屋模型DEMO

CSS 3D的应用是我们一直在思考的,虽然近几年来浏览器和硬件有了很大提升,但基于CSS 3D做复杂应用还是比较受限。目前基于CSS 3D更多的是做一些美感和效果展现,以及一些轻量级的应用。

我们聚划算前端团队在慕课网上开通了自己的主页,希望把我们的一些技术和想法拿出来跟大家进行分享和沟通交流,借此机会我先抛砖引玉,跟大家做这次分享。


言归正传。

今天要分享的话题是基于HTML5和CSS3构建3D模型,希望通过这次的分享,每个人都能够开启自己的3D之旅。主要有以下3点内容:

  1. CSS3基础知识
  2. 构建一个3D模型
  3. 3D模型模块化及扩展

CSS3基础知识

对于css的二维世界,相信大家都不陌生。在二维的世界里,我们可以对元素设置宽高、位置、旋转、背景等等。

在css三维世界里,扩展出了一个z轴,这个z轴垂直于屏幕并指向外面。如图,

基于这个三维坐标系,在二维基础上扩展一下我们的想象,如果一个元素可以绕着三个坐标轴进行平移、旋转会出线什么效果呢?

聪明的你肯定能够想象出来,在三维世界里,这个元素就变成立体的了。我们先不做演示,先来解释几个概念,Perspective,Transform、Translate和Transition(简称“三蠢”)

Perspective

Perspective在3D世界里是一个非常重要的概念,这个属性的设置决定了我们看到的是三维效果还是二维效果。Perspective的字面意思是透视、视角,计算机要模拟现实世界的三维效果,必须有一个虚拟摄像机(Camera)的概念,摄像机的移动代表现实世界中我们眼睛的移动,我们眼睛看到的真实物体有近大远小的效果,同样,虚拟摄像机的也要模拟出这样的场景。W3C解释是下图这样,透视点是物体到摄像机的距离(d), perspective设置的大小不同,人眼所看到的物体也会发生变化。

perspective-origin指摄像机的中心点位置,默认值是center center(或50% 50%)。换句话说,作为摄像机镜头的三个维度,perspective-origin代表了X和Y轴,而perspective代表Z轴。摄像机在三维空间进行移动,也就告诉浏览器也进行不同的渲染,而呈现给我们的就是不同的视角效果。

构建一个3D缺少不了3个要素,摄像机(Camera)、舞台(stage)和物体(Object)本身。我们先来创建这三个要素,代码如下:

<div class="camera">
        <div class="stage">
            <div class="box"></div>
        </div>
    </div>
    .camera {
        width: 200px;
        height: 200px;
        perspective: 500px;
        perspective-origin: center center;
    }

Transform

Transform指3D变换,主要的方法有旋转(Rotate)和平移(Translate)。Rotate可以绕X、Y、Z三个轴旋转,对应rotateX、rotateY、rotateZ三个方法。同样,坐标平移Translate也有tranlateX、tranlateY、translateZ三个方法。

在刚才的摄像机Camera设置完成后,我们需要设置一个立体空间,这个立体空间只有一个属性需要设置transform-style,默认清空下这个属性值被设置为flat,即在这个空间下的元素是没有z轴概念的,为了让元素都是立体元素,需要在这个立体空间上设置tranform-style的值为preserve-3d。

.stage {
        width:100%;
        height:100%;
        border:1px dashed #000;
        transform-style:preserve-3d;
    }

空间设置完成后,我们就可以来添加物体了,如上,我们设置了一个叫box的物体,下面我们来设置它的3D属性。

首先,我们对这个物体做3D平移

.box {
        width:100px;
        height:100px;
        background:#069;
        transform: translateX(50px) translateY(50px);
    }

然后,改变camera的perspective属性

无论我们如何修改perspective或者perspective-origin,竟然没有任何效果!这是为什么呢???

原因是在没有设置box的rotate、translateZ的情形下,box的深度没有变化,导致摄像机Camera透过perspective看出去的位置都是相同的,也造成不论怎么去看这个box都是一样的大小。

OK,那我们来设置box的translateZ,让box沿着Z轴做一些平移

.box {
        width:100px;
        height:100px;
        background:#069;
        transform: translateX(50px) translateY(50px) translateZ(150px);
    }

改变perspective属性

按照人眼睛看到的物体近大远小的原理,摄像机离物体的距离(perspective)越近,看到的物体越大,离得越远,物体越小。当摄像机已经透过物体之后,就看不到了。想象你有穿墙术,当你离墙很远的时候,你能看到墙的边缘,当你离墙越近,墙也就越大,当你穿过墙之后,墙在你身后,也就看不到了。

我们让box发生一些旋转,绕Y轴旋转45度

.box {
        width:100px;
        height:100px;
        background:#069;
        transform: translateX(50px) translateY(50px) rotateY(45deg);
    }

改变perspective-origin属性

Transition

最后我们来说一下Transition这个概念,Transition的意思是过渡,我们在做一些动画效果的时候会用到它。Transition是一个简写属性,用于设置4个过渡属性

  • transition-property(规定设置过渡效果的 CSS 属性的名称)
  • transition-duration (规定完成过渡效果需要多少秒或毫秒)
  • transition-timing-function(规定速度效果的速度曲线)
  • transition-delay (定义过渡效果何时开始)

语法

transition: property duration timing-function delay;

我们来做一个例子

.tst {
        transition: transform 2s linear 1s;
    }

然后把这个class设置在物体box上,任意改变box上一个Transform属性

可以看到这个变化是在设置完1s后(delay)在2s(duration)的时间内线性(linear)完成的((⊙o⊙)…有点绕口)。

构建一个3D模型

有了上面的概念之后,再来构建一个3D模型就非常简单了。通过对多个平面的平移、旋转,我们来构建一个Cube模型。

一个立方体有上、下、左、右、前、后6个面,我们先创建这6个面

<div class="camera">
        <div class="stage">
            <div class="cube up">up</div>
            <div class="cube down">down</div>
            <div class="cube left">left</div>
            <div class="cube right">right</div>
            <div class="cube front">front</div>
            <div class="cube back">back</div>
        </div>
    </div>

然后再设置每个面的Transform属性

.camera {
      width: 400px;
      height: 400px;
      perspective: 1000px;
      perspective-origin: center center;
    }
    .stage {
      width:100%;
      height:100%;
      border:1px dashed #000;
      transform: rotateY(0deg) rotateX(0deg);
      transform-style:preserve-3d;
    }
    .cube {
      position: absolute;
      left: 75px;
      top: 100px;
      margin-left: 30px;
      width: 200px;
      height: 200px;
      color: white;
      background-color: rgba(255, 85, 85, 1);
    }
    .up {
        background-color: rgba(48, 44, 102,1);
        transform: rotateX(90deg) translateZ(100px);
    }
    .down {
        transform: rotateX(-90deg) translateZ(100px);
    }
    .left {
        background-color: rgba(254, 56, 69,1);
        transform: rotateY(-90deg) translateZ(100px);
    }
    .right {
        transform: rotateY(90deg) translateZ(100px);
    }
    .front {
        background-color: rgba(100, 225, 180,1);
        transform: translateZ(100px);
    }
    .back {
        transform: rotateY(180deg) translateZ(100px);
    }

关于如何旋转及平移,大家可以自行思考,比如把front面作为参考面,其他面应该如何平移和旋转?这里不做细述,有问题可以留言。

注意:在进行旋转的时候,物体的坐标系也是跟着旋转的,所以先平移再旋转和先旋转再平移的效果是不一样的!这时候一定要分清楚当前坐标系!

最后,一个Cube模型就显示出来了!

是不是So easy?!老板再也不担心我做不出炫酷的效果啦!


3D模型模块化及扩展

道生一,一生二,二生三,三生万物。

像这样一个简单的立方体我们可以通过几个面的平移、旋转构建出来。那如果是一个复杂模型,如果也用这样的方式构建,可能就会带来很大的工作量。当遇到这样问题的时候,我们自然而然会考虑到代码的模块化与自动化实现,有了这个“道”,万事万物就可以由此衍生出来了。

下面我们尝试用代码的方式来生成一个立方体,Let's go!

class Cube {
        constructor(id, l, w, h, x, y, z) {
            this.id = id;//ID
            this.l = l;//长
            this.w = w;//宽
            this.h = h;//高
            this.x = x;//x坐标
            this.y = y;//y坐标
            this.z = z;//z坐标
        }
    }

通过ES6语法创建一个Cube类,构造参数分别有id、长宽高l、w、h和坐标x、y、z,然后需要创建这个Cube的DOM元素。

class Cube {
        constructor(id, l, w, h, x, y, z) {
            this.id = id;//ID
            this.l = l;//长
            this.w = w;//宽
            this.h = h;//高
            this.x = x;//x坐标
            this.y = y;//y坐标
            this.z = z;//z坐标

            this._create();
        }

        _create() {
            this.cube = document.createElement('div');//构建DOM节点
            this.faces = new Array(6);//构建六个面
            for(let i = 0; i < this.faces.length; i++) {
                this.faces[i] = document.createElement('div');
                this.faces[i].id = `${this.id}-face-${i}`;
                this.faces[i].style.position = 'absolute'; //必须
                this.faces[i].style.backgroundColor = "#"+((1<<24)*Math.random()0).toString(16);//生成随机颜色
                this.cube.appendChild(this.faces[i]);
            }
            this._setCubeStyle();
            this._setFrontFace();
            this._setBackFace();
            this._setLeftFace();
            this._setRightFace();
            this._setUpFace();
            this._setDownFace();
        }
    }

OK,现在我们Cube对象基本元素都有了。接下来我们需要设置6个面的样式,我们约定前、后、左、右、上、下分别对应faces数组中的6个面。

//设置cube样式
    _setCubeStyle() {
        let style = {
            'display': 'flex', //为计算方便,设置flex布局,想想为什么?
            'justify-content': 'center',
            'align-items': 'center',
            'transform-style': 'preserve-3d',
            'transform': `translateX(${this.x}px) translateY(${this.y}px) translateZ(${this.z}px)`
        }
        Object.assign(this.cube.style, style)
    }

    //设置Front面样式
    _setFrontFace() {
      let style = {
          'width' : this.l + 'px',
          'height': this.h + 'px',
          'transform': `translateZ(${this.w/2}px)`
      }
      Object.assign(this.faces[0].style, style)
    }
    //设置Back面样式
    _setBackFace() {
      let style = {
          'width' : this.l + 'px',
          'height': this.h + 'px',
          'transform': `rotateY(180deg) translateZ(${this.w/2}px)`
      }
      Object.assign(this.faces[1].style, style)
    }
    //设置Left面样式
    _setLeftFace() {
      let style = {
          'width' : this.w + 'px',
          'height': this.h + 'px',
          'transform': `rotateY(-90deg) translateZ(${this.l/2}px)`
      }
      Object.assign(this.faces[2].style, style)
    }
    //设置Right面样式
    _setRightFace() {
      let style = {
          'width' : this.w + 'px',
          'height': this.h + 'px',
          'transform': `rotateY(90deg) translateZ(${this.l/2}px)`
      }
      Object.assign(this.faces[3].style, style)
    }
    //设置Up面样式
    _setUpFace() {
      let style = {
          'width' : this.l + 'px',
          'height': this.w + 'px',
          'transform': `rotateX(90deg) translateZ(${this.h/2}px)`
      }
      Object.assign(this.faces[4].style, style)
    }
    //设置Down面样式
    _setDownFace() {
      let style = {
          'width' : this.l + 'px',
          'height': this.w + 'px',
          'transform': `rotateX(-90deg) translateZ(${this.h/2}px)`
      }
      Object.assign(this.faces[5].style, style)
    }

这样,一个Cube类就创建好了。我们来运行验证一下。

注意:代码采用ES6语法,在浏览器运行时需要Babel转码。

<div class="camera">
        <div id="stage" class="stage">
        </div>
    </div>

    .camera {
      width: 400px;
      height: 400px;
      perspective: 1000px;
      perspective-origin: center center;
    }
    .stage {
      width:100%;
      height:100%;
      border:1px dashed #000;
      transform: rotateY(30deg) rotateX(20deg);
      transform-style:preserve-3d;
    }

HTML代码很简单,这个时候我们只需要摄像机camera和空间stage两个元素,物体则由我们刚刚创建的Cube类生成。

let c1 = new Cube('c1', 100, 100, 100, 100, 200, 0);
    document.getElementById('stage').appendChild(c1.cube)

效果如下:


来创建一堆Cube,查看效果

let c1 = new Cube('c1', 20, 30, 40, 0, 100, 0);
    let c2 = new Cube('c1', 10, 20, 30, 0, 200, 0);
    let c3 = new Cube('c1', 20, 20, 50, 0, 250, 0);
    let c4 = new Cube('c1', 50, 50, 50, 0, 320, 0);
    let $stage = document.getElementById('stage');
    $stage.appendChild(c1.cube)
    $stage.appendChild(c2.cube)
    $stage.appendChild(c3.cube)
    $stage.appendChild(c4.cube)

俄罗斯方块出现了!

扩展

这次分享的内容就要结束了,回顾一下,我们讲解了CSS的基本概念、手动创建一个Cube模型以及如何通过模块化创建Cube对象。看完之后是不是觉得很简单?实际上这里面的原理确实不难,难的是我们如何应用这些来解决实际问题或者提升用户体验。

最后分享几个有意思的DEMO:

  1. 3D魔方(在线地址

  2. 3D俄罗斯方块(在线地址

  3. 3D立体书(在线地址)
105人推荐
随时随地看视频
慕课网APP

热门评论

大神,好酷666666666666

mark一下(⊙v⊙)

setInterval(function(){
	// 源码:"#"+((1<<24)*Math.random()0).toString(16);//生成随机颜色
	// 中间有个0,不知道是不是错了
	var num = ("#"+((1<<24)*Math.random()).toString(16)).substr(0,7);
	document.getElementById('box').style.cssText="background:"+num;
	console.log(num);
},1000);

http://img2.mukewang.com/5a12caa20001364d01660826.jpg

这种写法会出现一些无效的颜色值,不知道是不是个问题

查看全部评论