JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/konva@8/konva.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<body>
    <div id="main">
        <div id="twoD"></div>
        <div id="threeD"></div>
    </div>
</body>

CSS

*{
        margin: 0px;
        padding: 0px;
    }
    #main{
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 100%;
    }
    #twoD{
        grid-column: 2;        
        grid-row: 1;        
        width:100%;
        height: 100%;
    }
    #threeD{
        grid-column: 1;        
        grid-row: 1;        
        width:100%;
        height: 100%;
        background-color: blueviolet;
    }

JavaScript

class demo{
    constructor(options){
        this.container = options.threeD;
        this.scene = new THREE.Scene();
        this.width = this.container.offsetWidth;
        this.height = this.container.offsetHeight;
        this.camera = new THREE.PerspectiveCamera( 70, 
            this.width / this.height, 0.01, 50 );
        this.camera.position.z = 8.8;
        this.camera.position.y = 0.4;

        this.renderer = new THREE.WebGLRenderer( { antialias: false } );
        this.renderer.setSize( this.width, this.height );
        this.container.appendChild( this.renderer.domElement );
        this.setupResize();
        this.ground();
        this.init2D(options.twoD);
    }

    init2D(container){
        this.twoDWidth = container.offsetWidth;
        this.twoDHeight = container.offsetHeight;
        // first we need to create a stage
        var stage = new Konva.Stage({
            container: container,   // id of container <div>
            width: this.twoDWidth,
            height: this.twoDHeight
        });
        
        // then create layer
        var layer = new Konva.Layer();
        
        // create our shape
        var circle = new Konva.Circle({
            x: stage.width() / 2,
            y: stage.height() / 2,
            radius: 70,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4,
            draggable: true
        });
        this.sphere(circle.attrs.x,circle.attrs.y);
        
        circle.on('xChange', (function() {
            this.sphereMesh.position.x = circle.attrs.x*(10.0/this.twoDWidth)-5.0;
            this.sphereMesh.position.z = circle.attrs.y*(10.0/this.twoDHeight)-5.0;
            this.sphereMesh.position.y = 0.1;        
            this.sphereMesh.rotateAroundWorldAxis(new THREE.Vector3(0, 0, 0),new THREE.Vector3(1, 0, 0),Math.PI / 4.0);    
        }).bind(this));
              
        // add the shape to the layer
        layer.add(circle);
        
        // add the layer to...