JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;
    var geometry, material, mesh,
    //groupA is parent of groupB
    //groupB is parent of cubeC
    groupA,groupB,cubeC;
		var offset = new THREE.Vector3();

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
        camera.position.z = 5;

        scene = new THREE.Scene();

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

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

        groupA=new THREE.Group();
        groupA.position.set(-2,1,-2);
        scene.add(groupA);

        groupB=new THREE.Group();
        groupB.position.set(-8,3,0);
        groupA.add(groupB);

        cubeC=new THREE.Mesh(new THREE.BoxGeometry(1,1,1),new THREE.MeshBasicMaterial());
        cubeC.position.set(1,1,0);
        groupA.add(cubeC);
				
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
				
				var controls = new THREE.OrbitControls( camera, renderer.domElement );

    }

    function animate() {
        var speed = 0.01;
        requestAnimationFrame( animate );
        mesh.position.set(0,mesh.position.y+=speed,0);
        //position  information is different from mesh？How to do
				offset.copy( mesh.position );
				cubeC.worldToLocal( offset );
				cubeC.position.add( offset );
        //mesh.rotation.x += 0.01;
        //mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }