canvans全屏云层交互动画

  • K5_376844
    了解作者
  • 115.5KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 06:51
    上传日期
canvans全屏云层交互动画
FullCloud.rar
  • FullCloud
  • images
  • cloud10.png
    57.2KB
  • index.html
    7.1KB
  • js
  • ThreeWebGL.js
    136.8KB
  • RequestAnimationFrame.js
    541B
  • Detector.js
    1.8KB
  • ThreeExtras.js
    85.5KB
  • 科e互联.url
    2.6KB
  • readme.html
    4.4KB
内容介绍
<!DOCTYPE HTML> <html lang="en"> <head> <title>全屏逼真动态3D云层动画特效代码 - 【科e互联】</title> <meta charset="utf-8"> <style type="text/css"> *{padding:0; margin:0;} body { background-color: #326696; margin: 0px; overflow: hidden; font-family: Monospace; font-size: 13px; text-align: center; font-weight: bold; text-align: center; } .keTitle{ height: 100px; line-height: 100px; font-size: 30px; font-family: '微软雅黑'; color: #FFF; text-align: center; font-weight: normal; width: 100%; position: absolute; z-index: 1000; left: 0px; top: 0px; } a,a:hover{ color: #39C!important; } .keBottom{ color: #39C; line-height: 28px; text-align: center; font-family: '微软雅黑'; width: 100%; position: absolute; left: 0px; bottom: 30px; z-index: 1000; } .keTxtP{font-size:16px; color:#39C;} .keUrl{color:#39C; font-size:30px;} .keUrl:hover{ text-decoration: underline; color: #39C; } </style> </head> <body> <h1 class="keTitle">全屏逼真动态3D云层动画特效代码(极酷)</h1> <script type="text/javascript" src="js/ThreeWebGL.js"></script> <script type="text/javascript" src="js/ThreeExtras.js"></script> <script type="text/javascript" src="js/Detector.js"></script> <script type="text/javascript" src="js/RequestAnimationFrame.js"></script> <script id="vs" type="x-shader/x-vertex"> varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } </script> <script id="fs" type="x-shader/x-fragment"> uniform sampler2D map; uniform vec3 fogColor; uniform float fogNear; uniform float fogFar; varying vec2 vUv; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep( fogNear, fogFar, depth ); gl_FragColor = texture2D( map, vUv ); gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 ); gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor ); } </script> <script type="text/javascript"> if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); // Bg gradient var canvas = document.createElement( 'canvas' ); canvas.width = 32; canvas.height = window.innerHeight; var context = canvas.getContext( '2d' ); var gradient = context.createLinearGradient( 0, 0, 0, canvas.height ); gradient.addColorStop(0, "#1e4877"); gradient.addColorStop(0.5, "#4584b4"); context.fillStyle = gradient; context.fillRect(0, 0, canvas.width, canvas.height); document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')'; // Clouds var container; var camera, scene, renderer, sky, mesh, geometry, material, i, h, color, colors = [], sprite, size, x, y, z; var mouseX = 0, mouseY = 0; var start_time = new Date().getTime(); var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 3000 ); camera.position.z = 6000; scene = new THREE.Scene(); geometry = new THREE.Geometry(); var texture = THREE.ImageUtils.loadTexture( 'images/cloud10.png' ); texture.magFilter = THREE.LinearMipMapLinearFilter; texture.minFilter = THREE.LinearMipMapLinearFilter; var fog = new THREE.Fog( 0x4584b4, - 100, 3000 ); material = new THREE.MeshShaderMaterial( { uniforms: { "map": { type: "t", value:2, texture: texture }, "fogColor" : { type: "c", value: fog.color }, "fogNear" : { type: "f", value: fog.near }, "fogFar" : { type: "f", value: fog.far }, }, vertexShader: document.getElementById( 'vs' ).textContent, fragmentShader: document.getElementById( 'fs' ).textContent, depthTest: false } ); var plane = new THREE.Mesh( new THREE.Plane( 64, 64 ) ); for ( i = 0; i < 8000; i++ ) { plane.position.x = Math.random() * 1000 - 500; plane.position.y = - Math.random() * Math.random() * 200 - 15; plane.position.z = i; plane.rotation.z = Math.random() * Math.PI; plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5; GeometryUtils.merge( geometry, plane ); } mesh = new THREE.Mesh( geometry, material ); scene.addObject( mesh ); mesh = new THREE.Mesh( geometry, material ); mesh.position.z = - 8000; scene.addObject( mesh ); renderer = new THREE.WebGLRenderer( { antialias: false } ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); window.addEventListener( 'resize', onWindowResize, false ); } function onDocumentMouseMove( event ) { mouseX = ( event.clientX - windowHalfX ) * 0.25; mouseY = ( event.clientY - windowHalfY ) * 0.15; } function onWindowResize( event ) { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function animate() { requestAnimationFrame( animate ); render(); } function render() { position = ( ( new Date().getTime() - start_time ) * 0.03 ) % 8000; camera.position.x += ( mouseX - camera.target.position.x ) * 0.01; camera.position.y += ( - mouseY - camera.target.position.y ) * 0.01; camera.position.z = - position + 8000; camera.target.position.x = camera.position.x; camera.target.position.y = camera.position.y; camera.target.position.z = camera.position.z - 1000; renderer.render( scene, camera ); } </script> <div class="keBottom"> <p class="keTxtP">科e互联网页特效集锦---更多特效请访问 <a class="keUrl" href="http://www.internetke.com" target="_blank" rel='nofollow' onclick='return false;'>www.internetke.com</a></p> <p class="keTxtP">本站导航: <a href="http://www.internetke.com/" target="_blank" class="cor_bs" rel='nofollow' onclick='return false;'>网站建设</a> | <a href="http://www.internetke.com/material/" target="_blank" class="cor_bs" rel='nofollow' onclick='return false;'>网页素材</a> | <a href="http://www.internetke.com/effects/" target="_blank" class="cor_bs" rel='nofollow' onclick='return false;'>网页特效</a> | <a href="http://www.internetke.com/share/" target="_blank" class="cor_bs" rel='nofollow' onclick='return false;'>设计分享</a> | <a href="http://www.internetke.com/tutorial/" target="_blank" class="cor_bs" rel='nofollow' onclick='return false;'>建站教程</a> | <a href="http://www.internetke.com/model/" target="_blank" class="cor_bs" rel='nofollow' onclick='return false;'>网站模版</a> | <a href="http://www.internetke.com/appreciate/" target="_blank" class="cor_bs" rel='nofollow' onclick='return false;'>酷站赏析</a> </p> <p class="keTxtP">*尊重他人劳动成果,转载请自觉注明出处!注:此代码为【科e整理/原创特效】仅供学习交流,请勿用于商业用途。 <a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=a7df3558c291e0407375b9ad649d96a6e507286ffeb0650c65a221d1500a0779" class="button red" title="北京网站建设,网页特效QQ交流群-科e互联" rel='nofollow' onclick='return false;'>加入QQ交流群</a></p> </div> </body> </html>
评论
    相关推荐