前端组件的问题 如何在一个组件组件添加form
看到一个十分炫酷的前端组件 打算作为网页登入页面背景
组件链接为：http://www.yyyweb.com/demo/webgl-clouds/
想在这个中间加一个form 悬浮中间 但是不会加~~~请大神解惑
absolute定位的div浮动到canvas上就行了，div里面放form表单
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>HTML5 云朵效果</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://www.yyyweb.com/demo/common/init.css">
<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;
}
#loginForm{width:300px;height:200px;border:solid 1px #000;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-100px}
</style>
</head>
<body>
<form id="loginForm"><input type="text" />,,,其他输入项目</form>
<script type="text/javascript" src="http://www.yyyweb.com/demo/webgl-clouds/assets/three.min.js"></script>
<script type="text/javascript" src="http://www.yyyweb.com/demo/webgl-clouds/assets/Detector.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 container;
var camera, scene, renderer;
var mesh, geometry, material;
var mouseX = 0, mouseY = 0;
var start_time = Date.now();
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
// 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);
container.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
container.style.backgroundSize = '32px 100%';
//
camera = new THREE.PerspectiveCamera(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', null, animate);
texture.magFilter = THREE.LinearMipMapLinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
var fog = new THREE.Fog(0x4584b4, -100, 3000);
material = new THREE.ShaderMaterial({
uniforms: {
"map": { type: "t", value: 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,
depthWrite: false,
depthTest: false,
transparent: true
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));
for (var 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;
THREE.GeometryUtils.merge(geometry, plane);
}
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -8000;
scene.add(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);
position = ((Date.now() - start_time) * 0.03) % 8000;
camera.position.x += (mouseX - camera.position.x) * 0.01;
camera.position.y += (-mouseY - camera.position.y) * 0.01;
camera.position.z = -position + 8000;
renderer.render(scene, camera);
}
</script>
<script src="http://www.yyyweb.com/demo/common/jquery.min.js"></script>
</body>
</html>
var texture = THREE.ImageUtils.loadTexture('cloud10.png', null, animate);
注意替换这个地址为你网站的
这是利用html5的webgl/canvas画出来的，核心代码是
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container;
var camera, scene, renderer;
var mesh, geometry, material;
var mouseX = 0, mouseY = 0;
var start_time = Date.now();
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// 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);
container.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
container.style.backgroundSize = '32px 100%';
//
camera = new THREE.PerspectiveCamera( 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', null, animate );
texture.magFilter = THREE.LinearMipMapLinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
var fog = new THREE.Fog( 0x4584b4, - 100, 3000 );
material = new THREE.ShaderMaterial( {
uniforms: {
"map": { type: "t", value: 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,
depthWrite: false,
depthTest: false,
transparent: true
} );
var plane = new THREE.Mesh( new THREE.PlaneGeometry( 64, 64 ) );
for ( var 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;
THREE.GeometryUtils.merge( geometry, plane );
}
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
mesh = new THREE.Mesh( geometry, material );
mesh.position.z = - 8000;
scene.add( 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 );
position = ( ( Date.now() - start_time ) * 0.03 ) % 8000;
camera.position.x += ( mouseX - camera.position.x ) * 0.01;
camera.position.y += ( - mouseY - camera.position.y ) * 0.01;
camera.position.z = - position + 8000;
renderer.render( scene, camera );
}