LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code




CSS
canvas {
  display: block;
}
html {
  overflow: hidden;
  background: #000;
}
JS
const backgroundColor = 0x000000;

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

var renderCalls = [];
function render () {
  requestAnimationFrame( render );
  renderCalls.forEach((callback)=>{ callback(); });
}
render();

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

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 800 );
camera.position.set(0,10,0);
camera.lookAt(new THREE.Vector3(0,0,0));

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( backgroundColor );//0x );

renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingExposure = Math.pow( 0.94, 5.0 );

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

document.body.appendChild( renderer.domElement);

function renderScene(){ renderer.render( scene, camera ); }
renderCalls.push(renderScene);

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

var controls = new THREE.OrbitControls( camera );

controls.rotateSpeed = 0.3;
controls.zoomSpeed = 0.9;

controls.minDistance = 3;
controls.maxDistance = 20;

//controls.minPolarAngle = 0; // radians
//controls.maxPolarAngle = Math.PI /2; // radians

controls.enableDamping = true;
controls.dampingFactor = 0.05;

renderCalls.push(function(){
  controls.update()
});


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


var light = new THREE.PointLight( 0xffffcc, 4, 200 );
light.position.set( 4, 15, -20 );
scene.add( light );

var light2 = new THREE.AmbientLight( 0x20202A, 6, 100 );
// light2.position.set( 30, -10, 30 );
scene.add( light2 );

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


var geometry = new THREE.BoxBufferGeometry( 9, 2, 0.1 );
var scanMaterial = new THREE.MeshPhongMaterial({ 
  transparent: true, 
  opacity: 0.9, 
  color: 0x44ff44, 
  blending: THREE.AdditiveBlending
});
var scanCube = new THREE.Mesh( geometry, scanMaterial );
scene.add( scanCube );


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


renderer.localClippingEnabled = true;

var clipPlanes = [
  new THREE.Plane( new THREE.Vector3( 0, 0, -5.8 ), 0 )
];

var wireClipIn = new THREE.Plane( new THREE.Vector3( 0, 0, -5.8 ), 0 );
var wireClipOut = new THREE.Plane( new THREE.Vector3( 0, 0, 5.8 ), 0 );

var clipPlanesWireframe = [ wireClipIn, wireClipOut ];



var tl = new TimelineMax({ repeat: -1, yoyo: true, delay: 1, repeatDelay: 1 });


tl.from( scanCube.scale, 0.5, { x: 0, ease: 'Power3.easeInOut' });

tl.fromTo( scanCube.position, 3, {
  z: -6.3
},{
  z: 5.8,
  ease: Power3.easeInOut
}, 0);

tl.fromTo( wireClipIn, 3, {
  constant: -1,
},{
  constant: 1,
  ease: 'Power3.easeInOut',
}, 0);

tl.to( scanCube.scale, 0.5, { x: 0, ease: 'Power3.easeInOut' }, '-=0.5');

tl.addLabel('fillIn', '+=1');

tl.to( scanCube.scale, 0.5, { x: 1, ease: 'Power3.easeInOut' }, 'fillIn');

tl.fromTo( scanCube.position, 3, {
  z: -6.3
},{
  z: 5.8,
  ease: Power3.easeInOut
}, 'fillIn');

tl.fromTo( clipPlanes, 3, {
  constant: -1,
},{
  constant: 1,
  ease: 'Power3.easeInOut',
}, 'fillIn');

tl.fromTo( wireClipOut, 3, {
  constant: 1,
},{ 
  constant: -1,
  ease: 'Power3.easeInOut',
}, 'fillIn');

tl.to( scanCube.scale, 0.5, { x: 0, ease: 'Power3.easeInOut' },'-=0.5');


var mtlLoader = new THREE.MTLLoader();
mtlLoader.crossOrigin = true;
mtlLoader.setPath( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/' );
mtlLoader.load( 'GameBoy.mtl', function( materials ) {

  materials.preload();
  var objLoader = new THREE.OBJLoader();
  console.log(materials);
  objLoader.setMaterials( materials );
  objLoader.setPath( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/' );
  objLoader.load( 'GameBoy.obj', function ( object ) {
    
    for ( var key in materials.materials ) {
      materials.materials[key].reflectivity = 0.3; 
      materials.materials[key].shininess = 10; 
      materials.materials[key].side = THREE.DoubleSide;
      materials.materials[key].clippingPlanes = clipPlanes;
      materials.materials[key].clipIntersection = true;
      materials.materials[key].needsUpdate = true;
    }

    object.position.set(0, 0, 5.5);
    object.rotation.set(Math.PI / -2, 0, 0);

    scene.add( object );

    var clone = object.clone();
    clone.traverse(function(obj){
      if ( obj.material ) { 
        obj.material = new THREE.MeshPhongMaterial({ 
          wireframe: true, 
          color: 0x00FF00,
          clippingPlanes: clipPlanesWireframe,
          clipIntersection: false
        });
      }
    });
    scene.add(clone);
    console.log(clone);

    tl.play();

  });
  //, onProgress, onError );
});

/* */

Description

3D Printer effect with THREE.js Clipping Plane and GSAP.
Term
Wed, 12/06/2017 - 19:44

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv