three.js ~ Clipping Example

2016-14-03

HTML

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src = "http://mrdoob.github.com/three.js/examples/js/shaders/CopyShader.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/EffectComposer.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/RenderPass.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/ShaderPass.js"></script>

CSS

body {
				margin: 0px;
				background-color: #000000;
				overflow: hidden;
}

JavaScript

var camera, scene, renderer, composer, startTime, object;

var enableQuadPassBug = true;

function init() {

  camera = new THREE.PerspectiveCamera(
    36, window.innerWidth / window.innerHeight, 0.25, 16 );

  camera.position.set( 0, 1.3, 10 );

  scene = new THREE.Scene();

  // Lights

	scene.add(camera);
  scene.add( new THREE.AmbientLight( 0x505050 ) );

  var spotLight = new THREE.SpotLight( 0xffffff );
  spotLight.angle = Math.PI / 5;
  spotLight.penumbra = 0.2;
  spotLight.position.set( 2, 3, 3 );
  spotLight.castShadow = true;
  spotLight.shadow.camera.near = 3;
  spotLight.shadow.camera.far = 10;
  spotLight.shadow.mapSize.width = 1024;
  spotLight.shadow.mapSize.height = 1024;
  scene.add( spotLight );

  var dirLight = new THREE.DirectionalLight( 0x55505a, 1 );
  dirLight.position.set( 0, 3, 0 );
  dirLight.castShadow = true;
  dirLight.shadow.camera.near = 1;
  dirLight.shadow.camera.far = 10;

  dirLight.shadow.camera.right = 1;
  dirLight.shadow.camera.left = - 1;
  dirLight.shadow.camera.top	= 1;
  dirLight.shadow.camera.bottom = - 1;

  dirLight.shadow.mapSize.width = 1024;
  dirLight.shadow.mapSize.height = 1024;
  scene.add( dirLight );

  // ***** Clipping planes: *****

  var globalPlane1 = new THREE.Plane( new THREE.Vector3( 0, 0, -1 ), 5.0 ),
      globalPlane2 = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 5.0 );

  // Geometry

  var material = new THREE.MeshPhongMaterial( {
    color: 0x80ee10,
    shininess: 100,
    side: THREE.DoubleSide,

    // ***** Clipping setup (material): *****
    clipShadows: true

  } ),

      geometry = new THREE.TorusKnotGeometry( 1.2, 0.24, 95, 20 );

  object = new THREE.Mesh( geometry, material );
  object.position.z = 3;
  object.castShadow = true;
  scene.add( object );

  var ground = new THREE.Mesh(
    new THREE.PlaneBufferGeometry( 9, 9, 1, 1 ),
    new THREE.MeshPhongMaterial( {
      color: 0xa0adaf, shininess: 150 } ) );

  ground.rotation.x = - Math.PI / 2; // rotates X/Y to X/Z
 ...