added 3d model, started toolbar css

bin/style.css

@@ -48,6 +48,87 @@ a {
 	background : url('libs/jstree/default-dark/throbber.gif');
 }
 
+.hide-scene {
+	cursor: default;
+}
+
+.hide-scene-layer {
+	position: absolute;
+	z-index: 1;
+	height: 100%;
+}
+
+.hide-scene-layer .jstree {
+	background: transparent !important;
+	user-select: none;
+}
+
+.hide-toolbar-content {
+	flex-grow: 100;
+	position: relative;
+}
+
+.hide-toolbar-content > canvas {
+	position : absolute;
+}
+
+.hide-toolbar-container {
+	display: flex;
+	flex-direction: column;
+	height : 100%;
+}
+
+.hide-toolbar {
+	width: 100%;
+	height : 24px;
+	padding : 4px;
+	padding-top: 2px;
+	padding-bottom: 6px;
+	background-color : rgb(34,34,34);
+	border-bottom : 1px solid #000;
+}
+
+.hide-toolbar-button, .hide-toolbar-toggle {
+	margin-right : 5px;
+	display: inline-block;
+	border: 1px solid rgb(90,90,90);
+	width : 20px;
+	height : 20px;
+	padding : 2px;
+	text-align: center;
+	border-radius: 1px;
+	text-shadow: 1px 2px 2px black; 
+	background: -webkit-linear-gradient(top, rgb(90,90,90), rgb(50,50,50));
+	cursor : pointer;
+	font-size: 16px;
+	vertical-align: top;
+}
+
+.hide-toolbar-button .hide-toolbar-icon {
+	vertical-align: center;
+}
+
+.hide-toolbar-button:hover, .hide-toolbar-toggle:hover {
+	color : white;
+	border-color : white;
+	background-color : #666;	
+}
+
+.hide-toolbar-toggle.toggled {
+	color : #ddd;	
+	background : #777;	
+	padding-top: 2px;
+	padding-bottom: 1px;
+	text-shadow: none;
+	border-top-width: 2px;
+	border-top-color: #444;
+}
+
+.hide-toolbar-button:active {
+	padding-top: 3px;
+	padding-bottom: 1px;
+}
+
 /* Golden Layout Fixes */
 
 .lm_header .lm_tabs {

hide/comp/Scene.hx

@@ -17,6 +17,11 @@ class Scene extends Component implements h3d.IDrawable {
 		canvas = cast new Element("<canvas class='hide-scene' style='width:100%;height:100%'/>").appendTo(root)[0];
 		canvas.addEventListener("mousemove",function(_) canvas.focus());
 		canvas.addEventListener("mouseleave",function(_) canvas.blur());
+		canvas.oncontextmenu = function(e){
+			e.stopPropagation();
+			e.preventDefault();
+			return false;
+		};
 		haxe.Timer.delay(delayedInit,0); // wait canvas added to window
 	}
 
@@ -64,19 +69,56 @@ class Scene extends Component implements h3d.IDrawable {
 		engine.render(this);
 	}
 
-	public function loadTextureFile( path : String, onReady : h3d.mat.Texture -> Void ) {
+	public function loadTexture( path : String, onReady : h3d.mat.Texture -> Void, ?target : h3d.mat.Texture ) {
 		var path = ide.getPath(path);
 		var img = new Element('<img src="file://$path"/>');
 		img.on("load",function() {
 			setCurrent();
 			var bmp : js.html.ImageElement = cast img[0];
-			var t = new h3d.mat.Texture(bmp.width, bmp.height);
+			var t;
+			if( target == null )
+				t = new h3d.mat.Texture(bmp.width, bmp.height);
+			else {
+				t = target;
+				target.resize(bmp.width, bmp.height);
+			}
 			untyped bmp.ctx = { getImageData : function(_) return bmp, canvas : { width : 0, height : 0 } };
 			engine.driver.uploadTextureBitmap(t, cast bmp, 0, 0);
 			onReady(t);
 		});
 	}
 
+	public function loadModel( path : String ) {
+		var lib = loadHMD(path,false);
+		return lib.makeObject(loadHMDTexture.bind(path));
+	}
+
+	function loadHMDTexture( basePath : String, texturePath : String ) {
+		if( sys.FileSystem.exists(texturePath) ) {
+			var t = new h3d.mat.Texture(1,1);
+			t.clear(0x102030);
+			loadTexture(texturePath, function(_) {}, t);
+			return t;
+		}
+		trace("TODO:",basePath, texturePath);
+		return null;
+	}
+
+	function loadHMD( path : String, isAnimation : Bool ) {
+		var fullPath = ide.getPath(path);
+		var data = sys.io.File.getBytes(fullPath);
+		if( data.get(0) != 'H'.code ) {
+			var hmdOut = new hxd.fmt.fbx.HMDOut();
+			hmdOut.absoluteTexturePath = true;
+			hmdOut.loadTextFile(data.toString());
+			var hmd = hmdOut.toHMD(null, !isAnimation);
+			var out = new haxe.io.BytesOutput();
+			new hxd.fmt.hmd.Writer(out).write(hmd);
+			data = out.getBytes();
+		}
+		return hxd.res.Any.fromBytes(path,data).toModel().toHmd();
+	}
+
 	public function render( e : h3d.Engine ) {
 		s3d.render(e);
 		s2d.render(e);

hide/comp/Toolbar.hx

@@ -0,0 +1,34 @@
+package hide.comp;
+
+typedef Toggle = {
+	var element : Element;
+	function toggle( v : Bool ) : Void;
+}
+
+class Toolbar extends Component {
+
+	public var bar : Element;
+	public var content : Element;
+
+	public function new(root) {
+		super(root);
+		var e = new Element('<div class="hide-toolbar-container"><div class="hide-toolbar"/><div class="hide-toolbar-content"/>').appendTo(root);
+		bar = e.find('.hide-toolbar');
+		content = e.find(".hide-toolbar-content");
+	}
+
+	public function addButton( icon : String, ?label : String, ?onClick : Void -> Void ) {
+		var e = new Element('<div class="hide-toolbar-button" title="${label==null ? "" : label}"><div class="hide-toolbar-icon fa fa-$icon"/></div>');
+		if( onClick != null ) e.click(function(_) onClick());
+		e.appendTo(bar);
+		return e;
+	}
+
+	public function addToggle( icon : String, ?label : String, ?onToggle : Bool -> Void ) : Toggle {
+		var e = new Element('<div class="hide-toolbar-toggle" title="${label==null ? "" : label}"><div class="hide-toolbar-icon fa fa-$icon"/></div>');
+		e.click(function(_) { e.toggleClass("toggled"); if( onToggle != null ) onToggle(e.hasClass("toggled")); });
+		e.appendTo(bar);
+		return { element : e, toggle : function(b) e.toggleClass("toggled",b) };
+	}
+
+}

hide/view/Image.hx

@@ -8,7 +8,7 @@ class Image extends FileView {
 	override function onDisplay( e : Element ) {
 		scene = new hide.comp.Scene(e);
 		scene.onReady = function() {
-			scene.loadTextureFile(state.path, function(t) {
+			scene.loadTexture(state.path, function(t) {
 				bmp = new h2d.Bitmap(h2d.Tile.fromTexture(t), scene.s2d);
 				onResize();
 			});

hide/view/Model.hx

@@ -0,0 +1,83 @@
+package hide.view;
+
+class Model extends FileView {
+
+	var tools : hide.comp.Toolbar;
+	var obj : h3d.scene.Object;
+	var scene : hide.comp.Scene;
+	var control : h3d.scene.CameraController;
+	var tree : hide.comp.IconTree;
+
+	override function onDisplay( e : Element ) {
+		tools = new hide.comp.Toolbar(e);
+		var cont = new Element('<div class="hide-scene-layer">').appendTo(tools.content);
+		var scroll = new hide.comp.ScrollZone(cont);
+		tree = new hide.comp.IconTree(scroll.content);
+		tree.get = getSceneElements;
+		scene = new hide.comp.Scene(tools.content);
+		scene.onReady = init;
+	}
+	
+	function init() {
+		obj = scene.loadModel(state.path);
+		scene.s3d.addChild(obj);
+		control = new h3d.scene.CameraController(scene.s3d);
+		resetCamera();
+		tree.init();
+		tools.addButton("cube","Test");
+		tools.addToggle("bank","Test toggle");
+	}
+
+	function getSceneElements( id : String ) {
+		var root = obj; 
+		var path = id == null ? "" : id+"/";
+		if( id != null ) {
+			var parts = [for(p in id.split("/")) Std.parseInt(p)];
+			for( p in parts )
+				root = root.getChildAt(p);
+		}
+		var elements : Array<hide.comp.IconTree.IconTreeItem> = [
+			for( i in 0...root.numChildren ) {
+				var c = root.getChildAt(i);
+				{
+					id : path+i,
+					text : c.name,
+					icon : "fa fa-" + (c.isMesh() ? (Std.is(c,h3d.scene.Skin) ? "male" : "cube") : "circle-o"),
+					children : c.isMesh() || c.numChildren > 0,
+				}
+			}
+		];
+		if( root.isMesh() ) {
+			function makeMaterial( m : h3d.mat.Material, index : Int ) : hide.comp.IconTree.IconTreeItem {
+				return {
+					id : path+"mat"+index,
+					text : m.name,
+					icon : "fa fa-photo",
+				};
+			}
+			var multi = Std.instance(root,h3d.scene.MultiMaterial);
+			if( multi != null )
+				for( m in multi.materials )
+					elements.push(makeMaterial(m,multi.materials.indexOf(m)));
+			else
+				elements.push(makeMaterial(root.toMesh().material,0));
+		}
+		return elements;
+	}
+
+	function resetCamera() {
+		var b = obj.getBounds();
+		var dx = Math.max(Math.abs(b.xMax),Math.abs(b.xMin));
+		var dy = Math.max(Math.abs(b.yMax),Math.abs(b.yMin));
+		var dz = Math.max(Math.abs(b.zMax),Math.abs(b.zMin));
+		var dist = Math.max(Math.max(dx * 6, dy * 6), dz * 4);
+		var ang = Math.PI / 4;
+		var zang = Math.PI * 0.4;
+		scene.s3d.camera.pos.set(Math.sin(zang) * Math.cos(ang) * dist, Math.sin(zang) * Math.sin(ang) * dist, Math.cos(zang) * dist);
+		scene.s3d.camera.target.set(0, 0, (b.zMax + b.zMin) * 0.5);
+		control.loadFromCamera();		
+	}
+
+	static var _ = FileTree.registerExtension(Model,["hmd","fbx"],{ icon : "cube" });
+
+}