testpage/index.html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Jon Trombone</title>

    <style>
        body {
            font-family: Monospace;
            background-color: #0b0b0b;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }
        .info {
            color: #fff;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display:block;
            pointer-events: none;
        }
        .info a{ color: #00f; font-weight: bold; text-decoration: underline; cursor: pointer; pointer-events: initial; }
    </style>

    <style>
        div#jon-trombone-container {
            width: 512px;
            height: 512px;
            margin-top: 3.0em;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

    <!-- three.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
    <!-- Optional Modules -->
    <script src="../dist/dependencies/OrbitControls.js"></script>
    <script src="https://unpkg.com/guify"></script>

</head>


<body>

    <div id="jon-trombone-container"></div>
    <script src="../dist/jon-trombone.js"></script>

</body>

</html>