JSFiddle - React, Tailwind, and code Playground

by Animesh Shaw

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<div>
     <h3>Simple Three.js Example to draw Square <br /><br /></h3>

    <div id="container"></div>
</div>

CSS

* {
    margin: 0;
}
#container {
    width: 400px;
    height: 400px;
    background-color: #2e2e2e;
}

JavaScript

onLoad();

function onLoad() {
    /*
     * Get the container where we draw the Square
     * @type @exp;document@call;getElementById
     */
    var container = document.getElementById("container");

    /*
     * Create a THREE.js renderer and add it to the container.
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(container.offsetWidth, container.offsetHeight);
    container.appendChild(renderer.domElement);

    /*
     * Create a THREE.js Scene
     */
    var scene = new THREE.Scene();

    /*
     * Create a Perspective camera and add it to the Scene
     */
    var camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 1, 4000);
    camera.position.set(0, 0, 3.3333);
    scene.add(camera);

    /*
     * Create a Rectangle 
     */
    var geometry = new THREE.PlaneGeometry(2, 1);
    var material = new THREE.MeshBasicMaterial({
        color: 0xDB1E1E,
        //wireframe: true
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    /*
     * Render the Scene 
     */
    renderer.render(scene, camera);
}