当前位置：首页 > news >正文

vue+js 创造动态的光晕圈

news 来源：原创 2025/5/26 6:08:27

嗨，我是小路。今天主要和大家分享的主题是“vue+js 创造动态的光晕圈”。

对于着色器这块，功能确实强大，而自己才刚刚接触，确实需要花费时间进行学习。晚点找找着色器对应的课程进行学习。但今天还是按照视图例子，将项目跑起来，尽可能去理解它。

1.uniform vec2 iResolution;

定义：在着色器中的作用是定义着色器的大小，以适应整个画布。‌在着色器编程中，uniform变量用于传递不变的数据到着色器。iResolution是一个uniform vec2类型的变量，用于存储画布的分辨率信息。这允许着色器根据画布的尺寸来调整其输出，确保图形或效果能够正确地填充整个屏幕。

2.uniform float iTime;

定义：在着色器中用于表示程序运行的时间，单位为秒。这个变量通常用于在着色器中实现动态效果，比如动画或时间相关的计算。在GLSL（OpenGL着色语言）中，uniform 变量用于在着色器之间传递数据。iTime 是一个 uniform float 类型的变量，它表示从程序开始运行以来的时间，单位是秒。这个变量通常由应用程序在每一帧更新，并在着色器中使用来计算随时间变化的效果。

二、实例代码

<!--创建一个球体-->
<template><div class="pageBox"><div class="leftBox" ref="leftRef"></div></div></template>
<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import * as THREE from 'three';
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { getRandomColor, createLight } from '../utils/commonThree';
const leftRef = ref();
// 定义相机输出画布的尺寸(单位:像素px)
let width = window.innerWidth; //宽度
let height = window.innerHeight; //高度
// 创建3D场景对象Scene
const scene = new THREE.Scene();
//设置背景色
scene.background = new THREE.Color(0x646d59);const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
//三角形缩放过大时，会形成多种三角形形成的背景图
camera.position.z = 5;// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();let tubes = [];
let material
const createTube = () => {// const points = [];// for (let i = 0; i < 5; i++) {//   points.push(new THREE.Vector3(Math.sin(i * 2) * 10, Math.cos(i * 2) * 10, i * 10 - 20))// }// const curve = new THREE.CatmullRomCurve3(points);// const geometry = new THREE.TubeGeometry(//   curve,//   64,//分段数//   2,//半径//   8,//径向分段数//   false,//是否闭合// );const geometry = new THREE.PlaneGeometry(10,10);material = new THREE.ShaderMaterial({transparent: true,uniforms: {iResolution: { value: new THREE.Vector2() },iTime: { value: 0 },},vertexShader: `varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`,fragmentShader: `uniform vec2 iResolution;uniform float iTime;varying vec2 vUv;mat2 rotate2d(float angle) {return mat2(cos(angle), -sin(angle),sin(angle), cos(angle));}float variation(vec2 v1, vec2 v2, float strength, float speed) {return sin(dot(normalize(v1), normalize(v2)) * strength + iTime * speed) / 100.0;}vec3 paintCircle(vec2 uv, vec2 center, float rad, float width) {vec2 diff = center - uv;float len = length(diff);len += variation(diff, vec2(0.0, 1.0), 5.0, 2.0);len -= variation(diff, vec2(1.0, 0.0), 5.0, 2.0);float circle = smoothstep(rad-width, rad, len) - smoothstep(rad, rad+width, len);return vec3(circle);}void main() {vec2 uv = vUv;uv.x *= 1.5;uv.x -= 0.25;vec3 color;float radius = 0.35;vec2 center = vec2(0.5);color = paintCircle(uv, center, radius, 0.1);vec2 v = rotate2d(iTime) * uv;color *= vec3(v.x, v.y, 0.7 - v.y * v.x);color += paintCircle(uv, center, radius, 0.01);gl_FragColor = vec4(color, 1.0);}`,side: THREE.DoubleSide});const tube = new THREE.Mesh(geometry, material);//设置网格的随机位置// sphere.position.set(//   (Math.random() - 0.5) * 2000,//   (Math.random() - 0.5) * 1000,//   (Math.random() - 0.5) * 1000// );return tube;
}onMounted(() => {initData()//添加相机空间const controls = new OrbitControls(camera, renderer.domElement);// controls.enableDamping = false;controls.enableZoom = false;// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景controls.addEventListener('change', function () {renderer.render(scene, camera); //执行渲染操作});//监听鼠标、键盘事件renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)//将innerHTML置空，避免append重复添加渲染leftRef.value.innerHTML = ''leftRef.value.append(renderer.domElement);})
const initData = () => {createLight(scene);// for (let i = 1; i >= 0; i--) {const outSphere = createTube();tubes.push(outSphere);scene.add(outSphere);// }render();
}
function render() {requestAnimationFrame(render);// 旋转所有三角形// tubes.forEach(tube => {//   tube.rotation.x += 0.01;//   tube.rotation.y += 0.01;//   tube.rotation.z += 0.01;// });console.log( 'dfffff',material.uniforms.iResolution);material.uniforms.iResolution.value.set(window.innerWidth,window.innerHeight);material.uniforms.iTime.value = performance.now() / 1000;renderer.render(scene, camera);
}
onUnmounted(() => {//释放内存renderer.dispose();
})</script>
<style scoped lang="less">
.pageBox {width: 100%;height: 100vh;padding: 0;margin: 0;display: flex;justify-content: space-between;align-items: center;.rightBox {width: 100%;height: 100%;}
}
</style>