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_fragment_shader = [ "varying vec2 vUv;", "uniform sampler2D tPositions;", "void main() {", "vec4 pos = texture2D( tPositions, vUv );", "gl_FragColor = pos;", "};" ].join("\n"); var cpu_gpu_material = new THREE.ShaderMaterial({ uniforms: { tPositions: { type: "t", value: null } }, vertexShader: texture_cpu_to_gpu_vertex_shader, fragmentShader: texture_cpu_to_gpu_fragment_shader }); var sceneRTTPos = new THREE.Scene(); sceneRTTPos.add(cameraRTT); var plane = new THREE.PlaneGeometry(textureWidth, textureWidth); quad = new THREE.Mesh(plane, simulationShader); quad.position.z = -5000; sceneRTTPos.add(quad); this.textureWidth = textureWidth; this.sceneRTTPos = sceneRTTPos; this.cameraRTT = cameraRTT; this.renderer = renderer; this.cpu_gpu_material = cpu_gpu_material; this.simulationShader = simulationShader; }; THREE.FBOUtils.createTextureFromData = function(width, height, data, options) { options || (options = {}); var texture = new THREE.DataTexture( new Float32Array(data), width, height, THREE.RGBAFormat, THREE.FloatType, null, THREE.RepeatWrapping, THREE.RepeatWrapping, THREE.NearestFilter, THREE.NearestFilter ); texture.needsUpdate = true; return texture; }; THREE.FBOUtils.prototype.renderToTexture = function(texture, renderToTexture) { this.cpu_gpu_material.uniforms.tPositions.value = texture; this.renderer.render(this.sceneRTTPos, this.cameraRTT, renderToTexture, false); }; THREE.FBOUtils.prototype.pushDataToTexture = function(data, renderToTexture) { var texture = THREE.FBOUtils.createTextureFromData( this.textureWidth, this.textureWidth, data ); this.renderToTexture(texture, renderToTexture); }; THREE.FBOUtils.prototype.simulate = function(target) { this.renderer.render( this.sceneRTTPos, this.cameraRTT, target, false); } // THREE.FBOUtils.setSimulationShader(); // Perhaps this can be moved outside? </script> <script type="text/javascript" > THREE.OrbitControls2 = function ( object ) { var scope = this; var phi = Math.PI / 2, theta = 0; var EPS = 0.000001; var mouse = new THREE.Vector2(); this.enabled = true; this.phiMin = 0; this.phiMax = Math.PI; this.thetaMin = - Infinity; this.thetaMax = Infinity; this.scaleX = 1; this.scaleY = 1; this.scaleZ = 1; this.speed = 1; this.radius = 200; this.center = new THREE.Vector3(); this.update = function () { if ( this.enabled === false ) return; phi += mouse.y * Math.PI / 180; theta += mouse.x * Math.PI / 180; phi = Math.max( scope.phiMin + EPS, Math.min( scope.phiMax - EPS, phi ) ); theta = Math.max( scope.thetaMin, Math.min( scope.thetaMax, theta ) ); object.position.x = scope.radius * Math.sin( phi ) * Math.sin( theta ) * scope.scaleX; object.position.y = scope.radius * Math.cos( phi ) * scope.scaleY; object.position.z = scope.radius * Math.sin( phi ) * Math.cos( theta ) * scope.scaleZ; object.lookAt( scope.center ); }; var onDocumentMouseMove = function ( event ) { mouse.x = ( ( event.clientX / window.innerWidth ) - 0.5 ) * scope.speed; mouse.y = ( ( event.clientY / window.innerHeight ) - 0.5 ) * scope.speed; }; document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false ); }; </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script id="texture_vertex_simulation_shader" type="x-shader/x-vertex"> varying vec2 vUv; void main() { vUv = vec2(uv.x, 1.0 - uv.y); gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } </script> <script id="texture_fragment_simulation_shader" type="x-shader/x-fragment"> // simulation varying vec2 vUv; uniform vec3 origin; uniform sampler2D tPositions; uniform float timer; float rand(vec2 co){ return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } void main() { vec3 pos = texture2D( tPositions, vUv ).xyz; if ( rand( vUv .........完整代码请登录后点击上方下载按钮下载查看
网友评论0