基于Three.js模型屏幕适配的研究

2018-12-22 10:55钟志强李超
电脑知识与技术 2018年33期
关键词:浏览器摄像机网页

钟志强 李超

摘要:Three.js图形引擎为浏览器展示3D模型提出了很好的方案。文中首先介绍了通过Three.js向浏览器中展示3D模型的过程,然后详细叙述对展示过程中不同模型自适应居中的问题解决。

关键词:Three.js;三维;WebGL;屏幕适配;3D

中图分类号:TP311 文献标识码:A 文章编号:1009-3044(2018)33-0182-02

1 概述

随着互联网的技术不断发展,Web技术起到的作用越来越重要,一个好的网页对吸引用户起到了很大的作用。现如今,Web技术不再局限于2D界面了,更多的用户青睐3D界面带来的视觉冲击感,例如3D商品展示、3D网页游戏、3D博物馆。

该文主要研究3D模型展示。其实现主要分为两部分:一是分析浏览器展示3D模型的过程;二是如何让模型正确的适配各种屏幕大小不同的终端。

2 基于Three.js的3D模型展示

随着HTML5的普及,网页的表现能力越来越强大,浏览器提供了WebGL接口,可以通过调用对应API进行3D图形的绘制,Three.js在这些基础接口之上又做了一层封装,并且提供了各种模型加载器用来适配各种3D建模软件导出的模型,极大地减少了了对3D页面的开发难度[1]。利用Three.js在浏览器中展示3D的模型过程如下:

1)创建场景:存放所有需要的3D物体,在后面的各种部件都是存放在场景里面,相当于一个大三维容器。

2)添加相机:3D相机分为两种投影模式:

① 透视投影,这一投影模式被用来模拟人眼所看到的景象,它是3D场景的渲染中使用得最普遍的投影模式[2];

② 正交投影,在这种投影模式下,无论物体距离相机距离远或者近,在最终渲染的图片中物体的大小都保持不变。

3)添加光源:在初始的3D场景中是漆黑一片的,在如果没有加入光源的情况下。所以为了更好地展示3D模型得加入适合的光源,使得模型光泽亮人,光的类型也有很多种,比如环境光源、点光源。

4)添加渲染:渲染器是整个3D模型展示最核心的部分,也是整个引擎最核心的部分,它需要将3D物体模型绘制到屏幕上。

5)加载模型:Three.js提供了很多加载器,可以利用加载器加载需要的模型文件,然后在添加到场景中交给渲染器渲染。

6)加载材质与贴图:材质是模型的贴图,相当于人类的衣服,给模型加上材质是必要的,这样不会显得模型没有质感和美感[3]。材质也分为很多种,比如:Phong网格材质、基础网格材质等。

整个过程如图1所示,完成以整个操作以后一个3D模型就能展示在浏览器上了。

3 模型适配不同终端

现如今,科技越来越发达,人们的设备终端也随着科技发达变得多样化,以前只有PC端,到现在有PC端和移动端,在移动端上又有各种大小的屏幕,网页适配各种终端成了很大的问题[4]。,在3D模型展示的时候同样有一样的问题,我们需要把模型完整的展示在各种终端的屏幕中央,这才是我们理想的效果。

3.1 透视相机(PerspectiveCamera)

前面说过,透视相机(图2)是最普遍的相机,因为它能最接近自然的视图,符合近大远小的规律。

透视相机的参数解析:

fov — 摄像机视锥体垂直视野角度

aspect — 摄像机视锥体长宽比

near — 摄像机视锥体近端面

far — 摄像机视锥体远端面[5]

上面四个参数都会影响成像结果,fov和aspect参数设置场景成像的范围,也就是广度。near和far参数影响的是纵深,也就是深度。纵深只要确保模型离相机距离在这个范围内就可以了,由用户设置,只渲染我们需要的东西,可以节约性能。

这些参数设置好之后,成像结果就相应确定了。最后 three.js 把相机抓取到的区域对应好四个顶点渲染到屏幕上。同比例的屏幕看到的圖像是一致的,与屏幕大小无关

3.2 目标效果

在任何屏幕下,都能最大限度地显示完整的立方体。最大程度,就是保持纵横比缩放立方体,使立方体的长边能完全显示出来。也就是说,可以完整地将图片显示出来,且至少充满垂直或者水平屏幕。效果如图3:

3.3 适配屏幕解决

要想模型适配各种宽高比的屏幕,我们最先想到的肯定是改边相机(camera)距离物体的距离,这样是可以的,但是这个计算方法是复杂的,而且还可能影响其他的数值,造成不必要的影响,所以我们寻找另一种办法。

前面讲到fov是摄像机椎体垂直视野角度,所以可以用fov来控制成像内容,这里适配各种屏幕用的就是这个fov,用fov控制视野内容的原理如图4:

就这样我们可以把模型需要的缩放程度给计算出来,其实我们试过后会发现并不是我们想要的结果,模型并不会像我们想象的那样最大限度地显示,我们通过可以减小模型的Z轴长度会发现越来越接近我们的预想结果,其实导致这个原因的问题就是,模型默认是放在场景中心的,而我们计算场景成像平面(下图砖红色的平面)也是按照中心的计算的,这样会导致模型Z轴正方向的内容不完全显显示(图6),这也是导致我们与预计结果不同的原因。

要想解决这个问题其实很简单,开始计算成像平面是在原点计算的,现在我们把它转换成:原点 – 模型宽度 / 2,这样成像平面的计算就能把模型最靠近相机的那一端完全显示。设模型的长高宽分别为X,Y,Z,缩放程度为scale,计算如下:

到这里,模型的屏幕适配问题就解决了,现在模型可以适配任何大小不一样的屏幕,这是我们想要的效果。

8 结束语

模型展示早屏幕上面可能是简单的,让模型适配各种屏幕往往是困难的,就如同web页面需要适配各种屏幕一样,是一个比较难解决的问题,该文只是解决3D模型的简单屏幕适配,可能还有很多特殊情况存在,等着我们一一解决。

参考文献:

[1] 向俊. 基于WebKit浏览器WebGL的并行化图形渲染研究[D]. 成都: 电子科技大学, 2015.

[2] 陈自强. 透视投影研究[J]. 华东理工大学学报, 2000, 26(2): 201-205.

[3] 张竹悦. 优秀的贴图对游戏模型的重要性[J]. 卷宗, 2016(4).

[4] 王政达. 面向移动终端的网页适配测试平台的设计与实现[D]. 哈尔滨: 哈尔滨工业大学, 2013.

[5] PerspectiveCamera[EB/OL].https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera.

【通联编辑:谢媛媛】

猜你喜欢
浏览器摄像机网页
反浏览器指纹追踪
基于CSS的网页导航栏的设计
基于URL和网页类型的网页信息采集研究
摄像机低照成像的前世今生
新安讯士Q6155-E PTZ摄像机
环球浏览器
网页制作在英语教学中的应用
10个必知的网页设计术语
高清新阵营