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