webgl打造逼真的交互三维3d云海腾云驾雾特效代码-html代码-BFW代码库

webgl打造逼真的交互三维3d云海腾云驾雾特效代码

代码语言：html

所属分类：三维

代码描述：webgl打造逼真的交互三维3d云海腾云驾雾特效代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE HTML>

<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body {
	background-color: #326696;
	margin: 0px;
	overflow: hidden;
	font-family: Monospace;
	font-size: 13px;
	text-align: center;
	font-weight: bold;
	text-align: center;
}
a {
	color: #0078ff;
}
</style>
</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ThreeWebGL.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ThreeExtras.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Detector.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/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();
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') + ')';
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('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAMAUExURQAAANje4Nbc3tfd3+rt7ufq7OTo6ufq7Ons7ujs7ff4+fn6+tfc3/7+/vj5+fb4+Pb3+Pr6+/////////////v7/P////////////n6+v////////7+/vLz9P39/f///////////////////9bc3vb4+PDy8/7///3+/u7w8f////////////7+//39/f7+//////T19tbb3tbc3vb4+P///+bp697j5f////n5+vDy8/P09e/x8u7x8vHy8////////+/x8ebq6////+Xo6u3v8PT29tbc3vf4+f///+rt7vL09e/x8vv8/Ozu7+3w8djd4P///+Lm6Pj5+f////////39/f39/dzh4////9HY2v39/dXb3v7//9fd3/n5+tjd4P///9fd3/X29////9fc3+vt7s7V2NXb3vP09f////n5+vP09ejs7ebp69Xb3ens7uLm6Nbc3tjd4OLm6Nfc39bc3tTa3ens7fDy8+ns7dnf4fb3+Njd4PP09d7i5fz8/P39/dne4eHl5+Xp6v39/t7j5dzg49je4OXo6tfd3/////7+/vr6+8/W2efq6/7+/t7j5d3h487V2Ozu79bc3tbc39vg4vf4+Pb3+Pv7/P///+fq7Ozv8Pb3+ODk5uPn6f////7+/t7i5PT19u7w8c7V2PX29/r6++bp6+fq7Ort7tfd3+/x8vX299bb3uHl5+nr7fP19dTa3fb3+O/x8vv7++Dk5v39/ePn6f///9Pa3Nne4dXb3vP19fP09dTa3ebq693i5M/V2P///9bc3tfc3+fq7Njd4Pv8/Nfd39/j5dTa3eLm6OXo6f7+/uns7dLY2/P09dbb3tLY293i5OTo6fT19s/V2MzT1+3v8PP09dvg4uHl5+Hl5tHX2uHl59bb3trf4.........完整代码请登录后点击上方下载按钮下载查看