了解Three.js
了解Three.js
本文是Three.js电子书的学前内容
Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。
既然Threejs是一款WebGL三维引擎,那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于Threejs引擎或Threejs类似引擎开发的Web3D应用,以便大家了解。
物联网3D可视化
在人与人之间联系的互联网时代,主要是满足人与人之间的交流,Web页面的交互界面主要呈现为2D的交互效果,比如按钮、输入框等。
随着物联网的发展,工业、建筑等各个领域与物联网相关Web项目网页交互界面都会呈现出3D化的趋势。物联网相比较传统互联网更强调的是人与物、物与物的联系,当人与物进行交互的时候,比如你通过网页页面远程控制工厂中的一台机器启动或关停,你可以在网页上通过div元素写一个按钮,然后表示机器设备的开关,当然你也可以把该设备以3D的形式展示在网页上,然后就像玩游戏一样直接点击模型上的开关按钮,这两种方式肯定是3D的方式更为直观,当然开发成本也比较大。
物联网粮仓3D可视化案例:http://www.yanhuangxueyuan.com/3D/liangcang/index.html
产品720在线预览
在浏览器不支持WebGL技术的时代,如果你想在网页上展示一款产品往往是通过2D图片的形式实现。如果想3D展示一个产品,往往依赖于OpenGL技术,比如通过unity3D或ue4开发一个桌面应用,这样做往往很难随意传播,需要用户下载程序很麻烦,如果是通过Web的方式展示产品的三维模型,一个超联系就可以随意传播。
随着WebGL技术的持续推广,5G技术的持续推广,各种产品在线3D展示将会变得越来越普及,比如一家汽车公司的新款轿车可以在官网上在线预览,也许有一天一些电商平台会通过3D模型取代2D图片,现在你朋友推荐推荐给你一款新衣服,你会说发一张图片看看,也许将来你会说发来一个3D模型链接看看。
玉镯产品在线预览案例:http://www.yanhuangxueyuan.com/3D/liangcang/index.html
沙发在线预览:http://app.xuanke3d.com/apps/trayton/#/show
服装在线预览:http://suit.xuantech.cn/
洗衣机在线交互预览:https://cdn.weshape3d.com/hir001/1021/web/index.html
数据可视化
与webgl相关的数据可视化主要是两方面,一方面是海量超大数据的可视化,另一方面是与3D相关的数据可视化。对于超大的海量数据而言,基于canvas、svg等方式进行web可视化,没有基于WebGL技术实现性能更好,对于3D相关的数据可视化基于WebGL技术,借助3D引擎Threejs可以很好的实现。
解析GeoJOSN数据中国GDP数据可视化:http://www.yanhuangxueyuan.com/3D/geojsonChina/index.html
3D直方图:https://www.echartsjs.com/examples/zh/editor.html?c=transparent-bar3d&gl=1
H5/微信小游戏
非常火的微信小游戏跳一跳就是使用Three.js引擎开发的。 开发3D类的H5小游戏或者微信小游戏,Three.js引擎是非常好的选择。
通过Threejs开发的小游戏,可以直接部署在微信小程序或者web端,无需下载,方便传播,目前的生态非常和小游戏开发。
科教领域
在科教领域通过3D方式展示特定的知识相比较图像更为直观。
科研平台-蛋白质结构可视化案例:http://www.rcsb.org/3d-view/2JEN/1
化学相关——分子结构可视化:http://www.yanhuangxueyuan.com/3D/fenzi/index.html
地理天文相关——太阳系3D预览:http://www.yanhuangxueyuan.com/3D/solarSystem/index.html
机械领域
机械模型在线预览demo:http://www.yanhuangxueyuan.com/3D/jixiezhuangpei/index.html
Onshape是一款机械领域的三维建模软件,如果熟悉Solidworks、UG等CAD软件,那么你可以把Onshape理解为云Solidworks。
WebVR
对于现在比较火的VR、AR概念,WebGL技术的出现,也是一个好消息,如果你想预览一些VR内容,完全可以不下载一个VR相关的APP,通过threejs引擎实现VR内容发布,然后用户直接通过微信等社交方式推广,直接打开VR内容链接就可以观看。
VR与Web3D技术结合自然就衍生出来一个新的概念WebVR,也就是基于Web实现的VR内容。
家装室内设计相关
室内设计作品展示案例:http://www.yanhuangxueyuan.com/3D/houseDesign/index.html
云装修平台酷家乐:https://www.kujiale.com/
三维模型在线预览平台
平台 | 国家 | 网址 |
---|---|---|
sketchfab | 国外 | https://sketchfab.com/ |
动动三维 | 国内 | https://www.ddd.online/ |
琢刻 | 国内 | https://gizmohub.com/ |
室内逆向全景漫游平台
通过3D相机对室内空间进行逆向,在Web端以全景图的方式预览室内效果。
平台 | 国家 | 网址 |
---|---|---|
众趣科技 | 天朝 | http://www.3dnest.cn/ |
贝壳 | 天朝 | https://zz.ke.com// |
matterport | 美帝 | https://matterport.com/ |
了解Three.js相关推荐
- 在js中使用HashMap数据结构,在js中使用K,V数据结构
首先是定义一个HashMap方法,做基类(复制在js中即可,然后引用) //简单的哈希表,begin function HashMap() {/** Map 大小 * */var size = 0;/ ...
- js校验复选框(多选按钮)是否被选中的方法
js校验复选框是否被选中的方法 方法一:(使用下标进行标记) if ($("#checkbox-id")get(0).checked) {// do something } 方法二 ...
- form表单提交前进行ajax或js验证,校验不通过不提交
在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
- 终止js程序执行的方法
js终止程序执行的方法共有三种 (一)在function里面(普通js方法) (1)return; (2)return false; (二)非function方法里面(如ajax方法) alert(& ...
- JS Uncaught SyntaxError:Unexpected identifier异常报错原因及其解决方法
最近在写ajax的时候,调用js方法,遇到了Uncaught SyntaxError:Unexpected identifier异常报错,开始搞不清原因,很苦恼. 以为是js方法参数个数和长度的问题, ...
- 用js方法做提交表单的校验
基础知识: 原始提交如下: <form action="<%=basePath %>puser/register" method="post" ...
- 【JavaScript总结】JavaScript语法基础:JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
- 【JavaScript总结】JavaScript语法基础:JS编码
运算符 数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
- js获取html代码中所有图片地址
/** * JS获取html代码中所有的图片地址 * @param htmlstr * @returns imgsrcArr 数组 */ function getimgsrc(htmlstr) { v ...
- Node.js 简单入门
目录 一. 什么是Nodejs 二. Nodejs组成图(对比jdk) 三. Nodejs的安装 四. 第一个Nodejs程序 五. Node实现请求响应 六. Node操作MYSQL数据库 1. 安 ...
最新文章
- Python爬取近十万条程序员招聘数据,告诉你哪类人才和技能最受热捧! | 原力计划...
- 银行选型和排坑实战:用开源软件自建分布式数据服务平台
- 与servlet Api 的集成
- 使用Aspect和Spring Profile进行电子邮件过滤
- 今天谈谈用户故事地图,不是用户故事
- 【Flink】Flink kafka producer 分区策略 (flink写入数据不均匀 与 数据写入 分区无数据 )
- JS每日一题:new Vue()中发生了什么?
- MYSQL中的TCL语言
- C#经纬度坐标算距离
- SQL中order by的高级用法
- 北京将广纳贤才 建设国际人才社区
- 《互动教程 for Photoshop CC》已成功发布在App Store
- note3 android 4.4,三星手机升级安卓4.4.4名单曝光 S5、Note3将最快推送
- 李宏毅2023春季机器学习笔记 - 01生成AI(ChatGPT)
- 一张我为写植物大战僵尸外.挂而画的草稿图...
- 5分钟实现微信小程序绘制二维码
- 【黄啊码】PHP压缩图片(简洁易懂版,不懂我下次不写)
- 小程序自制自带滑动条的表格组件
- Live800:大数据将如何改变客户服务?
- IOT设备情况数据分析
热门文章
- 计算机字体渲染的学问
- 使用kindeditor中图片上传后插入不显示绝对路径的修改办法
- Linux基础命令-大全
- python爬虫之爬取《贵州农经网》信息
- 太年轻,原来订阅号发红包也可以这么灵活
- ECharts(3)
- 关于计算机的网络作文,关于网络的作文:网络_450字
- 大众点评CEO张涛:踏实创业 低调打造百亿级公司
- c语言不用strcpy复制字符串,c语言程序(二十三)——字符串复制(不使用strcpy()函数)...
- 【报告分享】万物互联时代的操作系统报告(附下载)