Simple Building
Three.js + Orbit
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
var container;//, stats;
var camera, controls, scene, renderer;
var texture;
var clock = new THREE.Clock();
var helper;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersectedPoint = new THREE.Vector3(0,0,0);
//STANDARD DIMENSIONS
var FloorDepth = 0.6; //... about 2 foot.
var WallThickness = 0.3; //... about 1 foot.
var WindowThickness = WallThickness + 0.1;
var WindowHeight = 1.5;
F_init();
F_animate();
function F_init()
{
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
scene = new THREE.Scene();
controls = new THREE.OrbitControls(camera);
controls.center.set( 0.0, 10.0, 0.0 );
controls.userPanSpeed = 100;
//controls.center.y = 0;
camera.position.y = controls.center.y + 600;
camera.position.set(19,2,19);
xxx = F_Make_Objects();
function F_Make_Objects()
{
//... LIGHTS
var light2 = new THREE.AmbientLight(0x444444);
scene.add(light2);
//... PointLight
// http://threejs.org/docs/#Reference/Lights/PointLight
var light3 = new THREE.PointLight( 0xffffff, 1, 0, 0);
//light3.castShadow = true;
//light3.shadow.camera.near = 1;
//light3.shadow.camera.far = 5000;
//light3.shadow.camera.fov = 90;
// light3.shadowCameraVisible = true;
//light3.shadow.bias = 0.001;
//scene.add( light3 );
//... Axis Helper
var Helper_axes = new THREE.AxisHelper( 1000 ); //... initial length for all three axes.
scene.add( Helper_axes );
Helper_axes.scale.set( 0.05, 0.025, 0.05); //... modifies axis lengths.
// BOXES
//... Floor Slab
var B1geom = new THREE.CubeGeometry(100,1,100);
var B1mat = new THREE.MeshLambertMaterial({
color: 0x44ff99,
side: THREE.DoubleSide});
var Box1 = new...