JSFiddle - React, Tailwind, and code Playground

by jonnyc

HTML

<div id="container">
<div id="info">MOVE mouse &amp; press LEFT/A to rotate, or press MIDDLE/S to zoom</div>

CSS

body {
    font-family: Monospace;
    background-color: #fff;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
#info {
    text-align:center;
    color:#000;
    position: absolute;
    top: 0px; width: 100%;
    padding: 5px;
}
#inset  {
    width: 200px;
    height: 200px;
    background-color: #fff; /* or transparent; */
    border: 1px solid black; /* or none; */
    margin: 20px;
    padding: 0px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 100;
}

JavaScript

// Insert window with axes showing world orientation
// Useful with Trackball controls when zooming
// WestLangley

// note: zooming may not work in jsfiddle because the javascript window is capturing the keyboard events

var container,
    camera,
    scene,
    renderer,
    axes,
    cube,
    CANVAS_WIDTH = 200,
    CANVAS_HEIGHT = 200,
    CAM_DISTANCE = 300;

// main canvas
// -----------------------------------------------

// dom
container = document.getElementById( 'container' );

// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

// scene
scene = new THREE.Scene();

// camera
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 150;
camera.position.z = 500;
camera.lookAt( scene.position );
scene.add( camera );

// controls
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.noPan = false; // it's probably best to prevent panning in this case

// KO with wireframe:true
var mat = new THREE.MeshBasicMaterial({color:0xFF0000, wireframe:true});

// WORKS
//r mat = new THREE.MeshBasicMaterial({color:0x000000, wireframe:false});

var faceGeo = new THREE.PlaneGeometry( 500, 500, 25, 25);
faceGeo.faceVertexUvs[1] = faceGeo.faceVertexUvs[0];
var faceMesh = new THREE.Mesh( faceGeo, mat ); 
faceMesh.doubleSided = false;
scene.add(faceMesh);
    
// axes
axes = new THREE.AxisHelper( );
scene.add( axes );


// animate
// -----------------------------------------------

function render() {

    renderer.render( scene, camera );
}

(function animate() {

    requestAnimationFrame( animate );

    controls.update( );
    
    // Add - Remove grid
    if (faceMesh != undefined)
    {
        var yVector = new THREE.Vector3(0.0, 1.0, 0.0);
        var cameraDir = camera.matrix.getColumnZ();
    
        var dot = yVector.dot(cameraDir);
        if (dot < 0.0)
        {    
        ...