three+webgl实现2025新年快乐文字灵光动画效果代码
代码语言:html
所属分类:动画
代码描述:three+webgl实现2025新年快乐文字灵光动画效果代码
代码标签: three webgl 2025 新年 快乐 文字 灵光 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body{
overflow: hidden;
margin: 0;
}
</style>
</head>
<body translate="no">
<script type="importmap">
{
"imports": {
"three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/171/three.module.js",
"three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/171/jsm/"
}
}
</script>
<script>
let rotations = `
// https://forum.gamemaker.io/index.php?threads/solved-3d-rotations-with-a-shader-matrix-or-a-matrix-glsl-es.61064/
mat4 rx(float a) {
return mat4( 1.0, 0.0, 0.0, 0.0,
0.0,cos(a),sin(a), 0.0,
0.0,-sin(a),cos(a), 0.0,
0.0, 0.0, 0.0, 1.0);
}
mat4 ry(float a){
return mat4( cos(a),0.0, -sin(a), 0.0,
0.0, 1.0, 0.0, 0.0,
sin(a), 0.0, cos(a), 0.0,
0.0,0.0,0.0,1.0);
}
mat4 rz(float a){
return mat4( cos(a), sin(a), 0.0, 0.0,
-sin(a), cos(a), 0.0, 0.0,
0.0 , 0.0 ,1.0 ,0.0,
0.0 , 0.0 ,0.0 ,1.0);
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
mat4 rotationXYZ(vec3 angles){
return rz(angles.z) * ry(angles.y) * rx(angles.x);
}
`;
</script>
<script type="module">
import * as THREE from "three";
import .........完整代码请登录后点击上方下载按钮下载查看
















网友评论0