three实现三维炫酷彩色逼真黑洞粒子运动动画代码
代码语言:html
所属分类:粒子
代码描述:three实现三维炫酷彩色逼真黑洞粒子运动动画代码
代码标签: three 三维 炫酷 彩色 逼真 黑洞 粒子 运动 动画 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Black Hole</title>
<style>
body { margin: 0; overflow: hidden; background-color: #000; }
canvas { display: block; width: 100vw; height: 100vh; }
</style>
</head>
<body>
<canvas class="webgl"></canvas>
<!-- Import Map for Three.js -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.141.0/build/three.module.js",
"three/examples/jsm/controls/OrbitControls.js": "https://unpkg.com/three@0.141.0/examples/jsm/controls/OrbitControls.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// --- 1. Shader Definitions (Extracted from source) ---
// Common Vertex Shader
const baseVertexShader = `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
// Noise Generator Shader
const noiseFragmentShader = `
precision highp float;
varying vec2 vUv;
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 permute(vec4 x) { return mod289(((x*34.0)+10.0)*x); }
vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
vec3 fade(vec3 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); }
float perlin3dPeriodic(vec3 P, vec3 rep) {
vec3 Pi0 = mod(floor(P), rep);
vec3 Pi1 = mod(Pi0 + vec3(1.0), rep);
Pi0 = mod289(Pi0); Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); vec3 Pf1 = Pf0 - vec3(1.0);
vec4 ix.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0