threejs实现一个三维太阳球体燃烧效果代码
代码语言:html
所属分类:三维
代码描述:threejs实现一个三维太阳球体燃烧效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aqua-1.5.5.css"> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: #f7f7fd; } </style> </head> <body > <div class="relative w-screen h-screen"> <div class="sun w-full h-full bg-black"></div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/stats-min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script> <script> const calcAspect = (el) => el.clientWidth / el.clientHeight; const getNormalizedMousePos = (e) => { return { x: (e.clientX / window.innerWidth) * 2 - 1, y: -(e.clientY / window.innerHeight) * 2 + 1 }; }; const templateVertexShader = ` varying vec2 vUv; void main(){ vec4 modelPosition=modelMatrix*vec4(position,1.); vec4 viewPosition=viewMatrix*modelPosition; vec4 projectedPosition=projectionMatrix*viewPosition; gl_Position=projectedPosition; vUv=uv; } `; const templateFragmentShader = ` uniform float uTime; uniform vec2 uMouse; uniform vec2 uResolution; varying vec2 vUv; void main(){ vec3 color=vec3(vUv.x,vUv.y,1.); gl_FragColor=vec4(color,1.); } `; const sunNoiseVertexShader = ` #define GLSLIFY 1 varying vec2 vUv; varying vec3 vPosition; void main(){ vec4 modelPosition=modelMatrix*vec4(position,1.); vec4 viewPosition=viewMatrix*modelPosition; vec4 projectedPosition=projectionMatrix*viewPosition; gl_Position=projectedPosition; vUv=uv; vPosition=position; } `; const sunNoiseFragmentShader = ` #define GLSLIFY 1 // // Description : Array and textureless GLSL 2D/3D/4D simplex // noise functions. // Author : Ian McEwan, Ashima Arts. // Maintainer : ijm // Lastmod : 20110822 (ijm) // License : Copyright (C) 2011 Ashima Arts. All rights reserved. // Distributed under the MIT License. See LICENSE file. // https://github.com/ashima/webgl-noise // vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } float mod289(float x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); } float permute(float x) { return mod289(((x*34.0)+1.0)*x); } vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } float taylorInvSqrt(float r) { return 1.79284291400159 - 0.85373472095314 * r; } vec4 grad4(float j, vec4 ip) { const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0); vec4 p,s; p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0; p.w = 1.5 - dot(abs(p.xyz), ones.xyz); s = vec4(lessThan(p, vec4(0.0))); p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www; return p; } // (sqrt(5) - 1)/4 = F4, used once below #define F4 0.309016994374947451 float snoise(vec4 v) { const vec4 C = vec4( 0.138196601125011, // (5 - sqrt(5))/20 G4 0.276393202250021, // 2 * G4 0.414589803375032, // 3 * G4 -0.447213595499958); // -1 + 4 * G4 // First corner vec4 i = floor(v + dot(v, vec4(F4)) ); vec4 x0 = v - i + dot(i, C.xxxx); // Other corners // Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI) vec4 i0; vec3 isX = step( x0.yzw, x0.xxx ); vec3 isYZ = step( x0.zww, x0.yyz ); // i0.x = dot( isX, vec3( 1.0 ) ); i0.x = isX.x + isX.y + isX.z; i0.yzw = 1.0 - isX; // i0.y += dot( isYZ.xy, vec2( 1.0 ) ); i0.y += isYZ.x + isYZ.y; i0.zw += 1.0 - isYZ.xy; i0.z += isYZ.z; i0.w += 1.0 - isYZ.z; // i0 now contains the unique values 0,1,2,3 in each channel vec4 i3 = clamp( i0, 0.0, 1.0 ); vec4 i2 = clamp( i0-1.0, 0.0, 1.0 ); vec4 i1 = clamp( i0-2.0, 0.0, 1.0 ); // x0 = x0 - 0.0 + 0.0 * C.xxxx // x1 = x0 - i1 + 1.0 * C.xxxx // x2 = x0 - i2 + 2.0 * C.xxxx /.........完整代码请登录后点击上方下载按钮下载查看
网友评论0