Parent-Child Relationship

Trying to not rotate child when rotating the parent.

by willfulcoder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r112/three.js"></script>

JavaScript

var camera, scene, renderer, geometry, material, planeParent, controls,planeChild1,planeChild2;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
		var material = new THREE.MeshBasicMaterial( {color: 0xff0000, side: THREE.DoubleSide} );
		planeParent = new THREE.Mesh( geometry, material );
    
    var dummyChild_1 = new THREE.Object3D();
		var dummyChild_2 = new THREE.Object3D();
    planeParent.add(dummyChild_1);
    planeParent.add(dummyChild_2);
    
    var geometrychild1 = new THREE.PlaneBufferGeometry( 50, 50 );
		var materialchild1 = new THREE.MeshBasicMaterial( {color: 0x00ff00, side: THREE.DoubleSide} );
		planeChild1 = new THREE.Mesh( geometrychild1, materialchild1 );
    planeChild1.position.x = -50;
    planeChild1.position.z = 0.1;
    
    var geometrychild2 = new THREE.PlaneBufferGeometry( 50, 50 );
		var materialchild2 = new THREE.MeshBasicMaterial( {color: 0x0000ff, side: THREE.DoubleSide} );
		planeChild2 = new THREE.Mesh( geometrychild2, materialchild2 );
    planeChild2.position.x = 50;
    planeChild2.position.z = 0.1;
    
    scene.add( planeChild1 );
    scene.add( planeChild2 );
    
    scene.add(planeParent);
    

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

function animate() {

    planeParent.rotation.z += 0.01;
    
    planeChild1.position.setFromMatrixPosition( planeParent.children[ 0 ].matrixWorld )
    planeChild2.position.setFromMatrixPosition( planeParent.children[ 1 ].matrixWorld )

    requestAnimationFrame(animate);
    render();

}

function render() {
    renderer.render(scene, camera);

}