shifting-blinds

Mouse up and down to look through blinds

<!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>

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>