素材网 素材网

HTML5+js实现白天漂浮特效

下载资源()次

阅读次数()次

发布时间:2014-03-01

HTML5+js实现白天漂浮特效
分享到:

用法简介:

来源:xw素材网

HTML5+js实现白天漂浮特效。

注意:大家请使用谷歌浏览器或火狐浏览器查看特效。
文件引用:

<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( '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>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。