A Pen by Xanmia.

index.html

      <div id="viewport"></div>
<div class="status" id="End"><h2>Thank You!</h2>
  <h2>But the castle you were expecting is in a different game!</h2>
</div>

script.js

  var initScene, render, _boxes = [], spawnBox,
                   renderer, render_stats, physics_stats, scene, ground_material, ground, light, camera, push = 0, currpuck = 0, loader, vground_material,texturef;
var boomer,player;
var  materialArray = [];
  var WIDTH = window.innerWidth;
  var HEIGHT = window.innerHeight;
 var cx = 0, cy = 0, cz = 0; 
  var StatusText  = document.getElementById('End');


               renderer = new THREE.WebGLRenderer({ antialias: true });
               renderer.setSize(window.innerWidth, window.innerHeight);
               document.getElementById('viewport').appendChild(renderer.domElement);

               scene = new THREE.Scene();

               camera = new THREE.PerspectiveCamera(
                       45,
                       window.innerWidth / window.innerHeight,
                       1,
                       1500
               );

 //camera = new THREE.OrthographicCamera(window.innerWidth / - 2.2, window.innerWidth / 2.2, window.innerHeight / 2.2, window.innerHeight / - 2.2, 0, 20000);

              camera.position.z = 1100;//1100;//StartingZ;
               camera.position.y =  200;
               scene.add(camera);

              ground = new spawnFloor();

           
           function spawnFloor() {

               loader = new THREE.ObjectLoader();

loader.load( "https://googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/Scene.js", function( result ) {
  var itemCount = result.children.length;
while (itemCount--){
if(result.children[itemCount].userData.item == "Floor"){
  texturef = THREE.ImageUtils.loadTexture('https://googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/ground2.png', {}, function() { });
   texturef.wrapT = texturef.wrapS = THREE.RepeatWrapping;
             texturef.repeat.set( result.children[itemCount].geometry.width / 75, 1 );
}
else if(result.children[itemCount].userData.item == "Tube"){
 texturef = THREE.ImageUtils.loadTexture('https://googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/mtubetest.png', {}, function() { });
   texturef.wrapT = texturef.wrapS = THREE.RepeatWrapping;
                texturef.repeat.set( 2, 1 );
}
else if(result.children[itemCount].userData.item == "Question"){
 texturef = THREE.ImageUtils.loadTexture('https://googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/questionv3.png', {}, function() { });
   texturef.wrapT = texturef.wrapS = THREE.RepeatWrapping;
                texturef.repeat.set( 1, 1 );
}
else if(result.children[itemCount].userData.item == "Brick"){
 texturef = THREE.ImageUtils.loadTexture('https://googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/brickinv.png', {}, function() { });
   texturef.wrapT = texturef.wrapS = THREE.RepeatWrapping;
                texturef.repeat.set( result.children[itemCount].geometry.width / 75, 1 );
}
else if(result.children[itemCount].userData.item == "Cloud"){
 texturef = THREE.ImageUtils.loadTexture('https://googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/mcloud.png', {}, function() { });
}
else if(result.children[itemCount].userData.item == "Hill"){
 texturef = THREE.ImageUtils.loadTexture('https://googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/mhill.png', {}, function() { });
}
else if(result.children[itemCount].userData.item == "Castle"){
 texturef = THREE.ImageUtils.loadTexture('https://googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/mcastle.png', {}, function() { });
}
else if(result.children[itemCount].userData.item == "Bush"){
 texturef = THREE.ImageUtils.loadTexture('https://googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/mplant.png', {}, function() { });
}
else if(result.children[itemCount].userData.item == "Flag"){
 texturef = THREE.ImageUtils.loadTexture('https://googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/mflag.png', {}, function() { });
}
else{
   texturef = THREE.ImageUtils.loadTexture('https://googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/stairv3.png', {}, function() { });
     texturef.wrapT = texturef.wrapS = THREE.RepeatWrapping;
              texturef.repeat.set( result.children[itemCount].geometry.width / 75, 1);
}

            vground_material = new THREE.MeshBasicMaterial({ map: texturef, transparent:true });

               ground = new THREE.Mesh(
                       result.children[itemCount].geometry,
                       vground_material
               );

              
                             ground.position.set(
                                    result.children[itemCount].position.x,
                                    result.children[itemCount].position.y,
                                     result.children[itemCount].position.z
                             );
               scene.add(ground);


}    
player = new spawnPlayer();

               requestAnimationFrame(render);

           

} );
           }

           function spawnPlayer () {
               var box_geometry = new THREE.PlaneGeometry(100,100,5,5);
                var wallMaterial = new THREE.MeshBasicMaterial( {wireframe: false } );
                 var wallObj = new THREE.PlaneGeometry( 1, 1, 1,1 );
               this.mesh =  new THREE.Mesh(wallObj,wallMaterial);
                               scene.add(this.mesh);
           this.mesh.add(camera);

                         this.update = function(sep){
                           if (this.mesh.position.x < 13500)
                            {
                               this.mesh.position.x += sep;
                            }
                            else
                            {
                              StatusText.style.display= 'block';
                            }
                         
                          }

           };

           function render () {
              requestAnimationFrame(render);
               
              player.update(3);

              renderer.render(scene, camera);
   
           };

style.css

body{

 margin: 0px;
 padding: 0;
   overflow: hidden;
   background-color: #5c94fc;


}


.status{
  position:absolute;
     width:300px;
     height:200px;
     z-index:15;
     top:50%;
     left:50%;
     margin:-150px 0 0 -150px;
    background-color: #000000;
    text-align:center;
    opacity:0.8;
  border:5px solid #888888;
  border-radius:25px;
  display:none;
  color:#ffffff
}

Three.js-Level-Layout.markdown

Three.js Level Layout

Enjoy! - only shows correctly in full screen.... needs work.

A Pen by Xanmia on CodePen.

License.