three实现三维3d粒子云尘埃漂浮变幻动画效果代码
代码语言:html
所属分类:粒子
代码描述:three实现三维3d粒子云尘埃漂浮变幻动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #000000; margin: 0px; overflow: hidden; } #info { color: #ffffff; font-family: Monospace; font-size: 13px; text-align: center; font-weight: bold; position: absolute; top: 0px; width: 100%; padding: 5px; } a { color: #0040ff; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.58.js"></script> <script> /* @author zz85 */ // Utils for FBO Particles Simulations THREE.FBOUtils = function( textureWidth, renderer, simulationShader ) { // Init RTT stuff gl = renderer.getContext(); if( !gl.getExtension( "OES_texture_float" )) { alert( "No OES_texture_float support for float textures!" ); return; } if( gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) == 0) { alert( "No support for vertex shader textures!" ); return; } var cameraRTT = new THREE.OrthographicCamera(-textureWidth/2, textureWidth/2, textureWidth/2, -textureWidth/2, -1000000, 1000000); cameraRTT.position.z = 100; var rtTexturePos = new THREE.WebGLRenderTarget(textureWidth, textureWidth, { wrapS:THREE.RepeatWrapping, wrapT:THREE.RepeatWrapping, minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat, type:THREE.FloatType, stencilBuffer: false }); // Shader Stuff var texture_cpu_to_gpu_vertex_shader = [ "varying vec2 vUv;", "void main() {", "vUv = vec2(uv.x, 1.0 - uv.y);", "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", "} " ].join("\n"); var texture_cpu_to_gpu_fragme.........完整代码请登录后点击上方下载按钮下载查看
网友评论0