JSFiddle - React, Tailwind, and code Playground

by chilipeppr

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="http://threejs.org/examples/fonts/helvetiker_regular.typeface.js"></script>

CSS

body, html, * {
    padding:0;
    margin:0;
    overflow: hidden;
}

JavaScript

// Test of doing G2/G3 in Three.js


function mimicG2() {

    var p1, p2, pArc;
    
    // Mimic G2/G3 command in G Code in Three.js
    // G0 X0 Y0
    // G2 X0 Y1 I1 J0.5 F25 (clockwise arc in the XY plane)
    p1 = new THREE.Vector3(1, 1, 0);
    p2 = new THREE.Vector3(1, 2, 0);
    pArc = new THREE.Vector3(2, 1.5, 0);
    drawG2(p1, p2, pArc);
    //drawG2(p2, p1, pArc, false);
    
    // with arc center left (neg X dir) of p1/p2
    p1 = new THREE.Vector3(-1, 1, 0);
    p2 = new THREE.Vector3(-1, 2, 0);
    pArc = new THREE.Vector3(-2, 1.5, 0);
    //drawG2(p1, p2, pArc);
    drawG2(p2, p1, pArc);
    
    // with arc center below (neg y dir) of p1/p2
    // G2 X0 Y1 I1 J0.5 F25 (clockwise arc in the XY plane)
    p1 = new THREE.Vector3(1, -1, 0);
    p2 = new THREE.Vector3(2, -1, 0);
    pArc = new THREE.Vector3(1.5, -1.5, 0);
    drawG2(p1, p2, pArc);
    
    // with arc center above (pos y dir) of p1/p2
    // G2 X0 Y1 I1 J0.5 F25 (clockwise arc in the XY plane)
    p1 = new THREE.Vector3(-1, -1, 0);
    p2 = new THREE.Vector3(-2, -1, 0);
    pArc = new THREE.Vector3(-1.5, -0.5, 0);
    drawG2(p2, p1, pArc, false);
    
    // G02 (Set up the clockwise arc mode)
    // X2Y0 I0J-2.0
    /*
    p1 = new THREE.Vector3(0, 2, 0);
    p2 = new THREE.Vector3(2, 0, 0);
    pArc = new THREE.Vector3(0, 0, 0);
    drawG2(p1, p2, pArc);
    */
    
    // G0 X0 Y0
    // G2 X1 Y1 I1 F10 (clockwise arc in the XY plane)
    /*
    p1 = new THREE.Vector3(0, 0, 0);
    p2 = new THREE.Vector3(1, 1, 0);
    pArc = new THREE.Vector3(1, 0, 0);
    drawG2(p1, p2, pArc);
    */
}

function drawG2(p1, p2, pArc, clockwise) {
    
    drawParticle(p1);
    drawText("p1 " + p1.x + "," + p1.y, p1);
    drawParticle(p2);
    drawText("p2 " + p2.x + "," + p2.y, p2);
    drawParticle(pArc, 0xff0000);
    drawText("pArc " + pArc.x + "," + pArc.y, pArc, "lt");

    // Find angle
    var p1deltaX = pArc.x - p1.x;
    var p1deltaY = pArc.y - p1.y;
    console.log("p1delta x:",...