小彭努力中-CSDN博客

原创 124. Raycaster(射线拾取模型)

上节课给大家介绍过射线Ray，下面给大家介绍另一个和射线相关的API射线投射器Raycaster。

2024-11-07 09:15:20 222

原创 123. 射线Ray

射线Ray和三维向量Vector3一样属于数学几何计算相关的API,可以进行射线交叉计算。

2024-11-07 09:13:48 462

原创 122. 抗锯齿后处理

three.js提供了多种抗锯齿的后处理，下面给大家演示下FXAAShader和SMAAPass两种抗锯齿的后处理。

2024-11-06 09:55:36 248

threejs并没有直接提供伽马校正的后处理通道，提供了一个伽马校正的Shader对象GammaCorrectionShader，这时候可以把Shader对象作为ShaderPass的参数创建一个通道。目录下有很多不同功能的shader文件,GammaCorrectionShader.js的功能就是进行伽马校正，具体点说就是可以用来解决gltf模型后处理时候，颜色偏差的问题。首先你可以回顾6.3和6.9节内容，加载gltf模型如果出现颜色偏差，需要设置。会无效，自然会出现颜色偏差。

2024-11-06 09:53:44 499

原创 120. gltf工厂模型设置发光描边

用于和3D场景交互的UI按钮，具体参考课件中index.html文件中HTML和CSS代码。先不用设置，后面通过UI按钮鼠标事件触发的的函数设置。通过UI按钮控制，哪个模型添加发光描边效果。具体参考13.1和13.2节讲解。具体参考13.1节讲解。

2024-11-05 09:25:26 289

原创 119. 多通道组合(GlitchPass和描边)

threejs可以多个后处理效果组合使用，比如模型先通过设置描边，再设置其它的后处理通道。GlitchPass。

2024-11-05 09:23:37 329

原创 118. Bloom发光通道

前面两节课，通过给大家演示过后处理的整个流程，本节课给大演示一个Bloom发光通道案例。

2024-11-04 09:36:18 301

原创 117. OutlinePass描边样式

继续上节课关于的讲解，给大家演示如何修改默认高亮发光描边样式。OutlinePass有很多控制高亮外边框样式的属性，下面介绍几个比较常用的属性。

2024-11-04 09:34:12 240

原创 116. 后处理(发光描边OutlinePass)

查看threejs文件包目录，你可以看到Three.js提供了一个扩展库,通过EffectComposer可以实现一些后期处理效果。所谓threejs后期处理，就像ps一样，对threejs的渲染结果进行后期处理，比如添加发光效果。

2024-11-03 09:20:01 503

原创 115. Sprite模拟下雨、下雪

在实际开发的时候，物联网3D可视化、数字孪生、游戏等项目可能会模拟天气的效果。如果你想模拟下雨效果，一个雨滴用一个3D水滴形曲面表示，假设一个水滴用40个三角形表示，1万个雨滴，就是40万个三角形，精灵模型Sprite在threejs内部就像相当于两个三角形构成的矩形，1万个精灵模型，相当于2万个三角形，Sprite模拟雨滴相比比3D曲面几何体表示雨滴顶点数量就会少很多，这样threejs渲染性能就更好。Sprite。

2024-11-03 09:16:36 216

原创 114. 精灵模型标注场景(贴图)

前面课程5.5小节讲解过一个例子，就是通过矩形平面标注三维场景。不过有些时候，你也可以通过Sprite+贴图标注三维场景。你可以对比案例源码中矩形平面Mesh和Sprite标注三维场景差异。大家根据需要选择Sprite或矩形Mesh标注场景，如果希望矩形始终平行于canvas画布，就选择Sprite，如果希望矩形标注姿态角度能跟着场景旋转，就使用矩形Mesh标注场景。

2024-11-02 12:43:31 395

原创 113. 精灵模型Sprite

Three.js的精灵模型Sprite和Threejs的网格模型Mesh一样都是模型对象，父类都是Object3D,关于精灵模型对象Sprite的方法和属性除了可以查看文档Sprite，也可以查看父类Object3D。第一次接触精灵模型Sprite的时候，可以类比以前讲解过的网格模型Mesh学习。

2024-11-02 12:41:31 446

原创 112. gui辅助调节光源阴影

光源阴影范围，也可以通过GUI界面可视化调节，这样更形象。

2024-11-01 10:13:38 465

原创 111. 工厂(模拟太阳光阴影)

真实生活中物体在太阳光下往往是有影子的，在threejs你可以通过平行光阴影模拟太阳光阴影。

2024-11-01 10:12:31 220

原创 110. 工厂光源(平行光模拟太阳光)

