看到一个十分炫酷的前端组件 打算作为网页登入页面背景
组件链接为:http://www.yyyweb.com/demo/webgl-clouds/
想在这个中间加一个form 悬浮中间 但是不会加~~~请大神解惑
前端组件的问题 如何在一个组件组件添加form
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- 斯洛文尼亚旅游 2017-03-11 07:31关注
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);
注意替换这个地址为你网站的本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 用Multisim设计汽车尾灯控制电路
- ¥15 关于#java#的问题,请各位专家解答!(开发工具-eclipse)
- ¥100 求用matlab求解上述微分方程的程序代码
- ¥15 MAC安装佳能LBP2900驱动的网盘提取码
- ¥400 微信停车小程序谁懂的来
- ¥15 ATAC测序到底用什么peak文件做Diffbind差异分析
- ¥15 安装ubantu过程中第一个vfat 文件挂载失败
- ¥20 GZ::CTF如何兼容一些靶机?
- ¥15 etcd集群部署问题
- ¥20 谁可以帮我一下问一下各位