LOADING...
CSS3,3D之旅
公众文章 node与deno JavaScript面试
作者:TANGJIE 查看:66 发布时间:2020-05-26
简介: CSS3里的3d世界,同时给出了h5摇一摇的基本实现ts代码和旋转正方形css代码

CSS3,3D之旅

1.HTML5陀螺仪

我们可以让document监听deviceorientation 来获取相关的数据,里面包括3个值 alpha、beta和gamma。

a、alpha:移动设备水平放置时,绕z轴旋转的角度,数值为0度到360度
b、beta:移动设备水平放置时,绕X轴旋转的角度,数值为-180度到180度。
c、gamma:移动设备水平放置时,绕Y轴旋转的角度,数值为-90度到90度。

//获取旋转角度 window.addEventListener("deviceorientation",(event:any)=>{ console.log(event) },true)

一般初始化需要校准罗盘,放在获取旋转角度出错

//校准罗盘 window.addEventListener("compassneedscalibration",(event:any)=>{ console.log('校准罗盘逻辑') event.preventDefault(); },true)

重力加速度获取

//获取重力加速度 window.addEventListener('devicemotion',(event:any)=>{ //处理event.accleration //x(y,z):设备在x(y,z)方向上的移动加速度值 //event.acclerationIncludingGravity //考虑了重力加速度后设备在x(y,z)的移动加速度 //alpha,beta,gamma:设备绕x,y,z轴旋转的角度 },true)
1.1 设计一个H5摇一摇的代码
设计思想

a、 用户大多时候都是以一个方向为主晃动手机来进行摇动;
b、 在晃动时三个方向的加速度数据必定都会变化;
c、 我们不能误判手机正常的运动行为,想一想,如果你的手机放在裤兜里,走路时它也会有加速度数据变化。

综上,我们应该针对三个方向的加速度进行计算,间隔测量它们,考察它们在固定时间段里的变化率,而且需要为它确定一个阈值来触发动作。

ts 代码如下:引入了vconsole库方便手机端查看测试值

import VConsole from 'vconsole' new VConsole(); const SHAKE_THRESHOLD:number = 3000;//设置摇动阀值 let last_update:number = 0; interface Sitedot { x:number; y:number; z:number } let now_dot:Sitedot = { x:0, y:0, z:0 } let last_dot:Sitedot = { x:0, y:0, z:0 }; let init:()=>void init = ():void=>{ if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler, false); } else { console.log('not support mobile event'); } } let deviceMotionHandler:(event:any)=>void; deviceMotionHandler = (event:any):void =>{ let acceleration = event.accelerationIncludingGravity; let curTime = new Date().getTime(); console.log(event.interval) if ((curTime - last_update) > 100) {//设备移动 let diffTime = curTime - last_update; last_update = curTime; now_dot.x = acceleration.x; now_dot.y = acceleration.y; now_dot.z = acceleration.z; let speed = Math.abs(now_dot.x + now_dot.y + now_dot.z - last_dot.x - last_dot.y - last_dot.z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD) { console.log("摇动了"); } last_dot.x = now_dot.x; last_dot.y = now_dot.y; last_dot.z = now_dot.z; } } init()

3.css3、3D

3.1 旋转的3d正方体实现

html结构
code.png
less代码

//css重置代码省略 //正方体3d旋转变换 .quadrate_loadingbox{ position: fixed; top: 0;left: 0;right: 0;bottom: 0; z-index: 99999; background-color: #ffffff; .center{ position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -75px; } .loading_txt{ margin-top: 100px; text-align: center; } } .quadrate_loading{ //background-color: pink; width: 150px; height: 150px; position: relative; transform-style: preserve-3d; transform-origin: 50% 50% 0; transform: rotateX(-10deg) rotateY(10deg) rotateZ(10deg); animation: quadrate_loadings 5s linear; animation-iteration-count: infinite; li{ transform-origin: 0 0 0; width: 150px; height: 150px; line-height: 150px; text-align: center; float: left; background-repeat: no-repeat; background-position: center; font-size: 16px; position: absolute; top: 0;left: 0;right: 0;bottom: 0; opacity: 0.9; transform: translateZ(75px); svg{ vertical-align: middle; } } .top{ background-color: #1ABC9C; //left: 0;right: 0;top: 0; transform: rotateX(-90deg) translateY(-75px); } .bottom{ background-color: #34495E; transform: rotateX(90deg) translateZ(-150px) translateY(-75px); } .left{ background-color: #F39C12; transform: rotateY(90deg) translateX(-75px); } .right{ background-color: #9B59B6; transform: rotateY(90deg) translateZ(150px) translateX(-75px); } .front{ background-color: #3498DB; } .back{ background-color: #E74C3C; transform: translateZ(-75px); } } @keyframes quadrate_loadings { 0%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100%{ transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg); } }

代码地址效果点

3.2 常用的简单轻量级3D类库

基本css3的3d不在赘述,毕竟都是固定的api,去查找使用即可,列一下常用的库
a、parallax.js 视觉差库
b、css3d-engine css3d库

文章评论

历史评论

暂无评论,赶紧来抢沙发吧!