html5怎样引入三维模型,创建360度旋转浏览?

html-css06

html5怎样引入三维模型,创建360度旋转浏览?,第1张

html5中引入3d模型的方法是借助第三方PlayCanvas插件来完成的。

比如可以用以下方法实现图片的360度旋转:

代码示例:

var render, loop, t, dt, //定义变量

DEG2RAD = Math.PI / 180, //角度转弧度

cvs = document.querySelector('canvas'), //创建canvas

ctx = cvs.getContext('2d'),//绘制2d图形上下文

teddy = new Image(), //创建图像

heart = new Image(), //创建图像中心

angle = 0,//初始化角度为0

reqAnimFrame =

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.msRequestAnimationFrame ||

window.oRequestAnimationFrame

//创建动画帧

cvs.width = 400

cvs.height = 200

teddy.src = 'xxx.jpg'

heart.src = 'yyy.jpg'

//开始渲染

render = function (timestamp) {

dt = timestamp - t

t = timestamp

// cavas设置为白色

ctx.fillStyle = "rgb(255,255,255)"

ctx.fillRect(0, 0, cvs.width, cvs.height)

// 绘制中心

ctx.drawImage(heart, -20, -120)

// 绘制teddy

ctx.save()

ctx.translate(cvs.width/2, cvs.height/2)// 移动鼠标到画布中心

ctx.rotate(DEG2RAD * angle)// 旋转画布

ctx.drawImage(teddy, -teddy.width/2, -teddy.height/2)// 绘制中心图片

angle += dt / 16.67 * 6// increment angle ~ 360 deg/sec

ctx.restore()

}

loop = function (timestamp) {

reqAnimFrame(loop)

render(timestamp)

}

t = Date.now()

loop(t)

初识VRML

VRML(Virtual Reality Modeling Language,虚拟现实建模语言)是一项和多媒体通讯(Multimedia Communication)、因特网(Internet)、虚拟现实(Virtual Reality,VR)等领域密切相关的新技术,其基本目标是建立因特网上的交互式三维多媒体。VRML于1998年1月被正式批准为国际标准(ISO/IEC 14772-1:1997,通常称为VRML97),创立了标准化进程的ISO/IEC记录,它还是第一个用HTML发布的国际标准。

VRML是一种3D交换格式,它定义了当今3D应用中的绝大多数常见概念,诸如变换层级、光源、视点、几何、动画、雾、材质属性和纹理映射等等。VRML的基本目标是确保能够成为一种有效的3D文件交换格式。

VRML是HTML的3D模型。它把交互式三维能力带入了万维网,即VRML是一种可以发布3D网页的跨平台语言。事实上,三维提供了一种更自然的体验方式,例如游戏、工程和科学可视化、教育和建筑。诸如此类的典型项目仅靠基于网页的文本和图像是不够的,而需要增强交互性、动态效果连续感以及用户的参与探索,这正是VRML的目标。

VRML提供的技术能够把三维、二维、文本和多媒体集成为统一的整体。当把这些媒体类型和脚本描述语言(scripting language)以及因特网的功能结合在一起时,就可能产生一种全新的交互式应用。VRML在支持经典二维桌面模型的同时,把它扩展到更广阔的时空背景中。

VRML是赛博空间(cyberspace)的基础。赛博空间的概念是由科幻作家William Gibson提出的。虽然VRML没有为真正的用户仿真定义必要的网络和数据库协议,但是应该看到VRML迅速发展的步伐。作为标准,它必须保持简单性和可实现性,并在此前提下鼓励前沿性的试验和扩展。

CSS3除了为开发者提供二维变形之外,还将动画从二维平面推动到了三维立体状态,能够实现真正的三维特效。

三维变形和二维变形一样,均使用的是transform属性。想要触发三维变形有两种方式:一种方式是通过语法告知浏览器“请采用三维方式进行变形处理”,另一种方式是直接使用CSS3三维变形的语法。

触发方法1:告知浏览器变形方式

