scenejs_on_rails 1.0.0 → 1.0.1

data/vendor/assets/javascripts/scenejs_plugins/node/alpha/orbitTracking.js

@@ -0,0 +1,295 @@
+/**
+ * Camera that flies to ray-picked point on scene object
+ *
+ * Usage example
+ * -------------
+ *
+ * someNode.addNode({
+ *      type: "alpha/orbitTracking",
+ *      eye:{ x: y:0 },
+ *      look:{ y:0 },
+ *      yaw: 340,,
+ *      pitch: -20,
+ *      zoom: 350,
+ *      zoomSensitivity:10.0,
+ *      showPick: true
+ * });
+ *
+ * The camera is initially positioned at the given 'eye' and 'look', then the distance of 'eye' is zoomed out
+ * away from 'look' by the amount given in 'zoom', and then 'eye' is rotated by 'yaw' and 'pitch'.
+ *
+ */
+require([
+    SceneJS.getConfigs("pluginPath") + "/lib/gl-matrix-min.js"
+],
+    function (glmat) {
+
+        SceneJS.Types.addType("alpha/orbitTracking", {
+
+            construct:function (params) {
+
+                var lookat = this.addNode({
+                    type:"lookAt",
+
+                    nodes:[
+                        {
+                            type:"name",
+                            name:"noname",
+
+                            // A plugin node type is responsible for attaching specified
+                            // child nodes within itself
+                            nodes:params.nodes
+                        }
+                    ]
+                });
+
+                var indicatorPos;
+                var indicatorVis;
+
+                if (params.showPick) {
+
+                    // Red sphere to indicate current point-of-interest. We'll update the
+                    // position of this whenever a new 3D position has been ray-picked.
+                    // This will be the position about which we'll orbit.
+
+                    // Sphere position, with a ID so we can update this node:
+                    indicatorPos = lookat.addNode({
+                        type:"translate",
+                        id:"__spherePOI"
+                    });
+
+                    indicatorVis = indicatorPos.addNode({
+                        type:"flags",
+                        flags:{
+                            enabled:false,
+                            transparent:true,
+                            specular: true,
+                            diffuse: false
+                        },
+                        nodes:[
+                            {
+                                type:"scale",
+                                x:50.1,
+                                y:50.1,
+                                z:50.1,
+                                nodes:[
+                                    {
+                                        type:"material",
+                                        color:{ r:1.0, g:1.0, b:0.0 },
+                                        specularColor: { r:1.0, g:1.0, b:1.0 },
+
+                                        alpha:0.5,
+                                        emit:1.0,
+                                        nodes:[
+
+                                            // Sphere primitive implemented by plugin at
+                                            // http://scenejs.org/api/latest/plugins/node/prims/sphere.js
+                                            {
+                                                type:"prims/sphere"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    });
+                }
+
+                var eye = params.eye || { x:0, y:0, z:0 };
+                var look = params.look || { x:0, y:0, z:0};
+                var zoom = params.zoom || 1000;
+                var zoomSensitivity = params.zoomSensitivity || 1.0;
+
+                lookat.set({
+                    eye:{ x:eye.x, y:eye.y, z:eye.z},
+                    look:{ x:look.x, y:look.y, z:look.z },
+                    up:{ x:0, y:1, z:0 }
+                });
+
+                var canvas = this.getScene().getCanvas();
+
+                canvas.addEventListener('mousedown', mouseDown, true);
+                canvas.addEventListener('mouseup', mouseUp, true);
+                canvas.addEventListener('touchstart', touchStart, true);
+                canvas.addEventListener('touchend', touchEnd, true);
+                canvas.addEventListener('mousemove', mouseMove, true);
+                canvas.addEventListener('touchmove', touchMove, true);
+                canvas.addEventListener('mousewheel', mouseWheel, true);
+                canvas.addEventListener('DOMMouseScroll', mouseWheel, true);
+
+                var downX;
+                var downY;
+                var lastX;
+                var lastY;
+                var dragging;
+
+                var yaw = params.yaw || 0;
+                var pitch = params.pitch || 0;
+
+                var currentPivot = [look.x || 0, look.y || 0, look.z || 0];
+                var targetPivot = [look.x || 0, look.y || 0, look.z || 0];
+
+                var needFlightUpdate = true;
+                var needRotateUpdate = true;
+
+                function mouseDown(event) {
+                    lastX = downX = event.clientX;
+                    lastY = downY = event.clientY;
+                    dragging = true;
+                }
+
+                function touchStart(event) {
+                    lastX = downX = event.targetTouches[0].clientX;
+                    lastY = downY = event.targetTouches[0].clientY;
+                    dragging = true;
+                }
+
+                function mouseUp(event) {
+                    if (dragging && event.clientX == downX && event.clientY == downY) {
+                        pick(event.clientX, event.clientY);
+                    }
+                    dragging = false;
+                }
+
+                function touchEnd(event) {
+                    if (dragging && event.targetTouches[0].clientX == downX && event.targetTouches[0].clientY == downY) {
+                        pick(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+                    }
+                    dragging = false;
+                }
+
+                function mouseMove(event) {
+                    var posX = event.clientX;
+                    var posY = event.clientY;
+                    actionMove(posX, posY);
+                }
+
+                function touchMove(event) {
+                    var posX = event.targetTouches[0].clientX;
+                    var posY = event.targetTouches[0].clientY;
+                    actionMove(posX, posY);
+                }
+
+                function actionMove(posX, posY) {
+                    if (dragging) {
+                        yaw += (posX - lastX) * 0.1;
+                        pitch -= (posY - lastY) * 0.1;
+                        needRotateUpdate = true;
+                    }
+                    lastX = posX;
+                    lastY = posY;
+                }
+
+                function mouseWheel(event) {
+                    var delta = 0;
+                    if (!event) event = window.event;
+                    if (event.wheelDelta) {
+                        delta = event.wheelDelta / 120;
+                        if (window.opera) delta = -delta;
+                    } else if (event.detail) {
+                        delta = -event.detail / 3;
+                    }
+                    if (delta) {
+                        if (delta < 0) {
+                            zoom -= zoomSensitivity;
+                        } else {
+                            zoom += zoomSensitivity;
+                        }
+                    }
+                    if (event.preventDefault) {
+                        event.preventDefault();
+                    }
+                    event.returnValue = false;
+                    needRotateUpdate = true;
+                }
+
+                function pick(canvasX, canvasY) {
+                    scene.pick(canvasX, canvasY, { rayPick:true });
+                }
+
+                var scene = this.getScene();
+
+                scene.on("pick",
+                    function (hit) {
+                        targetPivot = hit.worldPos;
+                        if (indicatorVis) {
+                            indicatorVis.setEnabled(true);
+                            indicatorPos.setXYZ({x:targetPivot[0], y:targetPivot[1], z:targetPivot[2] });
+                        }
+                        needFlightUpdate = true;
+                    });
+
+                scene.on("tick",
+                    function () {
+
+
+                        if (needFlightUpdate) {
+
+                            // Continue flight
+                            // Find new pivot point, interpolated on path towards new point
+
+                            var a = glmat.vec3.fromValues(targetPivot[0], targetPivot[1], targetPivot[2]);
+                            var b = glmat.vec3.fromValues(currentPivot[0], currentPivot[1], currentPivot[2]);
+                            var vec = glmat.vec3.create();
+                            glmat.vec3.sub(vec, a, b);
+                            var dist = glmat.vec3.length(vec);
+
+                            if (dist > 15.0) {
+                                var vel = glmat.vec3.normalize(vec, vec);
+                                currentPivot[0] += vec[0] * 10.2;
+                                currentPivot[1] += vec[1] * 10.2;
+                                currentPivot[2] += vec[2] * 10.2;
+
+                                // Need to rotate lookat
+                                needRotateUpdate = true;
+                            } else {
+
+                                // Stop flying
+                                needFlightUpdate = false;
+
+                                // Hide pick indicator
+                                if (indicatorVis) {
+                                    indicatorVis.setEnabled(false);
+                                }
+                            }
+                        }
+
+
+                        if (needRotateUpdate) {
+
+                            // Update location of point-of-interest indicator
+                            if (indicatorVis) {
+                                indicatorVis.setEnabled(true);
+                            }
+
+                            var eye = glmat.vec3.fromValues(0, 0, zoom);
+                            var look = glmat.vec3.fromValues(currentPivot[0], currentPivot[1], currentPivot[2]);
+                            //    var up = glmat.vec3.fromValues(0, 1, 0);
+
+                            var eyeVec = glmat.vec3.create();
+                            glmat.vec3.sub(eyeVec, eye, look);
+
+                            var mat = glmat.mat4.create();
+
+                            glmat.mat4.rotateY(mat, mat, -yaw * 0.0174532925);
+                            glmat.mat4.rotateX(mat, mat, -pitch * 0.0174532925);
+
+                            var eye3 = glmat.vec3.create();
+
+                            glmat.vec3.transformMat4(eye3, eye, mat);
+
+                            // Update view transform
+                            lookat.setLook({x:look[0], y:look[1], z:look[2] });
+                            lookat.setEye({x:look[0] - eye3[0], y:look[1] - eye3[1], z:look[2] - eye3[2] });
+
+                            // Rotate complete
+                            needRotateUpdate = false;
+                        }
+                    });
+            },
+
+            destruct:function () {
+                // TODO: remove mouse handlers
+            }
+        });
+    });

data/vendor/assets/javascripts/scenejs_plugins/node/alpha/orbitTrackingTarget.js

@@ -0,0 +1,43 @@
+/**
+ *
+ */
+
+SceneJS.Types.addType("alpha/orbitTrackingTarget", {
+
+    construct:function (params) {
+        this._camera = null;
+    },
+
+
+    setEnabled:function (enabled) {
+        if (!this._camera && enabled) {
+            this.log("error", "No parent 'orbitTracking' node - ignoring enable");
+            return;
+        }
+        if (enabled) {
+            this._camera._activeTargetId = this.id;
+        } else {
+            if (this._camera._activeTargetId == this.id) {
+                this._camera._activeTargetId = null;
+            }
+        }
+    },
+
+    preCompile:function () {
+        this._camera = this.findParentByType("alpha/orbitTracking");
+        if (!this._camera) {
+            this.log("error", "Mandatory parent 'orbitTracking' node not found");
+        }
+        this.on("rendered", function (data) {
+            if (this._camera._activeTargetId == this.id) {
+                //this._camera.
+            }
+        });
+    },
+
+    destruct:function () {
+        if (this._camera._activeTargetId == this.id) {
+            this._camera._activeTargetId = null;
+        }
+    }
+});

data/vendor/assets/javascripts/scenejs_plugins/node/backgrounds/gradient.js

@@ -0,0 +1,148 @@
+/*
+ * A gradient background
+ *
+ * The background is a quad that sits at the back of the view frustum.
+ *
+ * The color for the quad is specified as a color for each of the quad's vertices. The color is given as
+ * a flat array of 16 double precision numbers, in the range [0.0..1.0], in this format:
+ *
+ *   [r, g, b, a, r, b, b, a, r, g, b, a, r, g, b, a]
+ *
+ * which is for top-left, top-right, bottom-right and bottom-left corners, respectively.
+ *
+ * The 'a' components are for the alpha channel, and should be given the value 1.0. That's just
+ * there in case we want to do something fancy with alpha channel at some point, like blending.
+ *
+ * var bg = myNode.addNode({
+ *      depth: -30, // default
+ *      colors:[
+ *          0.05, 0.06, 0.07, 1.0, // top left (R,G,B,A)
+ *          0.05, 0.06, 0.07, 1.0, // top right
+ *          0.85, 0.9, 0.98, 1.0, // bottom right
+ *          0.85, 0.9, 0.98, 1.0   // bottom left
+ *      ]
+ * });
+ *
+ * // Change the colors:
+ *
+ * bg.setColors([
+ *          0.01, 0.03, 0.07, 1.0,
+ *          0.01, 0.03, 0.07, 1.0,
+ *          0.21, 0.2, 0.98, 1.0,
+ *          0.21, 0.2, 0.98, 1.0
+ * ]);
+ *
+ * // Change the depth:
+ *
+ * bg.setDepth(-50);
+ *
+ */
+(function () {
+
+    var defaultColors = [
+        0.05, 0.06, 0.07, 1.0, // top left (R,G,B,A)
+        0.05, 0.06, 0.07, 1.0, // top right
+        0.85, 0.9, 0.98, 1.0, // bottom right
+        0.85, 0.9, 0.98, 1.0   // bottom left
+    ];
+
+    var defaultDepth = -30;
+
+    SceneJS.Types.addType("backgrounds/gradient", {
+
+        construct:function (params) {
+
+            var colors = params.colors;
+            if (colors && colors.length != 16) {
+                this.log("error", "Invalid 'colors' param for backgrounds/gradients: should be 16-element array");
+                colors = defaultColors;
+            }
+
+            this._lookat = this.addNode({
+                type:"lookAt",
+                eye:{ x:0, y:0, z:params.depth || defaultDepth },
+                look:{ x:0, y:0, z:0 },
+                up:{ x:0, y:1, z:.0 }
+            });
+
+            var lights = this._lookat.addNode({
+                type:"lights",
+                lights:[
+                    {
+                        mode:"dir",
+                        color:{ r:1.0, g:1.0, b:1.0 },
+                        dir:{ x:0.0, y:0.0, z:-1.0 },
+                        diffuse:true,
+                        specular:true,
+                        space:"view"
+                    }
+                ]
+            });
+
+            var material = lights.addNode({
+                type:"material",
+                baseColor:{ r:.95, g:.95, b:.95 },
+                specularColor:{ r:0.0, g:0.0, b:0.0 },
+                emit:0.2,
+                specular:0.9,
+                shine:3.0
+            });
+
+            // TODO: width and height, perhaps from frustum
+
+            this._geometry = material.addNode({
+                type:"geometry",
+                primitive:"triangles",
+
+                positions:[
+                    950, 200, 300,
+                    -950, 200, 300,
+                    -950, -200, 300,
+                    950, -200, 300
+                ],
+
+                normals:[
+                    0, 0, -1,
+                    0, 0, -1,
+                    0, 0, -1,
+                    0, 0, -1
+                ],
+
+                uv:[
+                    10, 10,
+                    0, 10,
+                    0, 0,
+                    10, 0
+                ],
+
+                colors:params.colors || defaultColors,
+
+                indices:[
+                    0, 1, 2, 0, 2, 3
+                ]
+            });
+        },
+
+        /**
+         * Sets the gradient colors
+         *
+         * @param {Array} [colors] 16-element flat array of colors for vertices - reverts to default when not given
+         */
+        setColors:function (colors) {
+            this._geometry.setColors(colors || defaultColors);
+        },
+
+        /** Sets the depth
+         *
+         * @param {Number} [depth] Depth on Z-axis - default is -30, reverets to that when no parameter given
+         */
+        setDepth: function(depth) {
+            this._lookat.setEye({ x:0, y:0, z:params.depth || defaultDepth });
+        },
+
+        destruct:function () {
+            // Not used
+        }
+    });
+
+})();