D3 Examples - shifting-blinds

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      body {
        font-family: Monospace;
        background-color: #f0f0f0;
        margin: 0px;
        overflow: hidden;
      }
    </style>
  </head>
​
<body>
​
<script src="three.min.js"></script>
<script src="TrackballControls.js"></script>
​
<script>
​
var camera, controls, scene, renderer;
​
var mouse = new THREE.Vector2(),
    offset = new THREE.Vector3()
​
var container = document.createElement('div')
document.body.appendChild(container)
​
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000)
camera.position.z = 1000;
​
controls = new THREE.TrackballControls(camera)
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
​
scene = new THREE.Scene()
​
scene.add(new THREE.AmbientLight(0x505050))
​
var light = new THREE.SpotLight(0xffffff, 1.5)
light.position.set(0, 500, 2000)
light.castShadow = true;
light.shadowCameraNear = 200;
light.shadowCameraFar = camera.far;
light.shadowCameraFov = 50;
light.shadowBias = -0.00022;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
scene.add(light)
​
var geometry = new THREE.BoxGeometry(40, 40, 40)
​
var width = 1000
var height = 800
var objects = []
var num = 40
for (var i = 0; i < num; i ++) {
  var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }))
​
  object.position.x =  0;
  object.position.y =  (i/num - .5)*height;
  object.position.z =  400;
​
  object.rotation.x = Math.random()*0 * 2 * Math.PI;
  object.rotation.y = Math.random()*0 * 2 * Math.PI;
  object.rotation.z = Math.random()*0 * 2 * Math.PI;
​
  object.scale.x = 15;
  object.scale.y = .4;
  object.scale.z = .1;
​
  object.castShadow = true;
  object.receiveShadow = true;
​
  scene.add(object)
  objects.push(object)
}
​
renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setClearColor(0xf0f0f0)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.sortObjects = false;
​
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
​
container.appendChild(renderer.domElement)
​
renderer.domElement.addEventListener('mousemove', function(event) {
    mouse.x = event.clientX / window.innerWidth 
    mouse.y = event.clientY / window.innerHeight 
}, false)
​
window.addEventListener('resize', function() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
}, false)
​
​
animate()
function animate() {
  objects.forEach(function(d, i){
    var diff = (-mouse.y - i/num + 1)
    d.rotation.x = clamp(0, Math.PI/2 + diff*4, Math.PI)
​
    // // changes to the vertices
    // d.geometry.verticesNeedUpdate = true;
    // d.geometry.dynamic = true;
    // d.geometry.normalsNeedUpdate = true;
  })
​
  controls.update()
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}
​
​
​
function clamp(a, b, c){ return Math.max(a, Math.min(b, c)) }
​
</script>
​
</body>
</html>
​
    