JSFiddle - React, Tailwind, and code Playground

HTML

<button id="frontView">Front View</button>
    <button id="sideView">Side View</button>
    <button id="backView">Back View</button>
    
    <script src="https://threejs.org/build/three.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
     <script>
        /**
         * @author qiao / https://github.com/qiao
         * @author mrdoob / http://mrdoob.com
         * @author alteredq / http://alteredqualia.com/
         * @author WestLangley / http://github.com/WestLangley
         * @author erich666 / http://erichaines.com
         */

        // This set of controls performs orbiting, dollying (zooming), and panning.
        // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
        //
        //    Orbit - left mouse / touch: one-finger move
        //    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
        //    Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move

        THREE.OrbitControls = function (object, domElement) {

            this.object = object;

            this.domElement = (domElement !== undefined) ? domElement : document;

            // Set to false to disable this control
            this.enabled = true;

            // "target" sets the location of focus, where the object orbits around
            this.target = new THREE.Vector3();

            // How far you can dolly in and out ( PerspectiveCamera only )
            this.minDistance = 0;
            this.maxDistance = Infinity;

            // How far you can zoom in and out ( OrthographicCamera only )
            this.minZoom = 0;
            this.maxZoom =...

CSS

body {
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }

JavaScript

var camera, scene, renderer;
   
        init();
        animate();

        function init() {

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

            scene = new THREE.Scene();

            var geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
            

            var mesh = new THREE.Mesh(geometry, [
							new THREE.MeshBasicMaterial( { color: 0xffffff * Math.random() } ),
							new THREE.MeshBasicMaterial( { color: 0xffffff * Math.random() } ),
							new THREE.MeshBasicMaterial( { color: 0xffffff * Math.random() } ),
							new THREE.MeshBasicMaterial( { color: 0xffffff * Math.random() } ),
							new THREE.MeshBasicMaterial( { color: 0xffffff * Math.random() } ),
							new THREE.MeshBasicMaterial( { color: 0xffffff * Math.random() } )
						]);
            scene.add(mesh);
            mesh.rotation.set(1,1,0)
						
						scene.add( new THREE.AxesHelper() );

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            const controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;

            document.querySelector('#frontView').addEventListener('click', () => {
                console.log("frontview");
                camera.position.x = 0;
                camera.position.y = 0;
                camera.position.z = 1;
                controls.update();
            });

            document.querySelector('#sideView').addEventListener('click', () => {
                console.log("Side View");

                camera.position.x = 0;
                camera.position.y = 1;
                camera.position.z = 0;
                controls.update();
            });

            document.querySelector('#backView').addEventListener('click', () => {
               ...