master

分支 (1)

管理

管理

master

web-gl-learning
/
webgl.html

<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webgl</title>

    <style>
        .canvas-warpper {
            position: relative;
        }

        .canvas-settings {
            display: flex;
            flex-direction: column;
            position: absolute;
            right: 0;
            top: 0;
            align-items: flex-end;
        }

        .canvas-settings input {
            margin-left: 50px;
        }
    </style>
</head>

<body>
    <div class="canvas-warpper">
        <div>
            <canvas width="800" height="600" id="webgl"></canvas>
        </div>
        <!-- <div class="canvas-settings">
            <label for="x">
                x
                <input type="range" min="-200" max="+200" step="1" id="x" />
            </label>
            <label for="y">
                y
                <input type="range" min="-200" max="+200" step="1" id="y" />
            </label>
            <label for="z">
                z
                <input type="range" min="-200" max="+200" step="1" id="z" />
            </label>
            <label for="scale">
                scale
                <input type="range" min="0.5" max="2" step="0.1" id="scale" />
            </label>
            <label for="xRotation">
                x rotation
                <input type="range" min="-180" max="180" step="1" id="xRotation" />
            </label>
            <label for="yRotation">
                y rotation
                <input type="range" min="-180" max="180" step="1" id="yRotation" />
            </label>
            <label for="zRotation">
                z rotation
                <input type="range" min="-180" max="180" step="1" id="zRotation" />
            </label>
            <label for="fov">
                field of view
                <input type="range" min="60" max="180" step="1" id="fov" />
            </label>
        </div> -->
    </div>
    <script src="./dist/bundle.js"></script>
</body>

</html>