跟着b站大佬学习three.js,让你实现3d前沿技术不是梦!
由于访问three.js官网是国外的网站,非常慢Three.js – JavaScript 3D Library
因此我们可以访问b站大佬在国内搭建好的本地three.js官网,大家访问如下链接即可,当然也可以自己搭建,下面有讲解。
three.js中文文档
three.js的版本更新是非常勤的,1-2个月会更新一次,大家要及时关注。
一、three.js简介和用途
Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。
three.js可以用于智慧城市,通过地理信息数据,获取建筑信息,可以生成建筑的框架和高度渲染出数字城市
对网站而言,Web3D技术运用,实现企业网站三维呈现,让企业形象更直观、更立体地展现给客户,打破传统平面展示模式,打造智慧、个性、创新的企业形象。目前政府有大量的新基建项目,如数字孪生、智慧城市、智慧园区、智慧工厂等等都涉及到了3D可视化技术。
也可以制作生动的3d模型
那么如何系统的学好WEB 3D可视化技术?
我们可以先从threejs库入手。threejs是一个让用户通过javascript入手进入搭建webgl项目的类库。众所周知学习webgl需要图形学知识,而 webgl 需要通过 js 和 glsl 两种语言。
如果我们不通过threejs使用webgl势必逃不过底层知识:你必须全面了解着色器语法和自己编写顶点着色片元着色;但你使用了threejs显然可以便捷的逃过这些难懂的底层,对于传统js从业人员直接挑战的shader确实是有难度的。
学习three.js首先掌握基础概念-----什么是点、线、面、几何体、材质、物体、场景、相机、渲染器、动画、控制器等基础概念,搞定一个最基础的场景和3d物体的显示。接着学会调试3D开发代码。接着即可深入上诉概念的每一个概念,详细了解官网文档该类的各种属性与概念。
接着3d渲染要真实性,肯定离不开PBR,详细了解什么是PBR,PBR基于物理的光照原理的渲染,。掌握什么是环境贴图、凹凸贴图、置换贴图、放射光、,环境贴图、金属贴图、粗糙度贴图等等,去打造真实的物体显示效果。接着掌握如何绘制粒子群,来绘制雨雪、落叶、星河等各种粒子效果,甚至产品的粒子效果。
二、本地部署
当然我们也可以自己部署在本地,接下来我们下载源码
https://github.com/mrdoob/three.js
下载好以后,通过npm i 和 npm start,启动项目
打开之后看到如下页面
点击doc就可以正常访问了,此时本地文档就部署好了
可以在这里切换到中文即可