D3 Examples - MHWW Bed

MHWW Bed

My father designed a bed frame. He used Google’s SketchUp to show his client and get feedback on designs.

Here, it’s rendered in WebGL. (You will need a browser that supports it.) I exported the SketchUp document to the COLLADA format (.dae) and loaded it in JavaScript using ColladaLoader.js (this is found within the three.js examples directory). The scene is rendered with three.js.

xxxxxxxxxx
 
<!doctype html>
<meta charset='utf-8'>
<title>MHWW Bed</title>
​
<style>
  body {
    background: #f9f9f9;
  }
</style>
​
<div></div>
​
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r57/three.min.js"></script>
<script src="ColladaLoader.js"></script>
<script>
  var camera, scene, renderer;
  var geometry, material, mesh;
  var bed;
  var mouseX = 480, mouseY = 250;
  var width = 960, height = 500;
​
  var loader = new THREE.ColladaLoader();
​
  loader.load('fortunabed.dae', function (res) {
    bed = res.scene;
    init();
    animate();
  });
​
  function init() {
    scene = new THREE.Scene();
​
    /* Lights */
    scene.add( new THREE.AmbientLight( 0x856133 ) );
    var directionalLight = new THREE.DirectionalLight(0x90f32e );
    directionalLight.position.x = 0.2;
    directionalLight.position.y = 1.2;
    directionalLight.position.z = 0.9;
    directionalLight.position.normalize();
    scene.add( directionalLight );
    particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
    scene.add( particleLight );
    pointLight = new THREE.PointLight( 0x853617, 0.6 );
    pointLight.position = particleLight.position;
    scene.add( pointLight );
​
    /* Camera... */
    camera = new THREE.PerspectiveCamera( 35, width / height, 1, 1000 );
    camera.position.set( 1, 0.8, 1.8 );
​
    /* action! */
    bed.position.y+=0.8;
    bed.position.x+=1.0;
    bed.position.z-=1.0;
    bed.rotation.x += 1.5*Math.PI;
    scene.add(bed);
​
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( width, height );
​
    document.body.appendChild( renderer.domElement );
​
    renderer.domElement.addEventListener( 'mousemove', onMouseMove, false );
  }
​
  function animate() {
    requestAnimationFrame( animate );
​
    bed.rotation.z = (mouseX / (width / 2));
    bed.rotation.x = ((mouseY / height) - 1.7);
​
    renderer.render( scene, camera );
  }
​
  function onMouseMove(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
  }
​
</script>
​
    