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;

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 geometrychild1 = new THREE.PlaneBufferGeometry( 50, 50 );
		var materialchild1 = new THREE.MeshBasicMaterial( {color: 0x00ff00, side: THREE.DoubleSide} );
		var 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} );
		var planeChild2 = new THREE.Mesh( geometrychild2, materialchild2 );
     planeChild2.position.x = 50;
     planeChild2.position.z = 0.1;
    
    planeParent.add( planeChild1 );
    planeParent.add( planeChild2 );
    
    scene.add(planeParent);
    

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    
    document.body.appendChild(renderer.domElement);
    
  
    
    planeParent.rotation.z += 0.6;

}

function animate() {

    planeParent.rotation.z += 0.01;

    requestAnimationFrame(animate);
 
    render();

}

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

}