#10
Three.Js Journey
0 次阅读
The Ultimate Three.Js Journey
几天前了解到了Three.Js，发现了一个很棒的网站Three.js Journey，它的作者是Bruno Simon这是他的个人网站，学习的榜样，他是个挺有趣的法国人，好像是资深的前端程序员，看了他的课程，觉得很不错，如果以后有机会，我会给他buy a "coffee，一下子已经看了十多集教程了，打算把他的教程全部看完，给网站加点"coolstuff"，他法语口音的英语蛮有意思的，总是会不经意间学他说话😂，不知道是不是看的有点多了，睡觉的时候迷迷糊糊还以为自己在写代码。同时我也觉得，网课学习有时候真的挺不错的，将来如果学得好，我可能也会尝试搞些教程。这篇博客用来记录学习的历程，let's fucking go！
12.24
3D_Text
3D的字体显示效果、光圈效果、环境贴图hdr
https://www.cooolstuff.fun/pages/champ.html
到目前阶段，学习了threejs的几个基本的class，如下:
刚发现其实camera和light都算是object3D的子类，算了，不想重新画图了就这样吧
:::note
移动物体用的是mesh，改变物体外观用的是material，勿混淆！
:::
12.26
Shadow
前提
物体的材料material必须是能支持投影的，如MeshStandardMaterial等
同时，投射的光照也应该是支持投影的。
支持阴影的光照
- DirectionalLight
提供一个三维向量方向上的光（可以设置大小，范围）
（0，0，1）的光照亮物体前方，（0，0，-1）照亮物体后方
- PointLight
- SpotLight
光照投射阴影
direcionalLight.castShadow = true
物体投射阴影/平面接收阴影
ball.castShadow = true
plane.receiveShadow = true
renderer允许投影
/**
* Render
*/
const renderer = new THREE.WebGLRenderer({canvas})
//注：先设置阴影才能生效
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap;//柔和阴影
renderer.setSize(size.width,size.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
renderer.render(scene,camera)
12.27
ScrollBase Animation
根据视图变换（scroll），camera的group和移动相应。
鼠标移动而产生透视效果（往物体后方眺望的效果）
gsap
https://www.cooolstuff.fun/pages/scrollAnimate.html
12.28
Physics(CANNON)
为3Js增加物理效果，后期可用于赛博飞车的制作（当然要学blender制作自己的小车）
CANNON库，通过重力gravity等参数的影响模拟真实的物理世界。
对光线和阴影的处理
https://www.cooolstuff.fun/pages/physics.html
1.4
Haunted House
多个模型的加载，场景阴影的处理，模型材质的复杂应用
https://www.cooolstuff.fun/pages/hauntedHouse.html
2.4
Shader
升旗，没什么好说的
https://www.cooolstuff.fun/pages/chinaFlag.html
2.8
Raging Sea
引入perlinNoise，利用它的随机性模拟海浪的随机性，迭代成最终海面
https://www.cooolstuff.fun/pages/ragingSea.html
2.10
Animated Galaxy
旋转的粒子群（通过vertexShader)，旋转的角度处理，在几何物体上应用environment map
几何物体的销毁
https://www.cooolstuff.fun/pages/galacy.html
2.14
Coffee Smoke
最大程度利用一张perlinnoise生成的随机灰度图片的随机性，避免直接调用perlinnoise函数，优化性能同时具有很自然的随机性。（coffee的烟雾）
一系列的remap（）函数，floor（），round（）等的数学处理函数。
https://www.cooolstuff.fun/pages/coffeeSmoke.html
2.16
Hologram monkey
fragment.glsl中对法向向量的处理
Fresnel，falloff等拟真效果的实现
vertex.glsl中对glitch全息投影故障效果的实现
https://www.cooolstuff.fun/pages/hologram.html
2.19
Firework
通过shader修改粒子群。
对不同用户不同屏幕参数的画面适配。
“uProgress“
“gspa”库
粒子销毁
引入three的example
https://www.cooolstuff.fun/pages/firework.html
2.28
LightShading
通过shader在模型物体表面模拟光照效果
https://www.cooolstuff.fun/pages/lightShading.html
3.2
Venom
不平的海面计算实际上偏移的法向向量（neighbot technique） 利用光的衰减原理实现边缘不可见的效果
https://www.cooolstuff.fun/pages/venom.html
3.3
透镜翻译
在B站刷到这个效果，跟up主留言要源码，没给，我就自己尝试了一下，但是效果达不到人家那样，能用，能用。
两张背景相同文字不同的材质（ps） shader中根据鼠标坐标画圆 通过mix（）函数和step（）函数，在圆内的粒子颜色采用材质2，在圆外的粒子颜色采用材质1
https://www.cooolstuff.fun/pages/translate.html
3.4
Halftone半调
通过fragment.glsl定制具有Halftone效果的Material，再应用于任意物体表面即可（粒子除外）
https://www.cooolstuff.fun/pages/halftone.html
3.5
Doggy
首先根据黑白色的正方形图片像素点的r channel的强度，决定粒子的大小和颜色，用粒子群模拟图片效果如下：
引入2d Canvas，在黑色的2dcanvas上根据鼠标位置画白色的圆，将圆提取到webgl Canvas中，如果是白色的部分，就是1，如果是黑色的部分就是0，在webgl中根据1和0决定鼠标位置处粒子上浮的程度。
https://www.cooolstuff.fun/pages/particleCursor.html
3.6
Captain Jack
创建gpgpu，将模型的位置参数作为rgb传入gpgpu texture image data，在gpgpu对应的着色器particle.glsl中不断更新texture的颜色（根据flowfield的规则更新），在将particle.glsl中这个texture作为uniform传入vertex.glsl，vertex.glsl根据uv坐标提取texture中各个像素的信息（点的位置坐标），应用于对应的点上，让点的位置实时根据texture的颜色变化。
https://www.cooolstuff.fun/pages/boat.html
3.8
morph
两个position数组，根据uProgress，调用mix函数，实现位移。