<!-- Made with http://github.com/trusktr/infamous -->
<script src="//unpkg.com/infamous@18.0.5/global.js"></script>

<div id="description">
    <h1>
        Mixing regular DOM with WebGL
    </h1>
    <p>
        The following is a scene that has regular HTML content mixed with 3D WebGL content. The text is just traditional HTML text. Try using the element inspector to see what it's doing. Made with <a href="http://github.com/trusktr/infamous" target="_blank">infamous</a>.
    </p>
</div>

<i-scene experimental-webgl="true" id="scene"
    backgroundColor="0 0 0"
    backgroundOpacity="0"
    style="perspective: 800px; background: #252525"
    shadowmap-type="basic" // one of basic, pcf, pcfsoft
    >
    <i-node id="root" align="0.5 0.5 0.5" size="0 0 0" rotation="0 45 0">

        <i-node id="first"
            size="200 200 0"
            align="0.5 0.5 0.5"
            mountPoint="0.5 0.5 0.5"
            style="background: #A1D490">

            <h1>Regular HTML text</h1>

            <i-node id="second"
                size="200 200 0"
                position="100 100 10"
                style="background: pink">

                <div style="width: 100%; height: 100%; overflow:hidden">
                    <h2 contenteditable><br>mixed with WebGL (edit me)</h2>
                </div>

            </i-node>

        </i-node>

        <!-- i-sphere and i-box are short-hand for i-mesh with a has="" attribute specifying the geometries -->
        <i-sphere size="50 50 50" align="0.5 0.5 0.5" mountPoint="0.5 0.5 0.5" position="0 25 50" color="#C390D4"></i-sphere>
        <i-box size="50 50 50" align="0.5 0.5 0.5" mountPoint="0.5 0.5 0.5" position="100 40 90" rotation="30 30 30" color="#D4A190"></i-box>

        <i-mesh id="light" has="sphere-geometry basic-material"
            size="10 10 10" color="#2BE3FF"
            align="0.5 0.5 0.5" position="-20 50 130"
            receive-shadow="false" cast-shadow="false"
            >
            <i-point-light color="teal" align="0.5 0.5 0.5" size="0 0 0" cast-shadow="true" intensity="3"></i-point-light>
        </i-mesh>

    </i-node>

</i-scene>
body, html { width: 100%; height: 100%; margin: 0; padding: 0; }
#description { padding: 10px; }
* { outline: none; } /* get rid of contenteditable outline */
infamous.html.useDefaultNames()

light.position = function(x,y,z,time) { return [x, 100 * Math.sin(time * 0.001), z] }
first.rotation = function(x,y,z,time) { return [x, 30 * Math.cos(time * 0.001) - 15, z] }
second.rotation = function(x,y,z,time) { return [x, 5 * Math.cos(time * 0.005) - 2.5, z] }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.