JSFiddle - React, Tailwind, and code Playground

by dimoslive

JavaScript

/*
 Introductory SceneJS scene which renders the venerable OpenGL teapot.

 Lindsay S. Kay,
 [email protected]

 To render the teapot, SceneJS will traverse the scene in depth-first order. Each node will set some
 WebGL state on visit, then un-set it again before exit. In this graph, the root
 scene node binds to a Canvas element, then the rest of the nodes specify various transforms, lights,
 material properties, all wrapping a teapot geometry node.

 This scene is interactive; to rotate the view, it takes two variables, "yaw" and "pitch", which are
 updated on rotate nodes from mouse input.

 */

$(document).ready(function() {
    SceneJS.createNode({

        type: "scene",

/* ID that we'll access the scene by when we want to render it
         */
        id: "theScene",

/* Bind scene to a WebGL canvas:
         */
        canvasId: "theCanvas",

/* You can optionally write logging to a DIV - scene will log to the console as well.
         */
        loggingElementId: "theLoggingDiv",

        nodes: [

/* Viewing transform specifies eye position, looking
         * at the origin by default
         */


             {
            type: "lookAt",
            eye: {
                x: 0.0,
                y: 10.0,
                z: -15
            },
            look: {
                y: 1.0
            },
            up: {
                y: 1.0
            },

            nodes: [

/* Camera describes the projection
                 */

                {
                type: "camera",
                optics: {
                    type: "perspective",
                    fovy: 25.0,
                    aspect: 1.47,
                    near: 0.10,
                    far: 300.0
                },

                nodes: [


/* A lights node inserts  point lights into the world-space.
                         * You can have many of these, nested within modelling transforms
                         * if you want to move them around.
                  ...