前言
/*
补充：材质本身纹理有光源等信息因此能看到模型
gltf.scene.traverse((child) => {
if (child.isMesh) {
child.material.map = null; // 移除贴图
}
});
此时是纯白色，按照正常逻辑 没有光会是灰/黑色
为什么显示白色
1.默认材质颜色
2.材质的表现是均匀的纯色，而非根据光影变化显示灰色
3.Three.js 默认的行为是让材质按照它本身的颜色显示
课程
制作咖啡的烟雾（热气）
预制纹理： https://opengameart.org/content/noise-texture-pack
制作纹理器： https://mebiusbox.github.io/contents/EffectTextureMaker/
在选择噪声纹理时，请记住3条规则
足够的变体
大到足够
重复的模式(或“耕作”)
1.创建smoke ，
创建一个几何体PlanGeometry, 移动几何体位置，同时缩放(在第一帧时可以做，但是不要在tick中执行)
创建材质，创建网格，添加到场景中
2. 使用着色器材质，创建顶点着色器，片段着色器
projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0)
这里我写的顺序不对,导致渲染时候中间烟雾随着视角转动而围绕杯子(注意)
3. 之后跟写国旗的差不多(不过其中关于片段和顶点着色器要修改部分)
4.其中烟雾 设置透明 要在材质中添加 transparent:true;
5. 设置uTiem添加动画 ,同时让纹理重复 wrapS wrapT
6.设置边缘淡化
7.设置随风飘动
我们希望顶点绕着平面中心旋转，并使旋转随仰角变化。
风向
8. 烟雾遮挡
实现
着色器中创建includes文件夹 区分函数
#include ../includes/rotate.glsl
注意： #include <tonemapping_fragment>
#include <colorspace_fragment>
是应用three.js的和上面的#includes不一样
*/
一、代码
script.js
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import GUI from 'lil-gui'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import coffeeSmokeVertexShader from './shaders/coffeeSmoke/vertex.glsl'
import coffeeSmokeFragmentShader from './shaders/coffeeSmoke/fragment.glsl'/*** Base*/
// Debug
const gui = new GUI()// Canvas
const canvas = document.querySelector('canvas.webgl')// Scene
const scene = new THREE.Scene()// Loaders
const textureLoader = new THREE.TextureLoader()
const gltfLoader = new GLTFLoader()/*** Sizes*/
const sizes = {width: window.innerWidth,height: window.innerHeight
}window.addEventListener('resize', () =>
{// Update sizessizes.width = window.innerWidthsizes.height = window.innerHeight// Update cameracamera.aspect = sizes.width / sizes.heightcamera.updateProjectionMatrix()// Update rendererrenderer.setSize(sizes.width, sizes.height)renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})/*** Camera*/
// Base camera
const camera = new THREE.PerspectiveCamera(25, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 8
camera.position.y = 10
camera.position.z = 12
scene.add(camera)// Controls
const controls = new OrbitControls(camera, canvas)
controls.target.y = 3
controls.enableDamping = true/*** Renderer*/
const renderer = new THREE.WebGLRenderer({canvas: canvas,antialias: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))/*** Model*/
gltfLoader.load('./bakedModel.glb',(gltf) =>{gltf.scene.getObjectByName('baked').material.map.anisotropy = 8console.log(gltf.scene)scene.add(gltf.scene)}
)/* Smoke
*/
// Geometry
const smokeGeometry = new THREE.PlaneGeometry(1,1,16,64)
smokeGeometry.translate(0,0.5,0)
smokeGeometry.scale(1.5,6,1.5)// Perlin texture
const perlinTexture = textureLoader.load('./perlin.png')
perlinTexture.wrapS = THREE.RepeatWrapping
perlinTexture.wrapT = THREE.RepeatWrapping// Material
const smokeMaterial = new THREE.ShaderMaterial({// wireframe:true,vertexShader:coffeeSmokeVertexShader,fragmentShader:coffeeSmokeFragmentShader,side:THREE.DoubleSide,transparent:true, // 支持材料透明depthWrite:false, //深度 写入 (防止透明遮挡)uniforms:{uTime: new THREE.Uniform(0),uPerlinTexture: new THREE.Uniform(perlinTexture), // {value:perlinTexture} 一样}
})//Mesh
const smoke = new THREE.Mesh(smokeGeometry,smokeMaterial)
smoke.position.y = 1.83
scene.add(smoke)/*** Animate*/
const clock = new THREE.Clock()const tick = () =>
{const elapsedTime = clock.getElapsedTime()// update materialsmokeMaterial.uniforms.uTime.value = elapsedTime// Update controlscontrols.update()// Renderrenderer.render(scene, camera)// Call tick again on the next framewindow.requestAnimationFrame(tick)
}tick()
// 这里特别注意 projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0) 乘的顺序是固定的,不然会出问题
/* pow(x,y) x的y次方。如果x小于0，结果是未定义的。同样，如果x=0并且y<=0,结果也是未定义的。
*/uniform float uTime;
uniform sampler2D uPerlinTexture;// attribute vec2 uv; // 获取顶点的属性 uv，坐标等varying vec2 vUv;#include ../includes/rotate.glsl // 引入函数void main(){vec3 newPosition = position;// Twistfloat twistPerlin = texture2D(uPerlinTexture,vec2(0.5,uv.y * 0.2 - uTime * 0.005) // 添加动画，随风飘散).r;float angle = twistPerlin * 10.0; // 海拔newPosition.xz = rotate2D(newPosition.xz,angle);// Windvec2 windOffset = vec2(texture2D(uPerlinTexture,vec2(0.25,uTime * 0.01)).r - 0.5, // 另一个取值 风向偏移 0-1减去0.5 x轴就是正负0.5 ，x轴;texture2D(uPerlinTexture,vec2(0.75,uTime * 0.01)).r - 0.5 // z轴正负移动);windOffset *= pow(uv.y,2.0) * 10.0; // 得到曲线newPosition.xz += windOffset;vec4 modelPosition = modelMatrix * vec4(newPosition,1.0); // 通过模型矩阵获得模型位置vec4 viewPosition = viewMatrix * modelPosition; // 通过视图矩阵获取视图位置vec4 projectionPosition = projectionMatrix * viewPosition; // 通过投影矩阵获取投影位置gl_Position = projectionPosition;vUv = uv;
}fragment.glsl
uniform float uTime;
uniform sampler2D uPerlinTexture; // texture2D 2D采样器/* smoothstep(edge0, edge1, x)如果x <= edge0，返回0.0 ；如果x >= edge1 返回1.0；如果edge0 < x < edge1，则执行0~1之间的平滑埃尔米特差值。如果edge0 >= edge1，结果是未定义的。*/varying vec2 vUv;void main(){// Scale and animatevec2 smokeUv = vUv;smokeUv.x *= 0.3;smokeUv.y *= 0.3;smokeUv.y -= uTime * 0.03;// smokefloat smoke = texture2D(uPerlinTexture,smokeUv).r;// Remapsmoke = smoothstep(0.4,1.0,smoke);// // Edges 重新映射 淡化边缘 （由于边缘边界很明显）组合起来相乘即可// smoke = 1.0;smoke *= smoothstep(0.0,0.1,vUv.x); // 0-1 左侧0.0-0.1淡化smoke *= smoothstep(1.0,0.9,vUv.x); smoke *= smoothstep(0.0,0.1,vUv.y); // 0-1 左侧0.0-0.1淡化smoke *= smoothstep(1.0,0.4,vUv.y); gl_FragColor = vec4(0.6,0.3,0.2,smoke);// gl_FragColor = vec4(1.0,0.0,0.0,1.0);// 色调映射#include <tonemapping_fragment>#include <colorspace_fragment>}rotate.glsl
vec2 rotate2D(vec2 value,float angle){float s = sin(angle);float c = cos(angle);mat2 m = mat2(c,s,-s,c);return m * value;
}二、效果
shaders - coffee smoke
总结
如何制作烟雾，以及着色器中热气的运动状态应用。
