Pompidou WebGL Viewer
-
I extracted a list of methods from the Pompidou WebGL viewer (http://pompidouviewer.appspot.com/compiled.js
sketchup.geom.BoundingBox sketchup.**doc**.Material sketchup.**doc**.Scene sketchup.**doc**.Model sketchup.**doc**.Style sketchup.geom.Line sketchup.geom.Mesh sketchup.geom.Plane sketchup.geom.Point sketchup.geom.Transform[].**makeAdjoint_** sketchup.geom.Transform[].**perspective** sketchup.geom.Transform[].**transpose** sketchup.geom.Vector sketchup.tool.Tool[].**onMouseWheel** sketchup.ui.Toolbar sketchup.**util**.Color ... viewer_.camera.eye viewer_.pickRay viewer_.renderOptions.groundColor viewer_.toolManager.setActiveTool ...
Interesting is that it looks sustainably designed, very similar to the Ruby API, with some new methods and some restructuring.@unknownuser said:
@unknownuser said:
„Though I'm personally curious what people would think of a Javascript API...“
-
Ok, I tried myself with maybe the first Pompidou Plugin. It's relatively easy to register additional Tools. We only can't yet work with entities or geometry-picking/intersection (understandably).
1.) Visit the PompidouViewer directly (it works not through the iframe):
for example: http://pompidouviewer.appspot.com/viewer.html?Pompidou/Airport_Cafe.dae
2.) Open the JavaScript Console (in Chromium/Chrome: Ctrl+Shift+I)
3.) Paste and hit enter.// Let's register another Tool; sketchup.tool.LookAround = function () { this.lastY = this.lastX = 0; this.isLDragging = !1; this.isMDragging = !1; this.ORBIT_SENSITIVITY = 300; this.MOUSEWHEEL_ZOOM_FRACTION = 12; this.upVector_ = new sketchup.geom.Vector(0, 0, 1); this.moveDir = new sketchup.geom.Vector(1, 0, 0); }; goog.inherits(sketchup.tool.LookAround, sketchup.tool.Tool); goog.exportSymbol("sketchup.tool.LookAround", sketchup.tool.LookAround); sketchup.tool.LookAround[$$PROP_prototype].onLButtonDown = function (a, b, c, d) { this.isLDragging = !0; this.onButtonDown(a, b, c, d); this.interval_ = null; // Once the mouse button is pressed, we want to walk no matter whether the mouse moves. this.interval_ = window.setInterval( function(){ // this was tricky because "this.isLDragging" etc. // is not available in the context of window.setInterval var tool = viewer.toolManager.toolStack_[0]; var e = viewer.camera.eye.offset(tool.moveDir), t = viewer.camera.target.offset(tool.moveDir); viewer.camera.setView(e, t, tool.up); viewer.viewChanged(); viewer.stopAnimation(); if (!tool.isLDragging && tool.interval_) window.clearInterval(tool.interval_); }, 50); }; // No idea why we have to do this at all; goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onLButtonDown", sketchup.tool.LookAround[$$PROP_prototype].onLButtonDown); sketchup.tool.LookAround[$$PROP_prototype].onLButtonUp = function () { this.isLDragging = !1; }; goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onLButtonUp", sketchup.tool.LookAround[$$PROP_prototype].onLButtonUp); sketchup.tool.LookAround[$$PROP_prototype].onMButtonDown = function (a, b, c, d) { this.isMDragging = !0; this.onButtonDown(a, b, c, d); }; goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onMButtonDown", sketchup.tool.LookAround[$$PROP_prototype].onMButtonDown); sketchup.tool.LookAround[$$PROP_prototype].onMButtonUp = function (a, b, c, d) { this.isMDragging = !1; }; goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onMButtonUp", sketchup.tool.LookAround[$$PROP_prototype].onMButtonUp); // (no standard event, only for my own use in onLButtonDown and onMButtonDown) sketchup.tool.LookAround[$$PROP_prototype].onButtonDown = function (a, b, c, d){ this.lastX = b; this.lastY = c; a.center = { x; GLOBAL_window[$$PROP_innerWidth] / 2, y; GLOBAL_window[$$PROP_innerHeight] / 2 }; b = a.doPick(a.center.x, a.center.y, { spread; 0.5 }); if (d[$$PROP_shiftKey]){ var d = a.pickRay(a.center.x, a.center.y), b = new sketchup.geom.Plane(a.camera[$$PROP_target].clone(), d[$$PROP_direction]), c = a.pickRay(a.center.x + 1, a.center.y), a = a.pickRay(a.center.x, a.center.y + 1), d = b.intersect(d), c = b.intersect(c), a = b.intersect(a); this.panPerX = d.vectorTo(c); this.panPerY = d.vectorTo(a); } } // If dragging with middle mouse button; inverse the orbit function (= look around), // if dragging with left mouse button; set only camera properties, but update the view in the loop in onLButtonDown. sketchup.tool.LookAround[$$PROP_prototype].onMouseMove = function (a, b, c, d) { if (this.isLDragging || this.isMDragging) { var e = b - this.lastX, f = c - this.lastY; this.lastX = b; this.lastY = c; var c = a.camera.eye.clone(), b = a.camera[$$PROP_target].clone(), g = new sketchup.geom.Vector(1, 0, 0), h = new sketchup.geom.Vector(0, 1, 0), i = new sketchup.geom.Vector(0, 0, 1), j = (new sketchup.geom.Point(c.x, c.y, b.z)).vectorTo(b), k = c.vectorTo(b), h = h.angleBetween(j), i = k.angleBetween(i), g = g.angleBetween(j), j = j.angleBetween(k), l = b.distanceTo(c); g > GLOBAL_Math.PI / 2 && (h = 2 * GLOBAL_Math.PI - h); j > GLOBAL_Math.PI / 2 && (i = 2 * GLOBAL_Math.PI - i); if (d[$$PROP_shiftKey]) d = this.panPerX.clone(), h = this.panPerY.clone(), SETPROP_length(d, d[$$PROP_length] * -e), SETPROP_length(h, h[$$PROP_length] * -f), c[$$PROP_offset](d), c[$$PROP_offset](h), b[$$PROP_offset](d), b[$$PROP_offset](h); else { if (this.isLDragging){ h += e / this.ORBIT_SENSITIVITY; i += f / this.ORBIT_SENSITIVITY; } else if (this.isMDragging){ h -= e / this.ORBIT_SENSITIVITY; i -= f / this.ORBIT_SENSITIVITY; }; if (i > GLOBAL_Math.PI || 0 > i) i += f / this.ORBIT_SENSITIVITY; b.x = c.x + GLOBAL_Math.sin(h) * l * GLOBAL_Math.sin(i); b.y = c.y + GLOBAL_Math.cos(h) * l * GLOBAL_Math.sin(i); b.z = c.z + GLOBAL_Math.cos(i) * l } if (this.isLDragging){ this.moveDir = k; this.moveDir.setLength(5); a.camera.setView(c, b, this.upVector_); } else if (this.isMDragging){ a.camera.setView(c, b, this.upVector_); a.viewChanged(); a.stopAnimation(); }; } } goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onMouseMove", sketchup.tool.LookAround[$$PROP_prototype].onMouseMove); // Inherit the Zoom function for the mousewheel. goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onMouseWheel", sketchup.tool.Orbit[$$PROP_prototype].onMouseWheel); // This does not yet have an effect. The canvas seems not to get keyboard events. sketchup.tool.LookAround[$$PROP_prototype].onKeyDown = function (a, b, c, d) { console.log("onKeyDown; "+[a,b,c,d]) } goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onKeyDown", sketchup.tool.LookAround[$$PROP_prototype].onKeyDown); // Extra bonus; Select the new tool now! viewer.toolManager.setActiveTool(new sketchup.tool.LookAround)Existing tools:
%(#000000)[viewer.toolManager.setActiveTool(new **sketchup.tool.Orbit**) viewer.toolManager.setActiveTool(new **sketchup.tool.Pan**) viewer.toolManager.setActiveTool(new **sketchup.tool.Zoom**)]
also:
%(#000000)[viewer.zoomExtents() viewer.selectLastSketchUpScene() viewer.playScenes()]
... -
great !!!!!
-
It could be cool to have the choice between Orbit, Pan,Position camera and Walktool.
Just my thought.
OOPs I should read all the post.
-
The SketchUp people have not yet made a
%(#000000)[sketchup.ui.Toolbar]to hold their tools
(But maybe they will add that in another variant of the Viewer.) -
hi
can't run the js on mac, just get undefined message?
john
-
hi, do we have some more informations about this viewer? Will it be available to include into our websites?
-
It will be interesting when the API is officially released. In the meantime - has anyone tried this with models on other sites, like:
(this needs to be URL encoded, of course)
CHeers,
Alex -
is it possible to control layer visibility with the webgl api?
-
(You could look it up in the above list). I found only a couple of times something with "layer", and no method to set/change visibility of a layer. I suppose all the layer methods (like many others) are up to now only empty place holders.
In addition to that, it depends on what features can be read from the .dae model. As we know, SketchUp's .dae exporter doesn't preserve scenes and layers (but on the SketchUp Showcase they have scenes!). Similarly, the Pompidou Viewer also contains methods for handling geometric primitives and materials (edges etc.) but models are up to now only loaded as a big mesh object, without distinction into single entities.
Advertisement