threejs/shader/将mesh的世界空间变换传入shader以得到正确光照

今天刚开始写shader material,要实现的是在一个已经有波形变化的平面上做基本Phong光照。本来PlaneGeometry是在XOY平面中的,转了九十度到XOZ平面上,结果发现出来的渲染效果不太对:
这里写图片描述

后来想了想,是因为我在创建mesh之后又旋转了mesh:

    sea.rotation.x = -Math.PI/2;

但是这并不会改变mesh.vertices中存储的position值,因为它们是model space的,而变换是在world space中进行的。

要改正很简单,mesh.matrixWorld保存了世界空间变换的矩阵,将其作为uniform传入vertex shader,乘modelMatrix即可。
代码:

varying vec2 vUv;
varying vec3 worldPos;
varying vec3 vNormal;
uniform mat4 transform;
void main() { 
    vUv = uv; 
    vNormal = normal;
    gl_Position = projectionMatrix * modelViewMatrix  * vec4( position, 
### Three.js 实现灯带流动 UV 动画 在 Three.js 中实现灯带流动 UV 动动画主要涉及自定义着色器 (Shader),通过修改顶点和片段着色器中的 UV 坐标来创建动态效果。下面是一个详细的说明以及相应的代码示例。 #### 创建场景并设置基本参数 初始化 WebGl 渲染器、相机和场景对象,加载几何体作为灯带的基础结构: ```javascript // 初始化渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 设置透视投影相机 const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 新建场景 const scene = new THREE.Scene(); // 加载平面网格表示灯带 const geometry = new THREE.PlaneGeometry(2, 2); // 宽高均为2单位长度的矩形面片 ``` #### 编写自定义 Shader 来控制 UV 变化 为了使纹理沿着特定方向平滑过渡,可以在顶点着色器中引入时间变量 `uTime` 并将其传递给片段着色器,在那里调整最终输出像素的颜色值: ```glsl // 顶点着色器 Vertex Shader varying vec2 vUv; uniform float uTime; void main() { vUv = uv + vec2(uTime * 0.1, 0.); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 ); } ``` ```glsl // 片段着色器 Fragment Shader uniform sampler2D texture1; uniform float uTime; varying vec2 vUv; void main(){ vec2 dynamicUV = fract(vUv); gl_FragColor = texture2D(texture1,dynamicUV); } ``` 上述 GLSL 代码实现了基于时间变化而不断更新的 UV 映射逻辑[^2]。 #### 将 Shader 应用于材质并与几何体组合成 Mesh 对象加入到 Scene 场景之中 利用前面编写的着色器程序构建一个带有纹理映射功能的标准材料类实例,并指定其使用的几何形状;最后把两者结合起来形成完整的三维模型放入场景内供后续绘制调用: ```javascript // 自定义材质 const material = new THREE.ShaderMaterial({ uniforms: { "uTime": { value: 0 }, "texture1": {value:new THREE.TextureLoader().load('path_to_your_texture')} }, vertexShader, fragmentShader }); // 组合几何体与材质成为可渲染的对象 const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); ``` #### 更新循环函数负责每帧刷新画面数据 为了让动画持续播放下去,还需要定期改变传入 shader 的时间戳数值,从而驱动整个系统的演化过程: ```javascript function animate(time){ requestAnimationFrame(animate); const deltaTime = time/1000; // 获得秒级的时间增量 // 修改 uniform 参数以影响光照强度或其他属性 material.uniforms.uTime.value += deltaTime*0.1; renderer.render(scene,camera); } requestAnimationFrame(animate); ``` 以上就是使用 Three.js 结合自定义着色器完成灯带流光效果的大致流程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值