three

ThreeJS-3D教学十二：ShaderMaterial一、首先 Shader 是做什么的 Shader 可以自定义每个顶点、每个片元/像素如何显示，而控制顶点和片元显示是通过设置 vertexShader 顶点着色器和 fragmentShader 片元着色器，这两个着色器用在 ShaderMaterial 和 RawShaderMaterial 材质上。我们先看一个例子：

邂逅Three.js探秘图形世界之美可能了解过three.js等大型的3D 图形库同学都知道啊，学习3D技术都需要有图形学、线性代数、webgl等基础知识，以前读书学的线性代数足够扎实的话听这节课也会更容易理解，这是shader课程，希望能帮助你理解着色器，也面向第一次了解threejs的同学。

ThreeJS-3D教学十-有宽度的linewebgl中线是没有宽度的，现实的应用中一般做法都是将线拓宽成面来绘制。默认threejs的线宽是无法调节的，需要用有厚度的线 THREE.Line2。先看效果图：

ThreeJS-3D教学九-line的绘制three.js 画线比较繁琐一些，我们先展示正常的操作，先看效果图：本案例用到的方法是： LineBasicMaterial 和 LineSegments。

基于threejs的3d学校示例源码下载地址在文章末尾！效果演示总览漫游模式切换黑夜视频播放源码下载地址 https://download.csdn.net/download/qq_43185384/88415886

ThreeJS-3D教学六-物体位移旋转之前文章其实也有涉及到这方面的内容，比如在ThreeJS-3D教学三：平移缩放+物体沿轨迹运动这篇中，通过获取轨迹点物体动起来，其它几篇文章也有旋转的效果，本篇我们来详细看下，另外加了tween.js知识点，tween可以很好的协助 three 做动画，与之相似的还有 gsap.js方法类似。

ThreeJS-3D教学七-交互在threejs中想要选中一个物体，点击或者鼠标悬浮，又或者移动端的touch事件，核心都是通过new THREE.Raycaster完成的。这里用到了一个概念，即我们点击时的屏幕坐标转换为 three中的3D坐标。先看效果图：代码是：

小菜鸟学代码··

threejs的dat.gui辅助工具的使用npm i dat.gui -S

web 3d场景构建+three.js+室内围墙，仓库，楼梯，货架模型等，第一人称进入场景案例翻到了之前的一个案例，基于three.js做的仓库布局模拟，地图元素除了大模型外，其他都是通过JSON数据解析动态生成的，例如墙体，柱子门口，地标等，集成了第一人称的插件可以第一人称进入场景有需要的可以下载看看，对想入门的朋友应该有一些参考价值。