block by mpmckenna8 e0e3a8f79c711b29c55f

three.js child moves and rotates w/ parent

Full Screen

index.html

<!DOCTYPE html>

<html>

    <head>
        <title>Intro to WebGL with three.js</title>
    </head>

    <body>

        <div id="webgl-container"></div>

        <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.js"></script>
        <script src="chicube.js"></script>

    </body>

</html>

chicube.js

var demo = (function(){

    "use strict";

    var scene=new THREE.Scene(),
        light= new THREE.AmbientLight(0xffffff),
        renderer,
        camera,
        renderer = new THREE.WebGLRenderer(),
        box,
        ground,
        controls=null;

        function initScene(){

            renderer.setSize( window.innerWidth, window.innerHeight );
            document.getElementById("webgl-container").appendChild(renderer.domElement);

            scene.add(light);

            camera = new THREE.PerspectiveCamera(
                    35,
                    window.innerWidth / window.innerHeight,
                    1,
                    1000
                );

            camera.position.set( 0, 0, 100 );

            scene.add(camera);

            box = new THREE.Mesh(
              new THREE.BoxGeometry(
                20,
                20,
                20),
              new THREE.MeshBasicMaterial({color: 0xFF0000}));

            scene.add(box);

            var childBox = new THREE.Mesh(
              new THREE.BoxGeometry(29,29,20),
              new THREE.MeshBasicMaterial({color:0x00FF00})
            );

            childBox.position.x = 30;



            box.add(childBox);



            console.log(childBox.position)

console.log(box.children);


            requestAnimationFrame(render);

        };

var keep = true;
function movebox() {
if(keep){
  if(box.position.x>-55){
        box.position.x -= .05;
        //console.log(box.position.x)
      }
      else{
        keep = false;

      }
    }
else{
  if(box.position.x<55){
    box.position.x += .05;
  }
  else{
    keep = true;
  }
}

      };


        function render() {
                renderer.render(scene, camera);
                box.rotation.x +=.01;
                box.rotation.y += .04;
                movebox();
                requestAnimationFrame(render);
        };

        window.onload = initScene;

})();