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.

<!doctype html>
<meta charset='utf-8'>
<title>MHWW Bed</title>

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>

https://cdnjs.cloudflare.com/ajax/libs/three.js/r57/three.min.js