vivo官网 Web 3D 实战
前端围城
共 6856字,需浏览 14分钟
· 2021-08-18
作者:vivo 官网商城前端团队-Ni Huaifa
一、 前言
前言 2D数据可视化 3D(2D+1D)数据可视化 vivo官网3D应用实战 总结
二、 2D数据可视化
2D数据可视化是指利用二维平面图表对数据进行组织处理、呈现的一种方式。讲到图表,大家首先想到的可能是我们日常用过柱状图,折线图等展示形式的图表图形。比如下面这种:
三、3D(2D+1D)数据可视化
3D数据可视化可以理解为在2D数据可视化的基础上增加了Z轴的维度,使数据呈现从二维平面扩展到三维立体结构。是一种新的管理、分析和交互数据的方式,并且能实现实时反射、实时折射、动态阴影等高品质,逼真实时渲染3D图像。
目前可见的3D数据可视化应用领域有智慧城市、汽车、手机模型展示等。
1)JavaScript: 处理着色器需要的顶点坐标、法向量、颜色、纹理等信息,并为顶点着色器提供这些数据 2)顶点着色器: 接收 JavaScript 传递过来的顶点信息,将顶点绘制到对应坐标 3)光栅化阶段: 将图形内部区域用空像素进行填充 4)片元着色器: 为图形内部的像素填充颜色信息 5)渲染: 渲染到Canvas对象
四、vivo官网3D应用实战
利用渲染库进行模型的渲染实现可以大大降低我们的学习成本,并且能够完成WebGL所能实现的几乎一切功能。常用的一些3D渲染库有:ThreeJs、BabylonJS、SceneJS以及CesiumJs;
模型文件其实是一个包含了顶点坐标、索引(index)、UV、法线、节点关系、材质、贴图、动画等信息的数据集合。不论模型格式如何,但是其本质就是对上述信息的编排和组织。各种模型之间的区别无非是组织的方式不同,有些用纯文本(OBJ),有些用json(GLTF),有些用二进制(FBX)。
1)OBJ模型对于动画的支持不是特别友好,而手机在做3D展示时需要进行一些模型的拆解动画展示。
2)FBX 由于不同引擎解析的规范不同,导致不同引擎渲染出的效果差别较大
3)GLTF(GLB) 模型格式扩展性较高,ThreeJs、Babylonjs等WebGL渲染引擎的支持性较好
平行光是朝着某个方向照射的光,光线中的每一个光子与其它光子都是平行运动的。举个例子,阳光就可以认为是平行光,平行光只能照亮物体的一部分表面。
let texture = await Loader.loadImg(panoramicImg)
texture.encoding = THREE.sRGBEncoding
let sphereGeometry = new THREE.SphereGeometry(3000, 160, 160)
sphereGeometry.scale(-1, 1, 1)
let sphereMaterial = new THREE.MeshBasicMaterial({ map: texture })
let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
// 设置材质对象的纹理贴图
this.bgMap = sphere
this.stage.scene.add(this.bgMap)
npm install -g gltf-pipeline
Converting a glTF to glb
gltf-pipeline -i model.gltf -o model.glb
gltf-pipeline -i model.gltf -b
// Instantiate a loader
const loader = new GLTFLoader();
// Optional: Provide a DRACOLoader instance to decode compressed mesh data
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/examples/js/libs/draco/' );
loader.setDRACOLoader( dracoLoader );
五、总结
看完两件事
如果你觉得这篇内容对你挺有启发,我想邀请你帮我两件小事
1.点个「在看」,让更多人也能看到这篇内容(点了「在看」,bug -1 😊)
评论
大学官宣!6位辅导员晋升至副处级岗位
来源:麦可思研究整理自人民网、各省教育厅网站、各高校网站 编辑:学妹近日,安徽工业大学针对思政队伍建设做了相关介绍。该校提到学校每年常态化科级干部考核竞聘,近80%辅导员晋升科级岗位;在近两轮处级干部选聘中,6位80后辅导员晋升至副处级辅导员岗位,4
机器学习初学者
0
5000w+ 的大表如何拆?亿级别大表拆分实战复盘
前言笔者是在两年前接手公司的财务系统的开发和维护工作。在系统移交的初期,笔者和团队就发现,系统内有一张5000W+的大表。跟踪代码发现,该表是用于存储资金流水的表格,关联着众多功能点,同时也有众多的下游系统在使用这张表的数据。进一步的观察发现,这张表还在以每月600W+的数据持续增长,也就是说,不超
码农编程进阶笔记
0
网红台妹 | 咪啦,甜美又性感的顶级美女模特
今日女神推荐:咪啦,网名昵称:咪啦,她是一位来自中国台湾省的网红美女、平面模特,目前在外网的ins上面,她是一位坐拥10多万粉丝关注的人气网红美女。1995年11月29日出生于中国台湾省的她,拥有一张纯天然的完美脸蛋,她的五官长相精致好看,笑容甜美迷人,在网红圈和模特圈有着不俗的人气,妥妥的一位甜美
逆锋起笔
0
OpenUI:输入一段文字就能生成网!页!!
今天给大家介绍一个开源的 AI 网页生成工具:OpenUI!!!前言 在软件开发领域,用户界面(UI)的设计和构建确实是一个至关重要的环节。传统的 UI 开发需要设计师和开发人员紧密合作,通过反复的设计、修改和测试来达到理想的效果,这个过程往往耗时且成本较高。随着 AI 技术的发展,现在有越来越多的
前端技术江湖
0
互联网晚报 | 大麦网已退款凤凰传奇演唱会“柱子票”;钟薛高再成被执行人;iPhone 16或取消实体音量键和电源键
大麦网回应凤凰传奇演唱会买到“柱子票”:已退票退款据报道,凤凰传奇2024巡回演唱会常州站演出结束的第二天,有网友称自己在大麦网买到“柱子票”,因为观看效果不佳,要求退款被拒。23日,记者从涉事网友处了解到,大麦方面给出了退款建议,但被其拒绝,“我希望平台退款加赔偿,并重视屡次出现的‘柱子票’问题。
产品刘
0
【每周一课#06】MidJourney应用实战
#AI绘画# #MJ# #文生图#时间:4月24日周三 21:00课程大纲:1、关于AIGC:概念、发展历程、就业前景2、MJ基础认识:如何使用、底层逻辑、MJ与SD优缺点比较3、MJ基础功能介绍:任务指令、后缀参数、图生图、图生文、垫图、局部修改等4、MJ应用场景与变现方向
Python涨薪研究所
0
【每周一课#06】MidJourney 应用实战
#AI绘画# #MJ# #文生图#时间:4月24日周三 21:00课程大纲:1、关于AIGC:概念、发展历程、就业前景2、MJ基础认识:如何使用、底层逻辑、MJ与SD优缺点比较3、MJ基础功能介绍:任务指令、后缀参数、图生图、图生文、垫图、局部修改等4、MJ应用场景与变现方向
Python涨薪研究所
0
Java项目实战——打造一款股票区间交易盯盘系统
点击上方“Java进阶学习交流”,进行关注后台回复“Java”即可获赠Java学习资料今日鸡汤身无彩凤双飞翼,心有灵犀一点通。一、简介大家好,我是Snowball。今天给大家分享的内容是基于Java编程,实现股票交易相关功能开发,如果读者对股票或金融衍生物交易不太了解,又比较感兴趣的话可自行查询相关
Java进阶学习交流
0