THREEJS 片元着色器实现更自然的呼吸灯效果

原创

于 2025-03-05 18:00:22 发布 · 411 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#着色器 #javascript #前端

在这里插入图片描述

<template>
  <div ref="container" class="three-container"></div>
</template>

<script setup>
import {
   
   ref, onMounted, onBeforeUnmount} from 'vue'
import * as THREE from 'three'
import {
   
   OrbitControls} from 'three/addons/controls/OrbitControls.js'
import {
   
   GUI} from 'three/addons/libs/lil-gui.module.min.js'


// 着色器代码保持原样
const vertexShader = `
varying vec2 vUv;
void main(){
    vUv = vec2(uv.x,uv.y);
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
}
`

const fragmentShader = `
varying vec2 vUv;
uniform float vTime;
uniform float vPow;
uniform vec3 vColor;

void main(){
    float vy = 1.0 - vUv.y;
    // 添加呼吸波动计算
    float breath = ( sin(vTime * 2.0) * 0.5 + sin(vTime * 3.0) * 0.3) * 0.5 + 0.5; // 生成0-1的波动值
    float alpha = pow(vy, vPow) * breath; // 叠加呼吸效果

    // 添加颜色脉冲效果
    vec3 pulseColor = vColor * (0.8 + breath * 0.2);

    gl_FragColor = vec4(pulseColor, alpha);

    // 在颜色计算后添加边缘光晕
    float edgeGlow = smoothstep(0.7, 1.0, vy);
    gl_FragColor.rgb += edgeGlow * breath * 0.5;
}
`

const container = ref(null)
let scene, renderer, camera, orbit, gui
const uniforms = {
   
   
  vTime: {
   
   value: 0.01},
  vPow: {
   
   value: 2.0},
  vColor: {
   
   value: