JSFiddle - React, Tailwind, and code Playground

by forerun

JavaScript

import * as THREE from "https://cdn.skypack.dev/three@0.133.1";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.133.1/examples/jsm/controls/OrbitControls.js";
import {GUI} from "https://cdn.skypack.dev/three@0.133.1/examples/jsm/libs/dat.gui.module.js";

let scene, camera, renderer, controls, path
let arc1, arc2
let basePts
let g = new THREE.PlaneGeometry(1, 1, 200, 1);
let m;
let band
let old

init()
function init(){

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x7f7f7f);
    camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
    camera.position.set(8, 5, 13);
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    controls = new OrbitControls(camera, renderer.domElement);

    path = new THREE.Path();
    arc1 = path.absarc(5, 0, 1, Math.PI * 0.5, Math.PI * 1.5, true);
    /* path.absarc(5, 0, 1, Math.PI * 0.5, Math.PI * 1.5, true); */
    arc2 = path.absarc(-5, 0, 1, Math.PI * 1.5, Math.PI * 0.5, true);
    path.closePath();
    
    /* console.log(path) */
    addNewMesh()


    render()
    addGui()
    
}


window.addEventListener("resize", () => {
        camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(innerWidth, innerHeight);
})
    

function render(){
    renderer.setAnimationLoop( () => {
 
        renderer.render(scene, camera);
    });
}

function loadLabel (file) {

    let m = new THREE.MeshBasicMaterial({
        side: THREE.DoubleSide,
        color: 0xff0000
    });

    return m;

}

function addGui(){

    // GUI DE CONTROLE DEBUG
        var gui = new GUI();

        var options = {
            width: () => {
                console.log('pipii');
            }
        };

        const labelFolder = gui.addFolder('Label properties')
        labelFolder.add(path.curves[0], 'aX', 0, 100).onChange(
           ()=>{
         ...