Menu
▾
▴
[Openautomation-svn] SF.net SVN: openautomation:[717] JSFloorPlan/trunk
|
From: <ma...@us...> - 2012-03-03 20:51:36
|
Revision: 717
http://openautomation.svn.sourceforge.net/openautomation/?rev=717&view=rev
Author: mayerch
Date: 2012-03-03 20:51:28 +0000 (Sat, 03 Mar 2012)
Log Message:
-----------
Make lib much more self contained
(Propper sorting, commenting and indentation still missing, though)
Modified Paths:
--------------
JSFloorPlan/trunk/index.html
JSFloorPlan/trunk/src/jsfloorplan.js
JSFloorPlan/trunk/src/jsfloorplan_example_helper.js
Modified: JSFloorPlan/trunk/index.html
===================================================================
--- JSFloorPlan/trunk/index.html 2012-02-29 19:33:36 UTC (rev 716)
+++ JSFloorPlan/trunk/index.html 2012-03-03 20:51:28 UTC (rev 717)
@@ -10,10 +10,10 @@
-->
<title>JS Floor Plan</title>
<!-- -->
-<script src="lib/jquery-1.7.1.min.js" type="text/javascript"></script>
+<script src="lib/jquery-1.7.1.js" type="text/javascript"></script>
<script src="lib/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="lib/poly2tri.js" type="text/javascript"></script>
-<script src="lib/Three.js" type="text/javascript"></script>
+<script src="lib/Three.max.js" type="text/javascript"></script>
<script src="src/jsfloorplan.js" type="text/javascript"></script>
<script src="src/jsfloorplan_example_helper.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
Modified: JSFloorPlan/trunk/src/jsfloorplan.js
===================================================================
--- JSFloorPlan/trunk/src/jsfloorplan.js 2012-02-29 19:33:36 UTC (rev 716)
+++ JSFloorPlan/trunk/src/jsfloorplan.js 2012-03-03 20:51:28 UTC (rev 717)
@@ -142,10 +142,10 @@
*/
(function( window, undefined ){
// the constructor
- var JSFloorPlan3D = function( floorPlan ){
+ var JSFloorPlan3D = function( container, floorPlan ){
if (!(this instanceof JSFloorPlan3D))
{
- return new JSFloorPlan3D( floorPlan );
+ return new JSFloorPlan3D( container, floorPlan );
}
if (typeof floorPlan === "string")
@@ -159,10 +159,29 @@
// private variables of this object instance will follow
var that = this;
+ var thatObject = {that: this};
+ this.thisThatObject = {that: this};
+ this.thisThat = this;
////////////////////////////////////////////////////////////////////////////
// Definition of the private variables
+ // create the materials - sphere for the nodes, cube for the walls and line for the lines
+ var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xCC0000 });
+ //var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x0000CC });
+ var cubeMaterial = new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture( 'media/demo_texture_512x512.png' ) });
+ //var cubeMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff, ambient: 0xaa0000 } );
+ var lineMaterial = new THREE.LineBasicMaterial( { color: 0x0099ff, linewidth: 2 } );
+
+ var scene, camera, renderer, pointLight, sunLight, ambientLight, sunLightViewLine;
+ // set up the sphere vars
+
+ //var lightAzimut, lightElevation, lightStrength, lightDistanceŷ;
+ this.lightAzimut = {foo:'bar'};
+ this.lightElevation;
+ this.lightStrength;
+ this.lightDistanceŷ;
+
var floor;
// this array will contain all vertices to show in the svg
@@ -367,7 +386,7 @@
// iterate over the content of this floor
for( var j=0; j < floor.childNodes.length; j++ )
{
- floorNode = floor.childNodes[j];
+ var floorNode = floor.childNodes[j];
if (floorNode.nodeType != ELEMENT_NODE) continue;
switch( floorNode.tagName )
@@ -451,7 +470,7 @@
if( floorWalls[wjj].endOffset && vectors[jj].id < 0 )
djj += -floorWalls[wjj].endOffset;
- vertex = new Object;
+ var vertex = new Object;
vertex.x = vectors[j].x*djj + vectors[jj].x*dj;
vertex.y = vectors[j].y*djj + vectors[jj].y*dj;
var l = vectors[j].x*vectors[jj].y - vectors[j].y*vectors[jj].x;
@@ -592,8 +611,8 @@
p2tF.push(new THREE.Face3(val.GetPoint(0).id, val.GetPoint(1).id, val.GetPoint(2).id));
});
- Tvertices = swctx.points_;
- Tfaces = p2tF;
+ var Tvertices = swctx.points_;
+ var Tfaces = p2tF;
var wall1vertices = [];
var wall2vertices = [];
var sId, eId;
@@ -732,7 +751,7 @@
{
for( var i=0; i < nodes.childNodes.length; i++ )
{
- node = nodes.childNodes[i];
+ var node = nodes.childNodes[i];
if (node.nodeType != ELEMENT_NODE) continue;
var id = node.getAttribute('id');
@@ -774,7 +793,7 @@
{
for( var i=0; i < nodes.childNodes.length; i++ )
{
- node = nodes.childNodes[i];
+ var node = nodes.childNodes[i];
if (node.nodeType != ELEMENT_NODE) continue;
/**
@@ -932,11 +951,78 @@
* @method setup3D
* @private
*/
- function setup3D( thisObject3D )
- {
+ function setup3D( currentThis, thisObject3D )
+ {
if( noFloorplan ) return;
noSetup = false;
+ ///////////////////////////////////////////////////////////////////////////
+ // set the scene size
+ var WIDTH = 800,
+ HEIGHT = 400;
+
+ // set some camera attributes
+ var VIEW_ANGLE = 45,
+ ASPECT = WIDTH / HEIGHT,
+ NEAR = 0.1,
+ FAR = 10000;
+
+
+ renderer = new THREE.WebGLRenderer({antialias: true});
+ camera = new THREE.PerspectiveCamera(
+ VIEW_ANGLE,
+ ASPECT,
+ NEAR,
+ FAR );
+ scene = new THREE.Scene();
+ scene.add( camera );
+ // the camera starts at 0,0,0 so pull it back
+ camera.position.z = 300;
+
+ // start the renderer
+ renderer.setSize(WIDTH, HEIGHT);
+
+ // enable shadows
+ var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
+ renderer.shadowCameraNear = 0.1;
+ renderer.shadowCameraFar = 100;
+ renderer.shadowCameraFov = 45;
+
+ renderer.shadowMapBias = 0.0039;
+ renderer.shadowMapDarkness = 0.5;
+ renderer.shadowMapWidth = SHADOW_MAP_WIDTH;
+ renderer.shadowMapHeight = SHADOW_MAP_HEIGHT;
+ renderer.shadowMapEnabled = true;
+ //renderer.shadowMapSoft = true;
+ var projector = new THREE.Projector();
+
+ // create a point light
+ pointLight = new THREE.PointLight( 0xFFFFFF );
+
+ ambientLight = new THREE.AmbientLight( 0xFFFFFF );
+ // set its position
+ pointLight.position.x = 10;
+ pointLight.position.y = 50;
+ pointLight.position.z = 130;
+
+ // add to the scene
+ //scene.add(pointLight);
+
+ currentThis.lightAzimut = 3.9;
+ currentThis.lightElevation = 0.25;
+ currentThis.lightStrength = 80;
+ currentThis.lightDistance = 50;
+ sunLight = new THREE.SpotLight( 0xffffff );
+ sunLight.position.set( 0, 1500, 1000 );
+ sunLight.target.position.set( 0, 0, 0 );
+ sunLight.castShadow = true;
+ var sunLightView = new THREE.Geometry();
+ sunLightView.vertices.push( new THREE.Vertex( sunLight.position ) );
+ sunLightView.vertices.push( new THREE.Vertex( sunLight.target.position ) );
+ sunLightViewLine = new THREE.Line( sunLightView, lineMaterial );
+ scene.add( sunLightViewLine );
+ ///////////////////////////////////////////////////////////////////////////
+
scene.add( thisObject3D );
var showFloor = showStates.showFloor;
@@ -946,14 +1032,9 @@
//scene.add(pointLight);
scene.add(ambientLight);
//scene.add( camera );
- var $container = $('#top_level');
+ var $container = $(container);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
-
- // Init after the scene was set up
- selectChange( 'showNodes' , 0, true );
- selectChange( 'showWallLines' , 0, true );
- selectChange( 'showFloor' , 0, true );
}
function setupCamera( azimut, elevation, distance, target )
@@ -967,6 +1048,16 @@
pointLight.position = camera.position;
}
+ JSFloorPlan3D.prototype.render = function()
+ {
+ renderer.render( scene, camera );
+ }
+
+ JSFloorPlan3D.prototype.showWireframe = function( doShowWireframe )
+ {
+ cubeMaterial.wireframe = doShowWireframe;
+ }
+
/**
* Show the floor plan by updating the relevant view parameters and calling
* the render() method
@@ -985,18 +1076,18 @@
showStates.currentDistance = distance;
showStates.currentTarget = target.clone(); //JSFloorPlan3D.buildingProperties.x_center;
- if( noSetup ) setup3D( this.buildingProperties.Object3D );
+ if( noSetup ) setup3D( this, this.buildingProperties.Object3D );
// set up camera
setupCamera( azimut, elevation, distance, target );
// set up sun
- var sx = Math.sin(lightAzimut) * Math.cos(lightElevation);
- var sy = Math.cos(lightAzimut) * Math.cos(lightElevation);
- var sz = Math.sin(lightElevation);
+ var sx = Math.sin(this.lightAzimut) * Math.cos(this.lightElevation);
+ var sy = Math.cos(this.lightAzimut) * Math.cos(this.lightElevation);
+ var sz = Math.sin(this.lightElevation);
sunLight.target.position = target;
- sunLight.position = new THREE.Vector3( sx * lightDistance, sy * lightDistance, sz * lightDistance + target.z );
- sunLight.intensity = lightStrength / 100.0;
+ sunLight.position = new THREE.Vector3( sx * this.lightDistance, sy * this.lightDistance, sz * this.lightDistance + target.z );
+ sunLight.intensity = this.lightStrength / 100.0;
sunLightViewLine.geometry.vertices[0].position = sunLight.position;
sunLightViewLine.geometry.vertices[1].position = sunLight.target.position;
sunLightViewLine.geometry.__dirtyVertices = true;
@@ -1041,7 +1132,8 @@
break;
};
- render();
+ //this.render();
+ renderer.render( scene, camera );
}
/**
@@ -1132,7 +1224,7 @@
}
setupCamera( showStates.currentAzimut, showStates.currentElevation, showStates.currentDistance, showStates.currentTarget );
- render();
+ renderer.render( scene, camera );
if( !done )
window.requestAnimationFrame( doMove );
Modified: JSFloorPlan/trunk/src/jsfloorplan_example_helper.js
===================================================================
--- JSFloorPlan/trunk/src/jsfloorplan_example_helper.js 2012-02-29 19:33:36 UTC (rev 716)
+++ JSFloorPlan/trunk/src/jsfloorplan_example_helper.js 2012-03-03 20:51:28 UTC (rev 717)
@@ -27,146 +27,6 @@
* @module JS FloorPlan 3D Example
*/
-function three_init()
-{
- return;
- // get the DOM element to attach to
- // - assume we've got jQuery to hand
- //var $container = $('#container');
- var $container = $('#top_level');
- // attach the render-supplied DOM element
- $container.append(renderer.domElement);
- // draw!
- //scene.add( camera );
- //renderer.render(scene, camera);
- //render();
- animate();
-}
-// set the scene size
-var WIDTH = 800,
- HEIGHT = 400;
-
-// set some camera attributes
-var VIEW_ANGLE = 45,
- ASPECT = WIDTH / HEIGHT,
- NEAR = 0.1,
- FAR = 10000;
-
-
-// create a WebGL renderer, camera
-// and a scene
-var renderer = new THREE.WebGLRenderer({antialias: true});
-var camera = new THREE.PerspectiveCamera(
- VIEW_ANGLE,
- ASPECT,
- NEAR,
- FAR );
-/*
-var 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;
-
-controls.keys = [ 65, 83, 68 ];
-*/
-var scene = new THREE.Scene();
-scene.add( camera );
-// the camera starts at 0,0,0 so pull it back
-camera.position.z = 300;
-
-// start the renderer
-renderer.setSize(WIDTH, HEIGHT);
-
-// enable shadows
-var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
-renderer.shadowCameraNear = 0.1;
-renderer.shadowCameraFar = 100;
-renderer.shadowCameraFov = 45;
-
-renderer.shadowMapBias = 0.0039;
-renderer.shadowMapDarkness = 0.5;
-renderer.shadowMapWidth = SHADOW_MAP_WIDTH;
-renderer.shadowMapHeight = SHADOW_MAP_HEIGHT;
-renderer.shadowMapEnabled = true;
-//renderer.shadowMapSoft = true;
-var projector = new THREE.Projector();
-
-// set up the sphere vars
-var radius = 50, segments = 16, rings = 16;
-
-// create the sphere's material
-var sphereMaterial = new THREE.MeshLambertMaterial(
-{
- color: 0xCC0000
-});
-// create a new mesh with sphere geometry -
-// we will cover the sphereMaterial next!
-var sphere = new THREE.Mesh(
- new THREE.SphereGeometry(radius,
- segments,
- rings),
-
- sphereMaterial);
-
-// add the sphere to the scene
-//scene.add(sphere);
-
-var cubeMaterial = new THREE.MeshLambertMaterial(
-{
- color: 0x0000CC
-});
-var cube = new THREE.Mesh(
- new THREE.CubeGeometry(
- 10, 20, 30,
- 2, 2),
- cubeMaterial
-);
-cube.position = new THREE.Vector3(50,50,50);
-//scene.add( cube );
-
-cubeMaterial = new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture( 'media/demo_texture_512x512.png' ) });
-//cubeMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff, ambient: 0xaa0000 } );
-
-var lineMaterial = new THREE.LineBasicMaterial( { color: 0x0099ff, linewidth: 2 } );
-
-// create a point light
-var pointLight = new THREE.PointLight( 0xFFFFFF );
-
-var ambientLight = new THREE.AmbientLight( 0xFFFFFF );
-// set its position
-pointLight.position.x = 10;
-pointLight.position.y = 50;
-pointLight.position.z = 130;
-
-// add to the scene
-//scene.add(pointLight);
-
-var lightAzimut = 3.9;
-var lightElevation = 0.25;
-var lightStrength = 80;
-var lightDistance = 50;
-//var sunLight = new THREE.PointLight( 0xFFFFFF );
-//var sunLight = new THREE.DirectionalLight( 0xFFFFFF );
-var sunLight = new THREE.SpotLight( 0xffffff );
-sunLight.position.set( 0, 1500, 1000 );
-sunLight.target.position.set( 0, 0, 0 );
-sunLight.castShadow = true;
-var sunLightView = new THREE.Geometry();
-sunLightView.vertices.push( new THREE.Vertex( sunLight.position ) );
-sunLightView.vertices.push( new THREE.Vertex( sunLight.target.position ) );
-var sunLightViewLine = new THREE.Line( sunLightView, lineMaterial );
-scene.add( sunLightViewLine );
-//var dlight = new THREE.DirectionalLight( 0xffffff, 0.1 );
-// dlight.position.set( 0.5, -1, 0 ).normalize();
-// scene.add( dlight );
-
-
/**
* Provides requestAnimationFrame in a cross browser way.
* http://paulirish.com/2011/requestanimationframe-for-smart-animating/
@@ -192,13 +52,6 @@
//stats.update();
}
-function render() {
- //controls.update();
- renderer.render( scene, camera );
-}
-
-//}
-
function handleMouseClickEvent( event )
{
if( event.room.room )
@@ -221,20 +74,6 @@
// setup script here:
var sc = 40; // overall scaling
var showStates = {};
-/*
-var showWallSides = true;
-var showWallTop = true;
-var showSideLines = true;
-var showTopLines = true;
-var showBackside = true;
-var showHoles = true;
-var showZones = true;
-var showVisibleZones = false;
-var showFloor = 1;
-var wallMouseOver = true;
-var fillOpacity = 0.5;
-var fillColor = 'black';
-*/
var redrawInterval = 50; // in milliseconds; = 20 fps
var roll = 35*Math.PI/180;
@@ -253,7 +92,7 @@
var t_25d_after_sort;
var t_25d_end;
-j = new JSFloorPlan3D();
+j = new JSFloorPlan3D('#top_level');
function init()
{
@@ -278,12 +117,16 @@
showStates[ this.name ] = this.value; // init
});
- //loadFloorplan();
j.loadFloorPlan('floorplan_demo.xml');
target.x = j.buildingProperties.x_center;
target.y = j.buildingProperties.y_center;
createSlider();
- render();
+ j.render();
+
+ // Init after the scene was set up
+ selectChange( 'showNodes' , 0, true );
+ selectChange( 'showWallLines' , 0, true );
+ selectChange( 'showFloor' , 0, true );
}
function selectChange( name, old, onlyInit )
@@ -340,7 +183,7 @@
break;
case 'showWireframe':
- cubeMaterial.wireframe = showStates['showWireframe'];
+ j.showWireframe( showStates['showWireframe'] );
break;
}
return true;
@@ -420,70 +263,6 @@
document.getElementById('status').firstChild.data = text;
}
-/*
-function set_color( event )
-{
- if( 'blue' != fillColor )
- event.setAttribute( 'fill', 'blue' );
- else
- event.setAttribute( 'fill', 'red' );
-}
-
-function unset_color( event )
-{
- event.setAttribute( 'fill', fillColor );
-}
-*/
-/*
-function check( what, redraw )
-{
- eval( what +' = document.forms[0].elements[what].checked' );
-
- switch( what )
- {
- case 'wallMouseOver':
- if( wallMouseOver )
- {
- wrapper.setAttribute( "onmouseover", 'set_color(this);' );
- wrapper.setAttribute( "onmouseout", 'unset_color(this);' );
- } else {
- wrapper.setAttribute( "onmouseover", '' );
- wrapper.setAttribute( "onmouseout", '' );
- }
- break;
- }
-
- if( redraw )
- {
- j.show3D( roll, tilt, dist, plan );
- }
-}
-*/
-
-/*
-function selectValue( what, redraw )
-{
- var val = document.forms[0].elements[what].options[ document.forms[0].elements[what].selectedIndex ].value;
- eval( what + ' = val' );
-
- switch( what )
- {
- case 'fillOpacity':
- wrapper.setAttribute( "fill-opacity", fillOpacity );
- break;
-
- case 'fillColor':
- wrapper.setAttribute( "fill", fillColor );
- break;
- }
-
- if( redraw )
- {
- j.show3D( roll, tilt, dist, plan );
- }
-}
-*/
-
// Create the little graphics for the roll and the tilt angle
// as well as the buttons to manipulate them
function createSlider()
@@ -504,15 +283,15 @@
globalInUpdateSlider = true;
var rollAngle = (roll * 180/Math.PI);
var tiltAngle = (tilt * 180/Math.PI);
- var lightDirectionAngle = (lightAzimut * 180/Math.PI);
- var lightHeightAngle = (lightElevation * 180/Math.PI);
+ var lightDirectionAngle = (j.lightAzimut * 180/Math.PI);
+ var lightHeightAngle = (j.lightElevation * 180/Math.PI);
$( "#rollSlider" ).slider( "option", "value", rollAngle );
$( "#tiltSlider" ).slider( "option", "value", tiltAngle );
$( "#distSlider" ).slider( "option", "value", dist );
$( "#lightDirectionSlider" ).slider( "option", "value", lightDirectionAngle );
$( "#lightHeightSlider" ).slider( "option", "value", lightHeightAngle );
- $( "#lightStrengthSlider" ).slider( "option", "value", lightStrength );
- $( "#lightDistanceSlider" ).slider( "option", "value", lightDistance );
+ $( "#lightStrengthSlider" ).slider( "option", "value", j.lightStrength );
+ $( "#lightDistanceSlider" ).slider( "option", "value", j.lightDistance );
globalInUpdateSlider = false;
}
@@ -540,28 +319,28 @@
function lightDirectionChange( event, ui )
{
if( globalInUpdateSlider ) return true;
- lightAzimut = ui.value * Math.PI / 180;
+ j.lightAzimut = ui.value * Math.PI / 180;
j.show3D( roll, tilt, dist, target );
}
function lightHeightChange( event, ui )
{
if( globalInUpdateSlider ) return true;
- lightElevation = ui.value * Math.PI / 180;
+ j.lightElevation = ui.value * Math.PI / 180;
j.show3D( roll, tilt, dist, target );
}
function lightStrengthChange( event, ui )
{
if( globalInUpdateSlider ) return true;
- lightStrength = ui.value;
+ j.lightStrength = ui.value;
j.show3D( roll, tilt, dist, target );
}
function lightDistanceChange( event, ui )
{
if( globalInUpdateSlider ) return true;
- lightDistance = ui.value;
+ j.lightDistance = ui.value;
j.show3D( roll, tilt, dist, target );
}
@@ -626,6 +405,5 @@
}
$(function() {
- three_init();
$('#top_level').css('border','1px solid black').click( {callback:handleMouseClickEvent,JSFloorPlan3D:j}, j.translateMouseEvent );
});
\ No newline at end of file
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
