哈哈哈123457 2017-03-11 07:12 采纳率: 86%
浏览 1398
已采纳

前端组件的问题 如何在一个组件组件添加form

看到一个十分炫酷的前端组件 打算作为网页登入页面背景
组件链接为：http://www.yyyweb.com/demo/webgl-clouds/
想在这个中间加一个form 悬浮中间 但是不会加~~~请大神解惑
图片说明

  • 写回答

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);
    注意替换这个地址为你网站的

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥30 STM32 INMP441无法读取数据
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上，请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。
  • ¥15 各位 帮我看看如何写代码，打出来的图形要和如下图呈现的一样，急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境