在设置光源高度的时候，你可以先大概测量下三场场景的尺寸，布局具体值，知道大概数量级即可，比如几十、几百，工厂长宽方向100量级，高度方向10量级。工厂地面坐标为0的话，光源从斜上方照射到物体上，可以y给予一个大于0的高度值，xz设置不同的值，控制不同的光线照射方向。比如实际生活中一个三维场景中，可能会有太阳光照射，太阳距离地球足够远，可以近似认为太阳光是平行光。平行光y坐标相对工厂地面设置一定高度，比如通过GUI控制在0~300范围。，然后改变平行光在XOZ平面上旋转角度，通过三角函数计算x和z坐标。

2024-10-31 09:36:34 424

原创 109. 工厂光源(环境贴图和环境光)

不过你不设置任何光源，只设置环境贴图，物体表面也能看到。前面入门部分讲解过gui相关知识，对于光源的等参数，人的大脑很难根据代码想象出来具体效果，所以需要通过可视化的方式调参数。一般三维场景需要添加环境光，来整体调节三维场景的明暗，环境光强度可以通过参数2，或光照强度属性。一般实际开发，对于偏向写实的场景，需要设置环境贴图，比如产品展示、物联网或数字孪生的场景。如果你不设置任何光源和环境贴图，gltf模型默认PBR材质不会正常显示，一片漆黑。，可以控制环境贴图对物体表面的影响程度，类比环境光的光照强度。

2024-10-31 09:34:21 847

原创 108. 阴影.mapSize和.radius

在能覆盖包含阴影渲染范围的情况下，的尺寸尽量小。如果你增加长方体尺寸范围，阴影模糊锯齿感，可以适当提升的大小。

2024-10-30 09:55:22 366

原创 107. 阴影范围.shadow.camera

上篇文章讲解过，通过光源的阴影相机属性,来控制阴影的渲染范围，本节课继续的讲解。

2024-10-30 09:53:53 767

原创 106. 平行光阴影计算

点光源PointLight、聚光源SpotLight、平行光等都可以产生阴影，就像实际生活中的影子。环境光这种没有方向的光源，不会产生阴影。本节课给大家讲解平行光的阴影效果如何实现。

2024-10-29 10:00:38 355

原创 105. 聚光源SpotLight

入门部分给大家介绍过平行光、点光源PointLight、环境光,下面给大家介绍一个新的光源对象，也就是聚光源SpotLight。

2024-10-29 09:52:34 517

原创 104. 相机控件MapControls

地图导航相机控件，你可实现一个类似百度地图的3D导航功能。

2024-10-28 09:23:58 323

原创 103. OrbitControls旋转缩放限制

课程中经常会用到相机控件的不同功能,本节课就会大家补充新的知识点，比如控制缩放的最大最小范围，比如限制旋转的角度范围，比如禁止平移。

2024-10-28 09:22:04 503

原创 102. 管道漫游案例

通过一个轨迹线生成一个管道几何体，然后相机沿着该轨迹线移动，注意相机的方向要沿着轨迹线的切线方向，这样会形成一个管道漫游的效果。

2024-10-27 18:43:14 784

原创 101. 旋转渲染结果(.up相机上方向)

up是相机对象的属性，当你改变.up属性时候，就好比你生活中拍照时候，扭转你的相机姿态角度进行拍照，这时候你的照片也会跟着相机姿态旋转。.up属性默认值是,意思是沿着y轴朝上。

2024-10-27 18:41:28 264

原创 100. 不同方向的投影视图

本节课给大家讲解，通过UI按钮界面交互改变threejs相机的观察视角。

2024-10-25 09:29:07 458

原创 99. 相机动画(.position和.lookAt())

下面给大家讲解，通过相机对象Camera的.position属性和.lookAt()方法，实现一段相机动画。

2024-10-25 09:25:22 215

原创 98. 地图案例(包围盒、正投影)

把相机的位置和观察目标的xy坐标设置为一样，这样相机的视线方向就垂直地图平面，这样地图就平行于canvas画布，或者说平行于显示器屏幕。使用上面相机参数，默认情况下，你运行案例源码，可以看到河南地图并没有居中显示，在canvas画布上显示的效果也比较小。把正投影相机控制上下左右的变量s，设置为地图模型整体尺寸的一半左右即可。如果你想地图全屏最大化居中显示，可以通过包围盒来辅助设置计算参数。地图显示效果更大，尽量使地图基本填充整个canvas画布。地图案例会涉及到几何体、包围盒、正投影相机三方面知识点。

2024-10-24 13:13:24 901

空空如也

空空如也