三 射流研究…实现炫酷的全景三维(三维的缩写)重力感应

本文实例为大家分享了三。射流研究…全景重力感应的具体代码，供大家参考，具体内容如下

实现三。射流研究…全景图演示

使用三。射流研究…写了球体和圆柱体版本的三维(三维的缩写)重力感应全景图，支持手指触摸和陀螺仪感应，也支持个人电脑端的鼠标。给大家介绍一下基于移动端H5球体的实现方法，圆柱体类似。

设置容器和展示的样式设置容器的宽高为全屏展示，清除身体的保证金，引用三分之一(3D渲染框架)和orienter.js(陀螺仪经纬度计算)

div id=' CanvasBody '/div脚本src=' http : js/three。量滴js '/脚本！-重力感应-script src=' http : js/orienter。js '/脚本！-动画效果-脚本src=' http : js/tween。js '/脚本！-代码-车身{ margin : 0；}html，body，# CanvasBody { width: 100vw高度： 100 VH飞越：隐藏；} # CanvasBody {位置：相对；}设置超文本标记语言的数据-dpr属性，设置超文本标记语言的字体大小

设置超文本标记语言的字体大小，重新计算身体的实际可展示尺寸，这样可以使渲染出来的画面更清晰，分辨率最完美。

（函数(_ window){ var navigatorseragent=navigator。用户代理；var iPhone=navigatorseragent。indexof(' iPhone ')；如果(iPhone-1){ var DPR=Number(窗口。devicepixel ratio)，one_dpr=1/dpr } else { var dpr=1，one _ DPR=1 } var write text=' meta name=\ ' viewport ' content=\ ' width=device-width，初始比例=' one_dpr '，最大比例=' one_dpr '，最小比例=' one_dpr '，用户可缩放=否\'\n元名称=\ '灵活content=\'initial-dpr=' dpr '文档。write(write text)；var html=文档。getelementsbytagname(' html ')；var F0=75html[0]。setAttribute('data-dpr '，DPR)；var get font size=function get font size(){ var window width=window。内宽；html[0]。风格。font size=F0 *窗宽/750 ' px ' }；getfont size()；_窗口。addeventlistener(' resize '，getFontSize，false)})(window)；定义相关变量

定义变量摄像机，//摄像机场景，//舞台渲染器，//渲染器isUserInteracting=false，//用户是否正在操作onMouseDownMouseX=0，onMouseDownMouseY=0，//鼠标点击的x和Y坐标lon=0，onMouseDownLon=0，onPointerDownLon=0.0，onPointerDownPointerX=0，//经度lat=0，onMouseDownLat=0，onPointerDownLat=0.0，onPointerDownPointerY=0，//纬度=0,=0,//计算相机位置的重要参数o=新的Orienter()，//陀螺仪方法对象新_经度=0，最后_经度=0，移动_经度=0,//改变的经度的计算new_latitude=0，last_latitude=0，move_latitude=0，//改变的纬度的计算is_touch=false，is_start=false，isPlay=true，isMusicPlay=true，tsa=100.1，ppl=var raycaster=new THREE .ray caster()；//拾取场景里面的物体，可判断点击或交互事件对应的元素var mouse=new THREE .向量2()；//二维向量的对象，鼠标计算初始化舞台的元素和内容

图片的长宽控制在4096像素以内，部分机型性能不够，渲染不了超大的图片

函数init() {/**初始化**/var容器，网格；//容器和素材容器=文档。getelementbyid(' CanvasBody ')；//容器相机=新的三。透视摄像机(72、窗口。内部宽度/窗口。内部高度，0.01，1100)；//相机相机.目标=新的三.Vector3(0，0，0)；//相机位置场景=新三。场景();//舞台场景。updatematrix world(true)；变化几何=新三。球面测量法(1,32,16);//球体几何。比例(1,1,-1);//设置球体的背景贴图var textureBg=new THREE .TextureLoader().负载(' img/BG。jpg’)；纹理BG。generateimpmaps=true纹理过滤器=三LinearFilter//设置贴纸素材的质量纹理过滤器=三线性滤波器材料=新的三.meshebasic material({ map : texture bG，//圆柱体贴图，全景图//color:0xFF0000，//transparent : true })；mesh=new THREE .网格（几何、材料);//这里可以设置对应的动画效果//新的TWEEN .补间（网格)。to({ transform : ' rotate(90度)' },800)。重复（错误)。延迟(300)。yoyo(真的)。放松(TWEEN .放松。立方英寸输出)。start()；scene.add(网格);//旋转预设摄影机看到的角度Start//scene.rotation.set(0，0，0)；//首頁//初始化渲染器，追加到容器渲染器=新的三.WebGLRenderer({ precision : ' high p '，mipmap: 'highp '，anti IAS : false })；//加上精确和贴图参数，调整画面清晰度渲染器。设置像素比率(窗口。devicepixel比率)；//设置像素比渲染器。setsize(窗口。内部宽度，窗户。内部高度)；//设置渲染窗口的大小集装箱。appendchild(渲染器。圆顶元件)；//追加到容器中去//鼠标、手机触控的各个事件文件。addeventlistener('鼠标向下'，onDocumentMouseDown，false)；文件。addeventlistener(' mousemove '，onDocumentMouseMove，false)；文件。addeventlistener('鼠标向上'，onDocumentMouseUp，false)；文件。addeventlistener(' touch start '，onDocumentTouchDown，false)；文件。addeventlistener(' touch move '，onDocumentTouchMove，false)；文件。addeventlistener(' touch end '，onDocumentTouchUp，false)；//文档。addeventlistener(' wheel '，onDocumentMouseWheel，false)；//文档。addeventlistener(' drag over '，function(event){ event。prevent default()；事件。数据传输。DropFeature=' copy}，false)；文件。addeventlistener('拖动回车'，函数(事件){ document。尸体。风格。不透明度=0.5；}，false)；文件。addeventlistener('拖动离开'，函数(事件){ document。尸体。风格。不透明度=1；}，false)；文件。addeventlistener(' drop ')，函数(事件){事件。prevent default()；var reader=new FileReader()；reader.addEventListener('load '，function(event){ material。地图。图像。src=事件。目标。结果；材料。地图。needsupdate=true}，false)；读者。readasdataurl(事件。数据传输。文件[0])；文件。尸体。风格。不透明度=1；}，false)；}监听的各事件和方法

//监听横竖屏重新设置尺寸函数onWindowResize(){相机。aspect=窗口。内部宽度/窗口。内部高度；照相机。updateprojectionmatrix()；渲染器。setsize(窗口。内部宽度，窗户。内部高度)；}函数onDocumentMouseDown(事件){事件。PreventDefault()；isUserInteracting=TrueOnpointerDownpointerx=event。clientxonPointerDownPointerY=事件。客户关系；onPointerDownLon=lononPointerDownLat=lat//单击动作鼠标。x=(事件。客户端x/渲染器。DOM元素。客户端宽度)* 2-1；老鼠。y=-(事件。客户端/渲染器。DOM元素。客户端高度)* 2 1；raycaster.setFromCamera(鼠标、相机);var interverses=ray caster。相交对象(场景。子对象);//第一个是最上面一层的元素console.log('点击的元素，相交);如果(面试官。长度0){//如果点到小圆点就执行回调函数回调函数为goto_p try {交集[0].对象。回调()；} documentmousemove(事件)上的catch(err){ } }函数{ if(isusserinteraction===true){ lon=(OnPointerDownpointerx-event。client x)* 0.1 OnPointErDownLon；lat=(事件。client y-OnPointerDownpointery)* 0.1 OnPointerDownLat；} }函数onDocumentMouseUp(事件){ isusserinteracting=false} //触摸事件开始函数onDocumentTouchDown(事件){ is _ touch=trueevent。prevent default()；isUserInteracting=TrueOnpointerDownpointerx=event。触摸[0].clientXonpointerDownpointery=事件。触摸[0].client iF(is _ start){ OnPointerDownLon=lon；onPointerDownLat=lat} //对于点击动作鼠标。x=(OnPointErDownPointErx/渲染器。DOM元素。客户端宽度)* 2-1；老鼠。y=-(onpointerDownpointery/渲染器)。DomElement。client height)* 2 1；raycaster.setFromCamera(鼠标、相机);var interverses=ray caster。相交对象(场景。子对象);控制台。日志(“触摸”，lon，lat)；if(交叉点。长度0){尝试{交集[0]。对象。回调()；} documenttouchmove(事件)上的catch(err){ } }函数{ if(is _ start){ if(isUserInteracting===true){ lon=(onpointerDownpointerx-event。塔奇[0]).客户端x)* 0.1 OnPointErDownLon；lat=(事件。触摸[0].客户端y-onpointerDownpointery)* 0.1 onpointerDownLat；} } }函数onDocumentTouchUp(事件){ is _ touch=false}//touch事件结束//在documenttouch down 2上设置功能(事件){ TSA=事件。触摸[0].clientYconsole。日志(' @ : '事件。触摸[0].clientY)；事件。prevent default()；}函数在documentmousewheel(事件){ camera。FOV=事件。* 0.05照相机。updateprojectionmatrix()；}动画播放和陀螺仪

函数animate() {//播放动画if(isPlay){ TWEEN。update()；update()；requestAnimationFrame(动画);} } o.onOrient=function (obj) {//重力感应计算角度if(is_start){ //最新经度新_经度=obj.lonmove _经度=新_经度-最后_经度；//最新纬度new _ lation=obj . lat move _ lation=new _ lation-last _ lation；//判断经纬度如果(移动_经度=300){ move _经度=移动_经度-361;} else if(move _经度=-300){ move _经度=移动_经度359;} if(move _ latitude=300){ move _ latitude=move _ latitude-361；}否则if(move _ latitude=-300){ move _ latitude=move _ latitude 359；} if(is _ touch){ move _经度=0;move _ latitude=0；} else { move _经度=移动_经度* 0.6;move _ latitude=move _ latitude * 0.6；} //计算得出重力感应的经纬度lon=lon-移动_经度；最后_经度=obj . lon lat=lat-move _ latitude；last _ latitude=obj.lat } }函数更新(){//更新摄像机位置，旋转平移//lat=Math.max(-6，Math.min(6，lat))；//设置拉脱维亚的货币单位纬度的范围，只在一个范围内旋转=三数学。脱气(90-lat)；=三数学。de gtorad(lon)；照相机。目标。x=500 *数学。sin()*数学。cos()；//X轴的坐标照相机。目标。y=500 *数学。cos(phi)；//y轴的坐标照相机。目标。z=500 *数学。sin()*数学。sin()；//z轴的坐标照相机。看(相机。目标)；renderer.render(场景、摄像机);//重新渲染}执行所有

//执行所有is _ start=true init()；o . init()；animate()；综上，炫酷的三维(三维的缩写)重力感应H5就出来啦！

源码开源代码库

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。