three

1、Three.js开端准备环境1.安装 VSCode 2.安装 Node.js 3.查看Three.js最新版本 4.如何cdn引入： https://cdn.jsdelivr.net/npm/three@v版本号/build/three.module.js 例如：https://cdn.jsdelivr.net/npm/three@v0.170.0/build/three.module.js

2、Three.js初步认识场景Scene、相机Camera、渲染器Renderer三要素有了虚拟场景Scene，相机录像Camera，在相机小屏幕上看到的RendererScene当前空间 Mesh人在场景 Camera相机录像 Renderer显示器上首先先描述下Scene：这个场景为三要素之一，一切需要展示的东西都需要添加到Scene里面，也就是画布，你需要在页面展示的东西都需要add到Scene中，在场景里面我们可以添加 Mesh网格模型、光源等

优雅永不过时·

Three.js 原生实现 react-three-fiber drei 的磨砂反射的效果Three.js 原生实现 react-three-fiber drei 的磨砂反射的效果

优雅永不过时·

three.js 实现 css2d css3d效果将二维Dom 和三维场景结合three.js 实现 css2d css3d效果将二维Dom 和三维场景结合预览

优雅永不过时·

Three.js 使用着色器实现跳动的心Three.js 使用着色器实现跳动的心预览： https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=shader&id=jumpHeart

爷傲奈我何!

Threejs 实现3D 地图（04）3d 地图的柱状图和文字显示3d 地图的数据展示代码仓库：King/threejs-3d-map核心代码：下一篇：Threejs 实现3D 地图（05）3d 地图进场动画和地图边缘动画-CSDN博客

爷傲奈我何!

Threejs 实现3D 地图（02）创建3d 地图地图数据来源： DataV.GeoAtlas地理小工具系列

优雅永不过时·

three.js 实现一个心形的着色器three.js 实现一个心形的着色器源链接：https://z2586300277.github.io/three-cesium-examples/#/codeMirror?navigation=ThreeJS&classify=shader&id=heartShader

优雅永不过时·

使用three.js 实现着色器草地的效果使用three.js 实现着色器草地的效果在线预览https://z2586300277.github.io/three-cesium-examples/#/codeMirror?navigation=ThreeJS&classify=shader&id=grassShader

使用three.js+vue3完成无人机上下运动效果图如上由于材质是二维图片挂载到二维平面，所以无人机的所谓上下翻转运动，是面的绕轴运动和上下运动的复合运动(绕x轴),其次注意png图片作为材质，让透明地方不为黑色，一定要设置MeshBasicMaterial的transparent为true，即透明度使用。

Three.js 实战【3】—— 城市模型渲染初始化场景这一块就跳过了，可以参考上一篇文章：Three.js 实战【2】—— 船模型海上场景渲染，效果是一样的。

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数据解析动态生成的，例如墙体，柱子门口，地标等，集成了第一人称的插件可以第一人称进入场景有需要的可以下载看看，对想入门的朋友应该有一些参考价值。