JSFiddle - React, Tailwind, and code Playground

by Burkhard GS

HTML

<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>

JavaScript

renderer = new THREE.CanvasRenderer();

// SWITCH HERE
// renderer = new THREE.WebGLRenderer();

var container, stats;

var camera, scene, renderer;

var cube, plane;

var targetRotation = 0;
var targetRotationOnMouseDown = 0;

var mouseX = 0;
var mouseXOnMouseDown = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);


    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.y = 150;
    camera.position.z = 500;

    scene = new THREE.Scene();

    // Cube

    var geometry = new THREE.CubeGeometry(300, 300, 300);

    for (var i = 0; i < geometry.faces.length; i++) {

        // geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );

    }



    var wireframeMaterial = new THREE.MeshBasicMaterial({
        color: 0x00ee00,
        wireframe: true,
        transparent: true,
        opacity: .5
    });


    cube = new THREE.Mesh(geometry, wireframeMaterial);
    cube.position.y = 150;
    scene.add(cube);

    cube.rotation.x = .615;
    cube.rotation.y = .785;

    // Render


    renderer.setSize(window.innerWidth, window.innerHeight);

    container.appendChild(renderer.domElement);



    document.addEventListener('mousedown', onDocumentMouseDown, false);
    document.addEventListener('touchstart', onDocumentTouchStart, false);
    document.addEventListener('touchmove', onDocumentTouchMove, false);

    //

    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

//

function onDocumentMouseDown(event) {

    event.preventDefault();

   ...