1. David Wu首页
  2. web前端
  3. CSS

如何设计一个独特的移动3D用户界面和导航

在本教程中,我们告诉你如何建立一个增强的菜单,挂钩到移动的设备方向的一部分人控制,以创建一个three.js所定制的浏览体验 为移动设备创建引人注目的Web体验已经走过了很长的路要走,有手机功能的整体筏设计人员可以插入到和访问,而无需包装起来的移动网站作为一个应用程序。在本教程中正在取得的成就与本地移动网络将 WP网站建设

在本教程中,我们告诉你如何建立一个增强的菜单,挂钩到移动的设备方向的一部分人控制,以创建一个three.js所定制的浏览体验

20160301231656

为移动设备创建引人注目的Web体验已经走过了很长的路要走,有手机功能的整体筏设计人员可以插入到和访问,而无需包装起来的移动网站作为一个应用程序。在本教程中正在取得的成就与本地移动网络将是相当困难的设想作为一个应用回去短短几年,但现在这是作为一个移动优化的网站纯属运行。

该网站本身在3D和three.js所渲染,但不是这正与WebGL的渲染器渲染,现场将使用CSS3渲染,使我们与设备的最大兼容性呈现。拥有3D作为设计的一部分,将是该接口的重要组成部分。为了浏览界面,用户将需要旋转自己的手机和显示器将更新,将它们放置在增强接口的中心周围。围绕移动电话变得像在界面移动的照相机探索是对提供给用户的链接。这是通过捆绑有three.js所,可以把我们的手机变成类似于Oculus Rift以东西“设备方向控制”成为可能。

这是两部分教程的第一部分,创建接口,并得到设备的方向工作,我们将重点放在与问题243菜单中的互动。


得到的代码本教程

1.链接库

打开一个代码编辑器的“启动”文件夹,例如支架。在该文件的正文中,添加以下代码连接起来的库。它使用可从threejs.org的three.js所图书馆。在此之后是与那些需要在项目中一些全局变量开口的脚本。


</pre>
<pre><script src="js/three.min.js"></script>
<script src="js/DeviceOrientationControls.js"></script>
<script src="js/CSS3DRenderer.js"></script>
<script>
var camera, scene, renderer;
var circle1, circle2;</pre>
<pre>

2.设置场景

现在,该代码添加init函数,用于初始化现场。照相机被创建时,控制系统启动到设备取向控制运行。现在创建的场景相机和控制系统可以工作。最后的代码启动一个数组,这个包含的对象。

<pre>function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
controls = new THREE.DeviceOrientationControls( camera );
scene = new THREE.Scene();
var sides = [{
url: 'img/scene-right.jpg',
position: [ -512, 0, 0 ],
rotation: [ 0, Math.PI / 2, 0 ]
},{</pre>

3.创建背景

创建为3D场景天空盒将被创建,这是一个大的立方体置于所有其他对象的外侧的背景。此处的码,以便正确地查看框保持到各边,在3D场景内的各个位置和旋转的一个参考。

<pre>url: 'img/scene-left.jpg',
position: [ 512, 0, 0 ],
rotation: [ 0, -Math.PI / 2, 0 ]
},{
url: 'img/scene-top.jpg',
position: [ 0, 512, 0 ],
rotation: [ Math.PI / 2, 0, Math.PI ]
},{</pre>

 

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/6040

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注