threejs 使用陀螺仪实现手机端全景

在threejs中实现全景的方式有多种，其中有天空盒子，贴图反缩放，还有CSS3DRenderer渲染。
方法： CSS3DRenderer使用六幅图片绘制一个立方体盒子，将视角放置在其中，根据陀螺仪控制方向，移动视角。

首先两个引用包：

     <script src="js/controls/DeviceOrientationControls.js"></script>//陀螺仪相机控制器<script src="js/renderers/CSS3DRenderer.js"></script>//该渲染器需要单独引用

初始化陀螺仪相机控制器
该控制器只有唯一一个属性enabled，true为允许更新相机位置，false，禁止更新相机位置。

controls=new THREE.DeviceOrientationControls(camera);

定义图片的基本属性，路径，位置和旋转状态，以便六张图片组成一个立方体盒子

             var sides=[{//左url:'textures/cube/Bridge2/posx.jpg',position:[-512,0,0],rotation:[0,Math.PI/2,0]},{//右url:'textures/cube/Bridge2/negx.jpg',position:[512,0,0],rotation:[0,-Math.PI/2,0]},{//上url:'textures/cube/Bridge2/posy.jpg',position:[0,512,0],rotation:[Math.PI/2,0,Math.PI]},{//下url:'textures/cube/Bridge2/negy.jpg',position:[0,-512,0],rotation:[-Math.PI/2,0,Math.PI]},{//前url:'textures/cube/Bridge2/posz.jpg',position:[0,0,512],rotation:[0,Math.PI,0]},{//后url:'textures/cube/Bridge2/negz.jpg',position:[0,0,-512],rotation:[0,0,0]}                  ];

遍历绘制渲染添加

             var cube=new THREE.Object3D();scene.add(cube);for(var i=0;i<sides.length;i++){var side=sides[i];var img=document.createElement('img');img.width=1026;//多两个像素以缩小间隙img.src=side.url;var obj=new THREE.CSS3DObject(img);obj.position.fromArray(side.position);obj.rotation.fromArray(side.rotation);cube.add(obj);}

效果例子查看地址

threejs 使用陀螺仪实现手机端全景相关推荐

3d全景手机端导航菜单js特效
下载地址使用 three 和webAPP全屏模式制作手机端全景菜单,点击弹窗详情内容效果.支持360度旋转拖拽展示,点击菜单弹出文本内容.这是一款酷炫科技感的手机全景菜单展示特效. dd:
基于threejs,html5,hlsjs,flvjs编写vr全景播放器
好久没更新了,写一下我半年前写的vr播放器把,那时候的项目接到一个需求,需要实现VR视频播放,并能够播放直播.直播我熟,但是这个VR播放就涉及到我的知识盲区了. 于是开始开始研究threejs及相关方 ...
手机端创新体验——手把手教你搭建VRAR架构
声明:本文阿里巴巴技术论坛整理文章,首发于CSDN,未经许可,禁止任何形式的转载. 作者:袁岳峰,阿里移动平台虚拟&互动实验室负责人,GM Lab技术负责人. 责编:钱曙光,关注架构和算法领域 ...
unity 手机上获取手指触摸位置_Unity 操作检测的各种实现#2手机端 - 触屏与手势...
写在前面继续填坑了.这次是讲手机端. 电脑端 [ 按我跳转 ] 键盘按键控制 [ 上文内容 ] 鼠标点击控制 [ 上文内容 ] 手机端触屏控制 [ 本文内容 ] 手势控制 [ 本文内容 ] 重力控 ...
电商技术总结之SpringCloud+SpringBoot+mybatis+uniapp 前后端分离 b2b2c o2o 微服务商城电商之手机端首页模块设计分析
近期我参与了公司电子商务平台中"首页"模块设计, 电商平台首页功能大概分为几个区域,如下: 一.导航区域: 左上角定位入口搜索功能入口消息通知入口商品分类入口二.广告区域: ...
java版Spring Cloud+SpringBoot+mybatis+uniapp b2b2c o2o 多商家入驻商城直播带货商城电子商务手机端基础设置
1. 涉及平台平台管理.商家端(PC端.手机端).买家平台(H5/公众号.小程序.APP端(IOS/Android).微服务平台(业务服务) 2. 核心架构 Spring Cloud.Spring ...
Android系统手机端抓包方法
抓包准备 1. Android手机需要先获得root权限.一种是否获得root权限的检验方法:安装并打开终端模拟器(可通过安卓市场等渠道获得).在终端模拟器界面输入su并回车,若报错则说明未root, ...
android 反编译_Box 黑科技——支持手机端反编译
项目地址: https://github.com/lulululbj/Box 文末扫码获取最新安装包 . 前言有将近一个月没有更新文章了,一方面在啃 AOSP ,消化起来确实比较慢.在阅读的过程中, ...
服务器端往手机端推送数据的问题（手机解决方案）
1.方案一: 思路:使用socket连接,在手机端开个socketserver,然后服务器端连接手机端,实现服务器端的不定时发送数据. MIDlet关闭时, 你可以通过sms激活它. midlet运行 ...

threejs 使用陀螺仪实现手机端全景

threejs 使用陀螺仪实现手机端全景相关推荐

最新文章

热门文章