JSFiddle - React, Tailwind, and code Playground

by jlongster

HTML

<script src="http://jlongster.com/s/dom3d/vector.js"></script>
<script src="http://jlongster.com/s/dom3d/dom3d.js"></script>
<script src="http://jlongster.com/s/dom3d/renderer.js"></script>
<script src="http://jlongster.com/s/dom3d/renderer_css.js"></script>
<script src="http://jlongster.com/s/dom3d/heap.js"></script>
<script src="http://jlongster.com/s/dom3d/teapot.js"></script>
<div id="canvas"></div>

CSS

#canvas {
    position: relative;
    top: 10px;
}
      
._dom3d {
      position: absolute;
      top: 0;
      left: 0;
}

JavaScript

// Press the "Play" button at the top

$(function() {
    var w = $(window);
    
    dom3d.current_renderer(new RendererCSS());
    dom3d.init(w.width(), w.height());
    dom3d.current_frustum(
        dom3d.make_frustum(60.0,
                           dom3d.current_width() / dom3d.current_height(),
                           1.0,
                           1000.0)
    );                       
    dom3d.current_eye($v(0,0,-4));
    dom3d.current_light(vec_unit($v(-1.0, 0.0, -.2)));
    
    for(var i=0; i<teapot.data.length; i++) {
        var tri = teapot.data[i];
        tri.color = $c(Math.random() * 255,
                       Math.random() * 255,
                       Math.random() * 255);
    }
      
    function frame(data) {
        dom3d.clear('canvas');
        dom3d.render('canvas', data);
    }

    teapot.yaw = 0.5;
    teapot.pitch = 3.4;
    frame(teapot);
})