【ThreeJS基础教程】0.在学习使用ThreeJS之前
【ThreeJS基础教程】0.在学习使用ThreeJS之前
- 什么人适合学习ThreeJS
- 什么人不建议学习ThreeJS或学起来比较累
- 了解ThreeJS
- ThreeJS文档在哪
- 关于《ThreeJS开发指南》
- 关于《WebGL开发指南》
- WebGL与ThreeJS的关系
- ThreeJS能做什么
- 学习ThreeJS之前的准备
- WebGL浏览器支持
- 硬件支持
- 开发环境
- IDE选择
- 开发前的技术要求
- 学习ThreeJS的加分项
- ThreeJS良好的辅助工具和库(2023年1月16日更新)
- ThreeJS开发环境搭建
- 安装ThreeJS
- 如何在本地运行ThreeJS
- 方法1：Node.js server
- 方法2：WebStrom或IDE自带的本地服务器
- ThreeJS开发包简介
- 使用本地文档和案例
- 结语
什么人适合学习ThreeJS
- 对3D领域或对游戏开发感兴趣的人
- 对前端领域【面向对象开发】比较熟悉的人
- 游戏迷且具有一定开发经验的人,尤其是对游戏开发感兴趣的开发者
- 有良好数学基础的人，特别是几何学
- 有一定Unity开发经验的人，想涉足Web领域的人
什么人不建议学习ThreeJS或学起来比较累
- 1年经验不到的前端实习生
- 只想着完成任务或项目的人
- 认为Threejs像其他前端框架一样开包即用的人
- 对【面向对象开发】这个概念很模糊的前端
- 从来没用过ES6的前端开发者
- vue癌患者，离了vue不会做前端的人或者从没写过原生js的人
- 空间想象能力很弱的人
- 晕3D患者
- 数学基础薄弱，高中数学都难及格的人
- 性格暴躁的人
了解ThreeJS
ThreeJS文档在哪
首先，ThreeJS唯一指定官网：https://threejs.org
由于ThreeJS更新较快，其他非官方的链接均有可能出现文档老而找不到对应API的问题
国内有不少的大佬，下载了Threejs的文档，并放置到了自己的网站上，如：
暮志未晚：http://www.wjceo.com/
郭隆邦技术博客：http://www.yanhuangxueyuan.com/
跃焱邵隼：https://www.wellyyss.cn/
上述三个站点均为国内大佬的地址，他们也都有把文档和官方案例放到自己的网站上
但是，如果你下载使用的是最新的官方版本，那么建议你查看官网的文档
关于《ThreeJS开发指南》
不管是第一版还是第二版还是第三版
这本书使用的Threejs版本都非常古老，想以这本书为学习起点的人，一定要找对应版本的ThreeJS文件包
否则很容易出现文档对不上，这个函数没有，那个参数没有的现象
关于《WebGL开发指南》
如果你是一个学生，拥有充足的时间学习
那么这本书强烈建议你学习一遍，然后再进行Threejs的学习，届时将事半功倍
WebGL与ThreeJS的关系
详细的我就不做介绍了，简单拿个例子做个解释
如果WebGL相当于 JavaScript
那么，ThreeJS就是 WebGL领域的 JQuery
有没有相当于WebGL领域的Vue和React呢? 答案是有，就是BabylonJS
但是，BabylonJS的学习难度过高，不建议在最初就接触
ThreeJS能做什么
- 所有3D的东西它都能做，包括BIM，GIS领域的，展厅类，游戏，各种3D效果和场景
- 所有2D的东西它也能做，但是有比它做的更好的，如：Pixi.js
- 整个页面只用一个< canvas>，我也能做成一个完整的网页，但是不建议这么做
- 只要和< canvas>相关的事情它都能做
学习ThreeJS之前的准备
WebGL浏览器支持
基本支持所有主流现代浏览器
如果有老板要求你ThreeJS兼容IE，你完全可以辞职不干
用IE的很多都是老机子(win10一般默认安装Edge)，能支持WebGL都已经是极限了
同时，这种的机子，一般配置都不会太高
想在还用IE的机子上使用WebGL，基本上是难上加难
如果你觉得上面的方法不够完美，可以尝试以下代码，来检查你的浏览器是否支持WebGL
引入下面的库
https://github.com/mrdoob/three.js/blob/master/examples/jsm/capabilities/WebGL.js
然后使用下面的代码进行WebGL支持检查
if (WebGL.isWebGLAvailable()) {//todo 浏览器支持WebGL} else {//输出不支持WebGL的警告信息const warning = WebGL.getWebGLErrorMessage();document.getElementById('container').appendChild(warning);}
硬件支持
使用ThreeJS对硬件有一定要求
当你的模型过大过多或者效果过多时，低配置的硬件就会跑不起来这些ThreeJS的项目
所以在开发前，最好是能和甲方确认好程序的适用人群，配置水平
如果适用人群是全民，那么开发的项目，使用的模型质量和贴图质量不应过高
开发者的电脑设备也有要求，最基本的要求，就是往建模师的标准靠拢
- 必须要有独立显卡，且显卡等级至少要高于GTX960或RX560XT
- 内存至少要8G以上
- CPU方面至少是I5-4XXX以上，或I3-8XXX以上
开发环境
基本的前端开发环境，Node，npm淘宝镜像这些
一个最新款Chrome浏览器
注意，国产浏览器不推荐，因为在Threejs开发中经常涉及鼠标右键，部分国产浏览器会占用右键功能
IDE选择
个人使用WebStorm较多，没有用过VS
开发前的技术要求
- 至少1年前端开发经验，或有比较良好的后端基础/JavaScript基础
- 建议熟悉ES6，面向对象开发，以及异步等，这些技术在threejs的开发中会大量用到
- 了解一点组件化开发，模块化开发
- 熟悉事件相关开发
学习ThreeJS的加分项
以下人群在学习threejs时，比其他人学习效率要更高
- 学习过建模的人
- 任何图形学领域的开发者（如：Unity3D，UE等）
- 对动画比较熟悉的人
- 数学方面有极高天赋的人以及高数成绩很好的人
ThreeJS良好的辅助工具和库(2023年1月16日更新)
个人不推荐tween，因为命名为 tween 的库比较多，文档也比较杂
部分插件在这里提为时过早，在写到相关的教程时，再提及这方面插件
2023年1月16日更新内容：由于animejs的cn站点挂了，所以这里修改为animejs的官网，但是此时animejs对新手，尤其是对动画概念不够强以及英语水平不太好的人来说，animejs的学习成本大幅提高了
挂掉的animejs的cn站点，希望有一天cn站能复活，这个库实在是太好用了
animejs官方网站
这里笔者补充了一个新的动画库，tweenMax，笔者在查看了文档后，发现tweenMax不逊色于animejs，同样是一款优秀的动画库
ThreeJS开发环境搭建
安装ThreeJS
唯一官网下载https://threejs.org
如果觉得官网下载太慢，可以用码云，将threejs对应的git地址复制过来，然后用码云下载
npm下载，淘宝镜像那一套我就不解释了
npm install three
如何在本地运行ThreeJS
ThreeJS的项目大多数情况下都要在服务器环境下运行
方法1：Node.js server
- 全局安装node server
npm install http-server -g
- 在ThreeJS的项目中，shift + 右键点击空白处，打开Powershell，然后执行命令 http-server，即可在默认端口运行项目，在浏览器中输入：http://localhost:8080 即可运行项目
方法2：WebStrom或IDE自带的本地服务器
WebStrom自带的浏览器运行可直接以服务器环境运行项目
vscode，HBuilder等软件有相关的内置服务器环境运行工具，本人未曾使用，所以这里不做说明
ThreeJS开发包简介
build: 打包后的threejs库，
three.js 为ES5使用 ,使用
<script type="module">import * as THREE from "three.module.js";
</script>
docs:官网文档的开发包
editor：官网编辑器的开发包
examples：官方所有案例的开发包
src：Threejs的开发文件
其他文件均无需关注
2023年1月16日的更新
当我查阅完148版本的更新后，我发现了一条重大的更新， examples/js/文件夹已被移除，意味着以后Threejs就必须用ES6语法来编写，不再支持古老的< script src=“” > 这样的方式引入了
使用本地文档和案例
threejs文档地址：https://threejs.org/docs/index.html
但是，这个文档有个缺点，就是它是外网，外网的坏处就是加载速度缓慢
所以当我们拿到上述的文件包后，将 docs/index.html，examples/index.html，editor/index.html
将上述三个文件，以服务器环境运行后，收藏到自己的浏览器收藏夹中
这样下次再查看文档和案例的时候，就可以避免访问外网时，等待时间过长的问题
结语
本账号会不定期更新，会长期更新WebGL的相关技巧，希望大家能够喜欢
如果有什么在Threejs/WebGL领域不懂的问题，欢迎在我的每一篇文章下留言
【ThreeJS基础教程】0.在学习使用ThreeJS之前相关推荐
- 【ThreeJS基础教程-材质纹理篇】3.2 初识基础网格材质MeshStandardMaterial
初识标准网格材质 学习ThreeJS的捷径 了解材质的基本知识 材质继承关系 常用的通用材质属性 alphaTest的验证和应用 depthTest和depthWrite应用 渲染哪一面Side 常用 ...
- python数据分析基础教程 numpy_Python数据分析基础教程：NumPy学习指南（第2版）
Python数据分析基础教程:NumPy学习指南(第2版) Ivan Idris (作者) 张驭宇 (译者) NumPy是一个优秀的科学计算库,提供了很多实用的数学函数.强大的多维数组对象和优异的计算 ...
- python基础教程书籍-Python学习必看书籍_带你高效学习
坚持就是胜利,祝你成功!!! 都说python是最好的语言. 1.<笨办法学Python 3> 入门强烈推荐 本书是一本Python入门书,适合对计算机了解不多,没有学过编程,但对编程感兴 ...
- [转载] python学习-基础教程、深度学习
参考链接: 在Python中使用NLTK对停用词进行语音标记 人工智能学习线路图 Python教程 Python 教程Python 简介Python 环境搭建Python 中文编码Python 基础语 ...
- 工业机器人入门z50的含义_工业机器人基础教程——快速入门学习
六轴.水平关节(SCARA).DELTA等不同类型的机器人入门基础教程,学完这些,您将成为一名优秀的机器人应用工程师! 到2020年,工业机器人密度达到每万名员工使用100台以上.我国工业机器人市场将 ...
- 工业机器人基础教程——快速入门学习
想成为一名优秀的机器人应用工程师,从这里学起,六轴.水平关节(SCARA).DELTA等不同类型的机器人入门基础教程推荐. 1.<机器人学导论> 本书曾作为美国斯坦福大学机器人学导论的教材 ...
- 【ThreeJS基础教程-初识Threejs】1.2掌控我们的物体和模型
掌控我们的物体和模型 学习ThreeJS的捷径 引入帧数监控与调试时使用的GUI 案例解析 引入刷新率检测器stats和lil-gui Stats LIL.GUI (Dat.GUI) 学习ThreeJ ...
- 【ThreeJS基础教程-初识Threejs】1.ThreeJS的HelloWorld
ThreeJS的HelloWorld 学习ThreeJS的捷径 杂项 第一个案例 案例效果 案例解析 引入threejs 创建一个场景(演出舞台) 创建相机(摄影师) 创建一个渲染器(相片处理) 创建 ...
- 【ThreeJS基础教程-初识Threejs】1.6各种各样的几何体
各种各样的几何体 学习ThreeJS的捷径 常用内置几何体介绍 立方缓冲几何体BoxGeometry 分段数的意义(该部分仅建议了解即可,无需深入) 圆形缓冲几何体CircleGeometry 圆柱缓 ...
最新文章
- 每天5道面试题（二）java基础
- lr:lr中错误解决方法19种
- 回溯法和DFS leetcode Combination Sum
- python socket多线程 获取朋友列表_python socket多线程通讯实例分析(聊天室)
- ios 图片添加阴影
- HDU 1048 The Hardest Problem Ever
- 解决IDEA GIT密码输入错误后，报Authentication failed ... 不再弹出输入框，提交更新失败
- 东南大学的计算机类和电子信息哪个专业好,东南大学王牌专业有哪些及专业排名...
- web.xml 基本配置
- 这一次，让你彻底明白接口及抽象类
- H.264学习过程中遇到的英文缩写整理
- 山重水复 Thinkpad T61改装记
- 遗传算法原理及算法实例
- 如何安装服务器操作系统 HP服务器系统安装
- 2020支付宝五福AR图
- mysql backup 使用_MySQLBackup 使用说明
- 计算机主机电池,台式机主板电池没电不换有什么影响？教你更换电脑主板电池的方法...
- C++第三次实验：税收计算
- 固定摄像头检测行人投射到gps坐标
- 双向可控硅漏电流 ？- 解决方法