JSFiddle - React, Tailwind, and code Playground

by x1911

JavaScript

class Main {

            constructor() {
                this.camera = null
                this.scene = null
                this.renderer = null
                this.init();


                this.mesh = null
            }

            init() {

                this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
                this.camera.position.z = 1;

                this.scene = new THREE.Scene();

                const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
                const material = new THREE.MeshNormalMaterial();

                const mesh = new THREE.Mesh(geometry, material);
                this.scene.add(mesh);
                // this.mesh = mesh

                this.renderer = new THREE.WebGLRenderer({ antialias: true });
                this.renderer.setSize(window.innerWidth, window.innerHeight);
                document.body.appendChild(this.renderer.domElement);
                console.log('start', THREE, this.mesh)
                const controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
                controls.minDistance = 0.5;
                controls.maxDistance = 5;

                this.animate();
            }

            animate() {

                requestAnimationFrame(() => {
                    this.animate()
                })

                this.update()
            }

            update() {
                // console.log(this.mesh)
                // if (this.mesh) this.mesh.rotation.y += 0.01
                this.renderer.render(this.scene, this.camera);
            }
        }


        class LoadLib {
            constructor() {
                //const _base = 'https://cdn.skypack.dev/[email protected]/'
                const _base = 'https://unpkg.com/[email protected]/'

                this.url = _base + 'build/three.module.js?module'

                this._base = _base + 'examples/jsm/'
                this._obj = {
                   ...