Cloning Cube (#3December - Day 5)

cloning-cube-3december-day-5.markdown

Cloning Cube (#3December - Day 5)

A Pen by Shaw on CodePen.

License.

script.js

console.clear();

let scene, camera, renderer, orbit, lights;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 400 );

scene.fog = new THREE.Fog(0x000000, 0.1, 230);

camera.position.z = 90;
camera.position.y = 20;
camera.position.x = -15;
camera.up = new THREE.Vector3(0,0,0);

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000, 1 );
document.body.appendChild( renderer.domElement );

//orbit = new THREE.OrbitControls( camera, renderer.domElement );
//orbit.enableZoom = true;
//orbit.enablePan = true;

lights = [];
lights[ 0 ] = new THREE.PointLight( 0xffffff, 0.8, 0 );
lights[ 1 ] = new THREE.PointLight( 0xffffff, 0.8, 0 );
lights[ 2 ] = new THREE.PointLight( 0xffffff, 0.8, 0 );

lights[ 0 ].position.set( 0, 200, 0 );
lights[ 1 ].position.set( 100, 200, 100 );
lights[ 2 ].position.set( - 100, - 200, - 100 );

scene.add( lights[ 0 ] );
scene.add( lights[ 1 ] );
scene.add( lights[ 2 ] );

window.addEventListener( 'resize', function () {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}, false );


/*////////////////////////////////////////*/

function makeCube(){
  let geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );

  let material = new THREE.MeshLambertMaterial( { 
    color: 0xBC3D2D,
    emissive: 0x8F341A,
    side: THREE.DoubleSide,
    shading: THREE.FlatShading
  } );
  let cube = new THREE.Mesh( geometry, material );

  
  return cube;
}

/*////////////////////////////////////////*/

let cubeGroup = new THREE.Object3D();
scene.add(cubeGroup);

let i = 10;
while (i--) {
  let oldCube = makeCube();
  oldCube.position.x = -15 + (-30 * (i+1));
  cubeGroup.add(oldCube);
}

/*////////////////////////////////////////*/

let cube = makeCube();
cube.geometry.applyMatrix( new THREE.Matrix4().makeTranslation(10, 0, 0) );
cube.position.x = -25;
cubeGroup.add(cube);



/*////////////////////////////////////////*/


let clone = cube.clone();
clone.position.x += 50
clone.geometry = clone.geometry.clone();
clone.geometry.applyMatrix( new THREE.Matrix4().makeTranslation(-20, 0, 0) );
clone.visible = false;
cubeGroup.add(clone);


var tl = new TimelineMax({
  delay:0.2, 
  repeat: -1, 
  repeatDelay: 0.1,
  onUpdate: function(){
    renderer.render( scene, camera );
  }
});


tl.add(function(){
  clone.visible = false;
});

tl.to(cube.scale, 1, {
  x: 2.5,
  ease: Power4.easeInOut
});

tl.addLabel('clone');

tl.add(function(){
  clone.visible = true;
  clone.scale.x = 1;
  cube.scale.x = 1;
});

tl.to(cube.scale, 0, { x: 1 },'clone');

tl.from(clone.scale, 1, {
  x: 1.5,
  ease: Power4.easeInOut
},'clone');

tl.to(cubeGroup.position, 1, { 
  x: -30,
  ease: Power4.easeInOut
},'clone');

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>