JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.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
    ;

    init();
    animate();

    function init() {

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

        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 );

    }

    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？
        cubeC.position.copy(mesh.position);
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }