前言 作为一个对UI和动画敏感的切图仔，在日常开发之余，也会关注一些贼好看的图表库和插件。 接下来，我将给大家介绍几款web/python/vue/react里漂亮得不行的开源库/实现。 ? 1....播放器里的颜值担当：Mini Music Player - VueJS ? 国外友人写的一个Vue.js音乐播放器，好看的不得了。 其中的交互和逻辑，也是非常精炼。...下载glTF格式（A框架提供glTF，OBJ两个格式官网建议使用glTF） 3....src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"> THREEx.ArToolkitContext.baseURL...部署你的应用。 5. 制作一个可供识别的二维码 ? 6. 制作一张实体卡片 ? 7. 扫一扫 ? 原文：AR 用 AR.js 做一個讓另對方 喔喔喔喔! 的小卡片吧!
document.getElementsByTagName('button'); btns[0].onclick=function() { console.log($(".father").width()); //元素到窗口的偏移位...console.log($(".son").offset().left); //元素到定位元素的偏移位 console.log($(".son").position().left
鼠标点击窗口获取焦点，在获取焦点时会显示9个锚点用于改变窗口的位置和尺寸。...import org.eclipse.swt.events.KeyAdapter; import org.eclipse.swt.events.KeyEvent; /** * 自定义透明窗口, * 窗口位置和尺寸可以通过鼠标和上下左右键修改...new Anchor(CURSOR_SIZENWSE,new Rectangle(0,0,1,1))};; /** * 矩形修改标记,为true时,处于鼠标拖动修改窗口位置和尺寸的状态...*/ private Point lastPos; /** * 真实的窗口位置和尺寸 */ protected Rectangle originalBounds...modify(int x,int y,Rectangle mask){ // 计算出新的窗口位置和尺寸 Rectangle bound = getBounds();
维基百科：通过虚拟增强的物理现实，呈现收敛性和物理持久性特征，基于未来互联网，具有链接感知和共享特征的3D虚拟空间。...市面上浏览器对 WebXR 的支持整体较弱，后面会介绍相关的兼容库和现成的解决方案。...苹果：WebARonARKit[7]（源自移动端 ARKit） 安卓：WebARonARCore[8]（源自移动端 ARCore） 主流AR 框架：目前维护和使用比较多的是 AR.js[9]，另外还有一些其他的...://aframe.io/releases/0.8.0/aframe.min.js"> <a-scene
维基百科：通过虚拟增强的物理现实，呈现收敛性和物理持久性特征，基于未来互联网，具有链接感知和共享特征的3D虚拟空间。...市面上浏览器对 WebXR 的支持整体较弱，后面会介绍相关的兼容库和现成的解决方案。...苹果：WebARonARKit（源自移动端 ARKit） 安卓：WebARonARCore（源自移动端 ARCore） 主流AR 框架：目前维护和使用比较多的是 AR.js，另外还有一些其他的： three.ar.js...="https://aframe.io/releases/0.8.0/aframe.min.js"> <a-scene
，关云长义释曹操》，玩家在一个5×4的棋盘上布置蜀国五虎上将和四卒围困曹操，共计10个棋子，通过滑动棋子帮助曹操移动到出口位置逃走。...模型的格式有很多种，目前 A-Frame 支持比较好的模型格式为 gltf(glb) 和 obj，更推荐使用 gltf 或 glb 格式的模型，因为它包含的信息种类丰富，但是冗余很少，所以体积容量小，就像是模型界的...图片5.4 动画gltf 模型支持关键帧动画，可以C4D中制作并导出，宝箱的开箱动画如下所示。而 A-Frame 动画的播放则需要借助 animation-mixer 组件实现，详情可以参考组件文档。...触发奖励开宝箱每次在执行棋子移动后，都会判断曹操的位置是否到达棋盘最底部中间的位置，若到达该位置，游戏结束，并为宝箱模型实体添加 animation-mixer 组件来播放开箱动画，当看到这个古装人物模型的奖励...这是一种适用于棋类游戏的棋局编码方式，通过建立一个特殊的转换表，对棋盘上每一个位置的所有可能状态赋予一个绝不重复的随机编码，通过对不同位置上的随机编码进行异或计算，将复杂的棋局编码为一个整数类型哈希值，
大规模自制城市模型和webgis对齐一直是一个高频问题。首先复现问题：一、复现问题如图cesium加载了一个天津市gltf模型，整体尺寸较大。...拉近地图，在模型中心位置，建筑物和地面影像很好的重叠，并且贴合地面。当拉到模型边缘位置时，发现建筑物是悬浮的（没有贴合地面）！并且没有和卫星影像重合！...这些软件导出的大尺寸模型，不适合在webgis引擎上使用。三、如何解决根据第一性原理，既然建筑模型中心位置可以对齐webgis，大尺寸不行，那我们把模型尺寸做小点不就可以了？...在测试中发现5000米是一个较好的临界值。小于5000米会对齐的更准确，同时分的块也就越多。软件支持对gltf模型使用draco批量压缩，减少模型体积。...Geobuilding会导出建筑物的gltf模型序列，并有每个模型的经纬度坐标，并给出模型浏览演示文件代码demo.html演示文件是基于Cesium展示。
下面是一个使用 HTML 搭建的完整的 3D 和 VR 场景，它能够在诸如桌面设备和移动设备等任何 VR 平台运行： <script src="https://<em>aframe</em>.io/releases/0.5.0...我们将搭建一个基本<em>的</em> VR 立体像素制作器（voxel builder），它主要用于支持<em>位置</em>追踪（positional tracking）<em>和</em>追踪控制器（tracked controllers）<em>的</em>空间追踪...左手负责移动<em>位置</em>，右手负责放置砖块。...，当按住左手控制器按钮时，从控制器显示一条弧线，松开手时，瞬移到弧线末端<em>的</em><em>位置</em>。...A-Frame 提供基于注视点<em>的</em>光标（注：就像 FPS 游戏<em>的</em>准心那样），可以利用此光标点击正在注视<em>的</em>物体，但也有可用<em>的</em>控制器光标组件来根据 VR 追踪控制器<em>的</em><em>位置</em>发射激光，就像刚刚使用 teleport-controls
WebAR解决方案的范围很广，既可以使用设备的陀螺仪/加速度计传感器作为背景，也可以使用相机输入，也可以使用更复杂的解决方案，例如AR.js，TensorFlowJS和USDZ。...AR.js是开源的，不需要任何特殊的应用程序，它可在默认浏览器中运行。 为了讨论AR.js及其对WebAR的含义，值得快速浏览一下为框架提供支持的组件。...AR.js为移动网络提供了前进的脚，并可以与基于应用程序的AR竞争。 看一下苹果和谷歌的努力，我们看到他们已经采取了一些措施，以实现3D模型与其各自的移动浏览器之间更深层次的集成。...Google希望将基于Web的AR放在首位。 我将假设Google使用与Poly项目类似的文件类型.obj以及.glTF文件格式。...回到我前面提到的AR广告展示位置；当时最大的争斗集中在浏览器兼容性上。迄今为止，基于Web的AR体验仍然是一个问题。
效果展示 支持不同位置展示不同描述：配合数据配置渲染不同桢的效果 根据选中的产品，切换相应产品效果 根据选中场景，切换相应的场景 实现思路 封装一个Three的函数，支持设置相机、场景、渲染函数，添加模型解析器...this.camera.position.set(-1.8, 0.6, 2.7); } 渲染：根据相机位置和场景图渲染初始画面 render() { this.renderer.render...，结合动画，可以进行产品的预览 添加窗口监听事件 调整页面窗口时，保证场景的全屏展示 // 监听场景大小改变，调整渲染尺寸 window.addEventListener("resize", this.onWindowResize.bind...：配合数据配置渲染不同桢的效果 根据选中的产品，切换相应产品效果 根据选中场景，切换相应的场景 总结 通过类的方式创建的方法，能够很好的保存了创建过程中3D模型的所具备的属性和功能，在实例化后，可以很便捷的获取到相应的属性...在创建场景/模型时，可以根据要突出的效果调整相应的参数，我们可以认真观察创建出来的实例对象中包含的属性和方法，方便我们渲染使用 参考包/支持 Three.js[2] 本项目参考视频[3] 源码[4]
FIFO，以保证每次从FIFO中取出的音频帧尺寸和编码器帧尺寸一样。...音频FIFO输出的音频帧不含时间戳信息，因此需要重新生成时间戳 引入音频FIFO的原因：如果编码器不支持可变长度帧，而编码器输入音频帧尺寸和编码器要求的音频帧尺寸不一样，就会编码失败。...解决这个问题的方法有两个，一是进行音频重采样，使音频帧转换为编码器支持的格式；另一个是引入音频FIFO，一端写一端读，每次从读端取出编码器要求的帧尺寸即可。...使用音频fifo，从而保证每次送入编码器的音频帧尺寸满足编码器要求 // 3.1 将音频帧写入fifo，音频帧尺寸是解码格式中音频帧尺寸 if (!...的单位是AVStream.time_base，不同的封装格式其AVStream.time_base不同 // 所以输出文件中，每个packet需要根据输出封装格式重新计算pts和
AR.js 简单三个步骤即可完成AR的部署，最后可以直接生成一个链接或者下载源文件代码。 ? 案例：用于研究解剖学的增强现实书籍。...AR.js Studio是一个能够让大众免费构建Web AR而无需编写代码的一个网站。...首先，需要用户选择项目类型，（在上图中，分为“基于标记”和“基于位置”），若我选择了Marker-based，那么我就可以自定义标记码，并绑定我要显示的内容。...基于AR.js studio的Marker的流程 基于位置，可以添加定义经度和纬度的位置，或者通过从地图中选择一个位置。 ?...基于AR.js studio的Location的流程 最终，代码将会自动帮你生成，你可以添加和部署到你任意想要插入的地方。
教育和娱乐 WebAR在教育和娱乐领域有广泛的应用。学校可以使用WebAR来创造更具吸引力的学习体验，而娱乐行业则可以提供令人兴奋的游戏和娱乐内容。 5....a-box position="0 0.5 0" material="color: red;"> 上述代码使用了WebAR库AR.js...DOCTYPE html> WebVR示例 WebVR示例 <a-box position="...沉浸式体验<em>的</em>未来 WebAR<em>和</em>VR代表了前端开发领域<em>的</em>未来趋势，它们将为用户提供更加沉浸式<em>和</em>交互式<em>的</em>体验。这些技术<em>的</em>发展也为开发者提供了新<em>的</em>机会，可以创建令人惊叹<em>的</em>应用程序<em>和</em>内容。
下面是园区和楼层的部分截图，数据已脱敏： 图片 图片 首先我们可能会想到的是减少图片的尺寸。但是减少图片尺寸也是有限度的，因为图片尺寸太小的话，会影响我们最终的呈现效果。...严格来说，DDS和kTX是一种容器而不是格式，而压缩纹理的格式是有多种。此处为了简便起见，我们就说成DDS和KTX格式，我们知道KTX有2.0的版本。...而我们最终选用的也就是ktx2.0，它能够很方便的和gltf模型格式进行集成。 有关压缩纹理的更多知识，大家可以在网上搜索啊，此处不进行详细的介绍。...然后通过obj2gltf 进行模型的转换，其中 -i表示输入的OBJ模型。-o就是输出的gltf模型。 转换为gltf之后，通过对gltf进行压缩。...当然降低显存，还有许多更多的手段，比如建模过程中降低模型的面数，减小贴图的尺寸，禁用mipmap，能复用的模型尽量复用等等。 结语 本文讲述了降低显存的一种手段，压缩纹理。
本文将从模型网格和贴图文件两方面分析，介绍几种通过技术角度优化加载速度和提高渲染性能的途径，在保证 3D 模型不减面，贴图不缩小的情况下，将模型精致地还原在 H5 或其他应用程序中。...glTF 导出格式有两种后缀格式可供选择：.gltf 和 .glb： - .gltf 文件导出时一般会输出两种文件类型，一是 .bin 文件，以二进制流的方式存储顶点坐标、顶点法线坐标和贴图纹理坐标、贴图信息等模型基本数据信息...另外经过压缩的 glTF 文件仅为正常 FBX 和 glTF 文件的1/10左右，而在视觉上三者几何体结构没有明显的差异，压缩后的 glTF 开启了 worker 线程做 Draco解码，多了一小部分模型解码时间...此时则需要将模型和贴图分开进行处理（建模时分开输出一个打好 UVtag 纹理坐标的“白模”和需要用到的纹理贴图）。下面介绍如何优化用于应用程序渲染的贴图文件。 1....贴图加载过程分析 以一个基于物理引擎渲染的电视机 Demo 模型为例，一般会输出几种尺寸较大的贴图文件：颜色贴图，法线贴图，金属粗糙贴图，如下图例子所示： ?
3D场景中的相机类似于现实生活中的人眼的功能。相机拍摄一个物体的时候相机的位置和角度需要设置，虚拟的相机还需要设置投影方式。...这种投影的视景体是一个矩形的平行管道，也就是一个长方体，如图所示。正射投影的最大一个特点是无论物体距离相机多远，投影后的物体大小尺寸不变。 ?...注：图片来自网络（http://m.dingjisc.com） 正投影通常用在建筑蓝图绘制和计算机辅助设计等平面图形方面，这些行业要求投影后的物体尺寸及相互间的角度不变，以便施工或制造时物体比例大小正确...因此计算点光源的光照，我们要先根据光源位置和物体表面相对位置来确定方向，然后再和平行光一样，计算光的方向和物体表面法向的夹角。...-i model.gltf -o model.glb gltf-pipeline -i model.gltf -b 压缩之后，glb文件的体积会减少80%左右，所以在加载速度和效果呈现上会比原始的GLTF
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