-webkit-transform-style:preserve-3d

Tips:IE不支持三维变形,在移动端,绝大多数的浏览器均为WebKit内核,因此,在此句代码之前需要书写-webkit-的前缀内核。

Tips:不要为body元素设置-webkit- transform-style: preserve 3d,否则会对position:fixed定位的元素造成布局影响。在开发当中,如果当前元素属于body的子级元素,又希望应用三维变形,则在body和当前元素之间多嵌套一层结构,并为这层元素应用三维变形即可。

触发方法2:直接使用CSS3变形语法

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>言成科技/title>

    <style>

        .box1 {

            width: 150px

            height: 150px

            border: 2px solid blue

        }

        .box1 div {

            height: 150px

            background: rgba(0, 0, 0, 0.5)

            -webkit-transform: translate3d(30px, 60px, 20px) rotateX(30deg)

            transform: translate3d(30px, 60px, 20px) rotateX(30deg)

        }

    </style>

</head>

<body>

    <div class="box1">

        <div></div>

    </div>

</body>

</html>

具体三维变形的具体属性详见《CSS3-3D相关知识详解—视角以及变形方向》

3D效果制作

需求

制作一个立方体,并进行旋转

代码实例

<!DOCTYPE HTML>

<html>

<head>

 <meta charset="utf-8" />

 <title>言成科技</title>

 <link rel="stylesheet" type="text/css" href="https://css.h5course.cn/reset-1.0.0.css" />

 <style>

  .main-bac { -webkit-perspective:1500 } /*设定透视距离*/

  .main{

   width:200px 

   height:200px 

   margin: 0 auto

   position:relative

   -webkit-transform-style:preserve-3d

   -webkit-transition:-webkit-transform 2s ease 0s/*过渡时间*/

  }

  /*基本样式*/

  .main p{

   position: absolute 

   margin: 0 

   padding: 0 

   width: 200px 

   height: 200px  

   text-align: center 

   line-height: 200px 

   font-size: 26px 

   opacity:0.5

  }

  /*将第一个元素Z轴向前移动100px,形成第一个面(正面)*/

  .main p:nth-of-type(1) {

   background-color:red

   -webkit-transform:translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px,绕x轴旋转90度形成上面的面*/

  .main p:nth-of-type(2) {

   background-color:orange 

   -webkit-transform:rotateX(90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px,绕x轴旋转-90度形成下边的面*/

  .main p:nth-of-type(3) {

   background-color:yellow

   -webkit-transform:rotateX(-90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px,绕y轴旋转90度形成右侧的面*/

  .main p:nth-of-type(4) {

   background-color:green

   -webkit-transform:rotateY(90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px,绕y轴旋转-90度形成左侧的面*/

  .main p:nth-of-type(5) {

   background-color:#b435bf

   -webkit-transform:rotateY(-90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px,绕y轴旋转180度形成后面(背面)*/

  .main p:nth-of-type(6) {

   background-color:blue

   -webkit-transform:rotateY(180deg) translateZ(100px)

  }

  /*鼠标移入时绕Y轴旋转180度,绕Z轴旋转180度*/

  .main:hover {-webkit-transform:rotateY(180deg) rotateZ(180deg) }   

 </style>

</head>

<body>

 <div class="main-bac">

  <div class="main">

   <p>言成科技</p>

   <p>3D立方体</p>

   <p>HTML5学堂</p>

   <p>3D立方体</p>

   <p>码匠</p>

   <p>JavaScript</p>

  </div>              

 </div>

</body>

</html>

代码解析

当鼠标移入的时候,立方体逐渐的发生旋转(非突变),围绕X轴旋转45度的同时,围绕Y轴旋转45度。

当鼠标移出立方体时,立方体恢复到初始状态。在最开始状态时,并没有采用无限远的视角,设置一定的视角,让刚开始时直视立方体时,不会觉得是一个平面。

3D效果制作-目标效果图

以上资料来源:《HTML5布局之路》