Пример #1
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // view-source:file:///X:/opensource/github/three.js/examples/css3d_panorama.html

            var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 1000);
            var scene = new THREE.Scene();

            var renderer = new THREE.CSS3DRenderer();

            #region sides
            var sides = new[]
            {
                new side
                {
                    img=  new cubecamera_px(),
                    //img=  new humus_px(),

                    // glsl, clr46, Vector3?
                    position= new THREE.Vector3( -512, 0, 0 ),
                    rotation= new THREE.Vector3( 0, Math.PI / 2, 0 )
                },
                new side {
                    img=  new cubecamera_nx(),
                    //img=  new humus_nx(),
                    position= new THREE.Vector3( 512, 0, 0 ),
                    rotation= new THREE.Vector3( 0, -Math.PI / 2, 0 )
                },
                new side{
                    img=  new cubecamera_py(),
                    //img=  new humus_py(),
                    position= new THREE.Vector3( 0,  512, 0 ),
                    rotation= new THREE.Vector3( Math.PI / 2, 0, Math.PI )
                },
                new side{
                    img=  new cubecamera_ny(),
                    //img=  new humus_ny(),
                    position= new THREE.Vector3( 0, -512, 0 ),
                    rotation= new THREE.Vector3( - Math.PI / 2, 0, Math.PI )
                },
                new side{
                    img=  new cubecamera_pz(),
                    //img=  new humus_pz(),
                    position= new THREE.Vector3( 0, 0,  512 ),
                    rotation= new THREE.Vector3( 0, Math.PI, 0 )
                },
                new side{
                    img=  new cubecamera_nz(),
                    //img=  new humus_nz(),
                    position= new THREE.Vector3( 0, 0, -512 ),
                    rotation= new THREE.Vector3( 0, 0, 0 )
                }
            };
            #endregion

            for (var i = 0; i < sides.Length; i++)
            {
                var side = sides[i];

                var element = side.img;

                element.style.SetSize(1026, 1026);

                //element.width = 1026; // 2 pixels extra to close the gap.

                var xobject = new THREE.CSS3DObject(element);
                xobject.position.set(side.position.x, side.position.y, side.position.z);
                xobject.rotation.set(side.rotation.x, side.rotation.y, side.rotation.z);
                scene.add(xobject);

            }


            //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(0.34382355213165283, -0.024581052362918854, -0.938712477684021, 0, 0, -0.9996572732925415, 0.026176948100328445, 0, 0.9390342831611633, 0.00900025200098753, 0.34370577335357666, 0, 0, 0, 0, 0.9999999403953552) translate3d(489px, 332px, 0px);">
            //        <img src="assets/CSS3DPanoramaByHumus/posx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -512, 0, 0, 1);"><img src="assets/CSS3DPanoramaByHumus/negx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 512, 0, 0, 1);"><img src="assets/CSS3DPanoramaByHumus/posy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 512, 0, 1);"><img src="assets/CSS3DPanoramaByHumus/negy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, -512, 0, 1);"><img src="assets/CSS3DPanoramaByHumus/posz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 512, 1);"><img src="assets/CSS3DPanoramaByHumus/negz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div>
            //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(-0.4524347484111786, 0, 0.8917974829673767, 0, 0, -1, 0, 0, -0.8917974829673767, 0, -0.4524347484111786, 0, 0, 0, 0, 1) translate3d(489px, 332px, 0px);">
            // <img width="1026" src="textures/cube/Bridge2/posx.jpg"                                             style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negx.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 512, 1);"><img width="1026" src="textures/cube/Bridge2/negz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div> 


            renderer.setSize(Native.window.Width, Native.window.Height);
            renderer.domElement.AttachToDocument();

            #region onresize
            Native.window.onresize +=
                delegate
                {
                    camera.aspect = Native.window.aspect;
                    camera.updateProjectionMatrix();

                    renderer.setSize(Native.window.Width, Native.window.Height);
                };
            #endregion

            var target = new THREE.Vector3();

            var lon = 90.0;
            var lat = 0.0;
            var phi = 0.0;
            var theta = 0.0;





            var drag = false;


            Native.window.onframe +=
                delegate
                {
                    if (Native.document.pointerLockElement == Native.document.body)
                        lon += 0.00;
                    else
                        lon += 0.01;

                    lat = Math.Max(-85, Math.Min(85, lat));

                    //Native.document.title = new { lon, lat }.ToString();


                    phi = THREE.Math.degToRad(90 - lat);
                    theta = THREE.Math.degToRad(lon);

                    target.x = Math.Sin(phi) * Math.Cos(theta);
                    target.y = Math.Cos(phi);
                    target.z = Math.Sin(phi) * Math.Sin(theta);

                    camera.lookAt(target);

                    renderer.render(scene, camera);

                };

            #region ontouchmove
            var touchX = 0;
            var touchY = 0;

            Native.document.body.ontouchstart +=
                e =>
                {
                    e.preventDefault();

                    var touch = e.touches[0];

                    touchX = touch.screenX;
                    touchY = touch.screenY;

                };


            Native.document.body.ontouchmove +=
              e =>
              {
                  e.preventDefault();

                  var touch = e.touches[0];

                  lon -= (touch.screenX - touchX) * 0.1;
                  lat += (touch.screenY - touchY) * 0.1;

                  touchX = touch.screenX;
                  touchY = touch.screenY;

              };
            #endregion






            #region camera rotation
            Native.document.body.onmousemove +=
                e =>
                {
                    e.preventDefault();

                    if (Native.document.pointerLockElement == Native.document.body)
                    {
                        lon += e.movementX * 0.1;
                        lat -= e.movementY * 0.1;

                        //Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
                    }
                };


            Native.document.body.onmouseup +=
              e =>
              {
                  drag = false;
                  e.preventDefault();
              };

            Native.document.body.onmousedown +=
                e =>
                {
                    //e.CaptureMouse();

                    drag = true;
                    e.preventDefault();
                    Native.document.body.requestPointerLock();

                };


            Native.document.body.ondblclick +=
                e =>
                {
                    e.preventDefault();

                    Console.WriteLine("requestPointerLock");
                };

            #endregion



            Native.document.body.onmousewheel +=
                e =>
                {
                    camera.fov -= e.WheelDirection * 5.0;
                    camera.updateProjectionMatrix();
                };


        }
Пример #2
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // http://blog.cuartodejuegos.es/wp-content/uploads/2011/06/Story-cubes-caras.jpg
            // http://css-eblog.com/3d/box.html

            var w = Native.window.Width;
            var h = Native.window.Height;

            //      var world, ground, 
            var timeStep = 1 / 60.0;

            //diceRigid, dice,
            //camera, scene, renderer, floorObj,
            //startDiceNum = 3,
            var cubeSize = 3.0;

            #region Cannonの世界を生成
            var world = new CANNON.World();

            //重力を設定
            world.gravity.set(0, -90.82, 0);
            world.broadphase = new CANNON.NaiveBroadphase();
            world.solver.iterations = 10;
            world.solver.tolerance = 0.001;

            //地面用にPlaneを生成
            var plane = new CANNON.Plane();

            //Planeの剛体を質量0で生成する
            var ground = new CANNON.RigidBody(0, plane);

            //X軸に90度(つまり地面)に回転
            ground.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
            ground.position.set(
                50, 0, 50);

            world.add(ground);
            #endregion


            #region initThree() {


            //var camera = new THREE.OrthographicCamera(-w / 2, w / 2, h / 2, -h / 2, 1, 1000);
            var camera = new THREE.PerspectiveCamera(60, w / (double)h, 0.1, 1000);


            camera.lookAt(new THREE.Vector3(0, 0, 0));

            var scene = new THREE.Scene();
            var renderer = new THREE.CSS3DRenderer();
            renderer.setSize(w, h);

            var textureSize = 800;
            var floorEle = new IHTMLDiv();
            //floorEle.style.width = textureSize + "px";
            //floorEle.style.height = textureSize + "px";

            floorEle.style.width = 100 + "px";
            floorEle.style.height = 100 + "px";

            new WebGLDiceByEBLOG.HTML.Images.FromAssets.background().ToBackground(floorEle.style, true);

            //floorEle.style.background = 'url(http://jsrun.it/assets/d/x/0/w/dx0wl.png) left top repeat';
            //floorEle.style.backgroundSize = textureSize / 20 + "px " + textureSize / 20 + "px";
            (floorEle.style as dynamic).backgroundSize = textureSize / 20 + "px " + textureSize / 20 + "px";

            var floorObj = new THREE.CSS3DObject(floorEle);
            //floorObj.position.fromArray(new double[] { 100, 0, 0 });
            //floorObj.rotation.fromArray(new double[] { Math.PI / 2.0, 0, 0 });
            scene.add(floorObj);

            scene.add(camera);

            renderer.domElement.AttachToDocument();

            renderer.render(scene, camera);
            #endregion }



            #region createDice
            Func<xdice> createDice = delegate
            {


                Console.WriteLine("before array");


                //t = new Array(3);
                //p.rotation = t;

                var zero = 0.0;


                #region boxInfo
                var boxInfo = new[] 
                {
                         new xdiceface {
                        img = (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num4(),
                        position= new double [] { 0, 0, -cubeSize },

                        // jsc, please allow 
                        rotation= new double [] { 0, 0, zero }
                    },


                    new  xdiceface{
                        img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num2(),
                        position = new double [] { -cubeSize, 0, 0 },
                        rotation =  new double [] { 0, Math.PI / 2, 0 }
                    },
                    new xdiceface{
                        img = (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num5(),
                        position = new double [] { cubeSize, 0, 0 },
                        rotation= new double [] { 0, -Math.PI / 2, 0 }
                    },
                    new xdiceface{
                        img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num1(),
                        position= new double [] { 0,  cubeSize, 0 },
                        rotation= new double [] { Math.PI / 2, 0, Math.PI }
                    },
                    new xdiceface {
                        img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num6(),
                        position= new double [] { 0, -cubeSize, 0 },
                        rotation= new double [] { - Math.PI / 2, 0, Math.PI }
                    },
                    new xdiceface{
                        img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num3(),
                        position= new double [] { 0, 0,  cubeSize },
                        rotation= new double [] { 0, Math.PI, 0 }
                    },
               
                };
                #endregion
                Console.WriteLine("after array");

                //for three.js
                //var el, dice,
                //    info, img, face;

                var el = new IHTMLDiv();
                el.style.width = cubeSize * 2 + "px";
                el.style.height = cubeSize * 2 + "px";
                var dice = new THREE.CSS3DObject(el);

                for (var j = 0; j < boxInfo.Length; j++)
                {
                    Console.WriteLine("after array " + new { j });

                    var info = boxInfo[j];

                    info.img.style.SetSize(
                        (int)(cubeSize * 2),
                        (int)(cubeSize * 2)
                    );


                    var face = new THREE.CSS3DObject(info.img);

                    face.position.fromArray(info.position);
                    face.rotation.fromArray(info.rotation);
                    dice.add(face);
                }

                //Create physics.
                var mass = 1;
                var box = new CANNON.Box(new CANNON.Vec3(cubeSize, cubeSize, cubeSize));
                var body = new CANNON.RigidBody(mass, box);

                //body.position.set(x, y, z);
                //body.velocity.set(0, 0, Math.random() * -50 - 30);

                //body.angularVelocity.set(10, 10, 10);
                //body.angularDamping = 0.001;

                return new xdice
                {
                    dice = dice,
                    rigid = body
                };
            };
            #endregion


            //world.allowSleep = true;
            var stopped = false;

            Func<double> random = new Random().NextDouble;

            #region initAnimation
            Action<xdice> initAnimation = y =>
            {
                var position = new
                {
                    x = 5 + random() * 50.0,
                    y = 5 + random() * 50.0,
                    z = 5 + random() * 5.0,
                };

                Console.WriteLine(new { position });
                y.rigid.position.set(position.x, position.y, position.z);

                y.rigid.velocity.set(
                    random() * 20 + 0,
                    random() * 20 + 10,
                    random() * 20 + 10
                    );


                y.rigid.angularVelocity.set(10, 10, 10);
                y.rigid.angularDamping = 0.001;
            };
            #endregion

            //create a dice.

            var AllDice = new List<xdice>();

            for (int i = 0; i < 9; i++)
            {

                var y = createDice();

                initAnimation(y);

                scene.add(y.dice);
                world.add(y.rigid);

                AllDice.Add(y);

            }





            var target = new THREE.Vector3();

            var lon = 50.0;
            var lat = -72.0;





            var drag = false;

            #region onframe
            Native.window.onframe +=
                delegate
                {
                    if (Native.document.pointerLockElement == Native.document.body)
                        lon += 0.00;
                    else
                        lon += 0.01;

                    lat = Math.Max(-85, Math.Min(85, lat));

                    Native.document.title = new { lon = (int)lon, lat = (int)lat }.ToString();


                    var phi = THREE.Math.degToRad(90.0 - lat);
                    var theta = THREE.Math.degToRad(lon);

                    target.x = Math.Sin(phi) * Math.Cos(theta);
                    target.y = Math.Cos(phi);
                    target.z = Math.Sin(phi) * Math.Sin(theta);

                    //XInteractiveInt32Form.ToInteractiveInt32Form(
                    camera.position.set(
                        x: 0,
                        y: 50.ToInteractiveInt32Form(),
                        z: 0
                   );

                    #region updatePhysics();
                    //物理エンジンの時間を進める
                    world.step(timeStep);

                    //物理エンジンで計算されたbody(RigidBody)の位置をThree.jsのMeshにコピー
                    AllDice.WithEach(
                        y =>
                        {
                            y.rigid.position.copy(y.dice.position);
                            y.rigid.quaternion.copy(y.dice.quaternion);

                            //y.rigid.position.copy(camera.position);
                        }
                    );

                    if (!drag)
                    {
                        camera.lookAt(
                            new THREE.Vector3(
                                AllDice.Average(i => i.rigid.position.x),
                                AllDice.Average(i => i.rigid.position.y),
                                AllDice.Average(i => i.rigid.position.z)
                            )
                        );



                    }
                    else
                    {
                        camera.lookAt(
                            new THREE.Vector3(
                                target.x + camera.position.x,
                                target.y + camera.position.y,
                                target.z + camera.position.z
                            )
                        );
                    }

                    ground.position.copy(floorObj.position);
                    ground.quaternion.copy(floorObj.quaternion);
                    #endregion

                    renderer.render(scene, camera);
                };
            #endregion




            #region sleepy
            AllDice.Last().With(
                x =>
                {

                    x.rigid.addEventListener("sleepy",

                        IFunction.OfDelegate(
                            new Action(
                                delegate
                                {

                                    var px = new THREE.Vector4(1, 0, 0, 0);
                                    var nx = new THREE.Vector4(-1, 0, 0, 0);
                                    var py = new THREE.Vector4(0, 1, 0, 0);
                                    var ny = new THREE.Vector4(0, -1, 0, 0);
                                    var pz = new THREE.Vector4(0, 0, 1, 0);
                                    var nz = new THREE.Vector4(0, 0, -1, 0);
                                    var UP = 0.99;
                                    //tmp;

                                    #region showNum
                                    Action<int> showNum = num =>
                                    {
                                        new { num }.ToString().ToDocumentTitle();
                                    };

                                    if (px.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(5);
                                    }
                                    else if (nx.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(2);
                                    }
                                    else if (py.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(1);
                                    }
                                    else if (ny.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(6);
                                    }
                                    else if (pz.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(3);
                                    }
                                    else if (nz.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(4);
                                    }
                                    #endregion

                                    stopped = true;
                                }
                            )
                        )
                    );
                }
            );

            #endregion

            #region onresize
            Action AtResize = delegate
            {
                camera.aspect = Native.window.Width / Native.window.Height;
                camera.updateProjectionMatrix();
                renderer.setSize(Native.window.Width, Native.window.Height);
            };
            Native.window.onresize +=
              delegate
              {
                  AtResize();
              };
            #endregion


            #region onclick
            var button = new IHTMLDiv();

            button.style.position = IStyle.PositionEnum.absolute;
            button.style.left = "0px";
            button.style.right = "0px";
            button.style.bottom = "0px";
            button.style.height = "3em";
            button.style.backgroundColor = "rgba(0,0,0,0.5)";

            button.AttachToDocument();



            button.onmousedown +=
                e =>
                {
                    e.stopPropagation();
                };

            button.ontouchstart +=
                e =>
                {
                    e.stopPropagation();
                };

            button.ontouchmove +=
                 e =>
                 {
                     e.stopPropagation();
                 };

            button.onclick +=
                delegate
                {
                    stopped = false;

                    AllDice.WithEach(
                       y =>
                       {
                           initAnimation(y);
                       }
                    );

                };
            #endregion

            #region ontouchmove
            var touchX = 0;
            var touchY = 0;

            Native.document.body.ontouchend +=
               e =>
               {
                   drag = false;
               };


            Native.document.body.ontouchstart +=
                e =>
                {
                    drag = true;
                    e.preventDefault();

                    var touch = e.touches[0];

                    touchX = touch.screenX;
                    touchY = touch.screenY;

                };


            Native.document.body.ontouchmove +=
              e =>
              {
                  e.preventDefault();

                  var touch = e.touches[0];

                  lon -= (touch.screenX - touchX) * 0.1;
                  lat += (touch.screenY - touchY) * 0.1;

                  touchX = touch.screenX;
                  touchY = touch.screenY;

              };
            #endregion






            #region camera rotation
            renderer.domElement.onmousemove +=
                e =>
                {
                    e.preventDefault();

                    if (Native.document.pointerLockElement == renderer.domElement)
                    {
                        drag = true;
                        lon += e.movementX * 0.1;
                        lat -= e.movementY * 0.1;

                        //Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
                    }
                };


            renderer.domElement.onmouseup +=
              e =>
              {
                  drag = Native.document.pointerLockElement != null;
                  e.preventDefault();
              };

            renderer.domElement.onmousedown +=
                e =>
                {
                    //e.CaptureMouse();

                    drag = true;
                    e.preventDefault();
                    renderer.domElement.requestPointerLock();

                };


            renderer.domElement.ondblclick +=
                e =>
                {
                    e.preventDefault();

                    Console.WriteLine("requestPointerLock");
                };

            #endregion






        }
Пример #3
0
        // example broken by sf data loss?
        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151016/azimuthal


        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // chrome 48 opens too many connections to download pngs?
            // Version 48.0.2536.0 canary (64-bit)

            //TCP enter https { ClientCounter = 395 }
            //{ RemoteEndPoint = 192.168.1.199:65133, isPeerProxy = False }
            //{ certificate = , chain =  }

            //Unhandled Exception: OutOfMemoryException.

            // view-source:file:///X:/opensource/github/three.js/examples/css3d_panorama.html

            // http://security.stackexchange.com/questions/53765/router-detecting-port-scan-and-ack-flood-attack
            // what causes the port flood

            ////TCP enter https { ClientCounter = 12 }
            ////{ RemoteEndPoint = 192.168.1.199:65188, isPeerProxy = False }
            //new azi_ny().AttachToDocument();
            //// what happens if we add two of them?

            //var __threejs = new THREE.Vector3(-512, 0, 0);




            //var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 1000);
            //var scene = new THREE.Scene();

            //var renderer = new THREE.CSS3DRenderer();

            Console.WriteLine("about to init sides...");
            #region sides
            var sides = new[]
            {
                new side
                {
                    img=  new azi_px(),

                    // glsl, clr46, Vector3?
                    position= new THREE.Vector3( -512, 0, 0 ),
                    rotation= new THREE.Vector3( 0, Math.PI / 2, 0 )
                },
                new side {
                    img=  new azi_nx(),
                    position= new THREE.Vector3( 512, 0, 0 ),
                    rotation= new THREE.Vector3( 0, -Math.PI / 2, 0 )
                },
                new side{
                    img=  new azi_py(),
                    position= new THREE.Vector3( 0,  512, 0 ),
                    rotation= new THREE.Vector3( Math.PI / 2, 0, Math.PI )
                },
                new side{
                    img=  new azi_ny(),
                    position= new THREE.Vector3( 0, -512, 0 ),
                    rotation= new THREE.Vector3( - Math.PI / 2, 0, Math.PI )
                },
                new side{
                    img=  new azi_pz(),
                    position= new THREE.Vector3( 0, 0,  512 ),
                    rotation= new THREE.Vector3( 0, Math.PI, 0 )
                },
                new side{
                    img=  new azi_nz(),
                    position= new THREE.Vector3( 0, 0, -512 ),
                    rotation= new THREE.Vector3( 0, 0, 0 )
                }
            };
            #endregion
            Console.WriteLine("about to init CSS3DObject sides... did chrome just abuse TCP ?");

            var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 1000);
            var scene = new THREE.Scene();

            var renderer = new THREE.CSS3DRenderer();

            for (var i = 0; i < sides.Length; i++)
            {
                var side = sides[i];

                var element = side.img;

                element.style.SetSize(1026, 1026);

                //element.width = 1026; // 2 pixels extra to close the gap.

                var xobject = new THREE.CSS3DObject(element);
                xobject.position.set(side.position.x, side.position.y, side.position.z);
                xobject.rotation.set(side.rotation.x, side.rotation.y, side.rotation.z);
                scene.add(xobject);

            }

            //// c48 floods the ports by now.
            //TCP enter https { ClientCounter = 344 }
            //{ RemoteEndPoint = 192.168.1.199:49221, isPeerProxy = False }

            //Unhandled Exception: OutOfMemoryException.
            //return;


            //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(0.34382355213165283, -0.024581052362918854, -0.938712477684021, 0, 0, -0.9996572732925415, 0.026176948100328445, 0, 0.9390342831611633, 0.00900025200098753, 0.34370577335357666, 0, 0, 0, 0, 0.9999999403953552) translate3d(489px, 332px, 0px);">
            //        <img src="assets/CSSAzimuthMapViz/posx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -512, 0, 0, 1);"><img src="assets/CSSAzimuthMapViz/negx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 512, 0, 0, 1);"><img src="assets/CSSAzimuthMapViz/posy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 512, 0, 1);"><img src="assets/CSSAzimuthMapViz/negy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, -512, 0, 1);"><img src="assets/CSSAzimuthMapViz/posz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 512, 1);"><img src="assets/CSSAzimuthMapViz/negz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div>
            //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(-0.4524347484111786, 0, 0.8917974829673767, 0, 0, -1, 0, 0, -0.8917974829673767, 0, -0.4524347484111786, 0, 0, 0, 0, 1) translate3d(489px, 332px, 0px);">
            // <img width="1026" src="textures/cube/Bridge2/posx.jpg"                                             style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negx.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 512, 1);"><img width="1026" src="textures/cube/Bridge2/negz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div> 


            renderer.setSize(Native.window.Width, Native.window.Height);
            renderer.domElement.AttachToDocument();

            #region onresize
            Native.window.onresize +=
                delegate
                {
                    camera.aspect = Native.window.aspect;
                    camera.updateProjectionMatrix();

                    renderer.setSize(Native.window.Width, Native.window.Height);
                };
            #endregion

            var target = new THREE.Vector3();

            var lon = 90.0;
            var lat = 0.0;
            var phi = 0.0;
            var theta = 0.0;





            var drag = false;


            Native.window.onframe +=
                delegate
                {
                    if (Native.document.pointerLockElement == Native.document.body)
                        lon += 0.00;
                    else
                        lon += 0.01;

                    lat = Math.Max(-85, Math.Min(85, lat));

                    //Native.document.title = new { lon, lat }.ToString();


                    phi = THREE.Math.degToRad(90 - lat);
                    theta = THREE.Math.degToRad(lon);

                    target.x = Math.Sin(phi) * Math.Cos(theta);
                    target.y = Math.Cos(phi);
                    target.z = Math.Sin(phi) * Math.Sin(theta);

                    camera.lookAt(target);

                    renderer.render(scene, camera);

                };

            #region ontouchmove
            var touchX = 0;
            var touchY = 0;

            Native.document.body.ontouchstart +=
                e =>
                {
                    e.preventDefault();

                    var touch = e.touches[0];

                    touchX = touch.screenX;
                    touchY = touch.screenY;

                };


            Native.document.body.ontouchmove +=
              e =>
              {
                  e.preventDefault();

                  var touch = e.touches[0];

                  lon -= (touch.screenX - touchX) * 0.1;
                  lat += (touch.screenY - touchY) * 0.1;

                  touchX = touch.screenX;
                  touchY = touch.screenY;

              };
            #endregion






            #region camera rotation
            Native.document.body.onmousemove +=
                e =>
                {
                    e.preventDefault();

                    if (Native.document.pointerLockElement == Native.document.body)
                    {
                        lon += e.movementX * 0.1;
                        lat -= e.movementY * 0.1;

                        //Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
                    }
                };


            Native.document.body.onmouseup +=
              e =>
              {
                  drag = false;
                  e.preventDefault();
              };

            Native.document.body.onmousedown +=
                e =>
                {
                    //e.CaptureMouse();

                    drag = true;
                    e.preventDefault();
                    Native.document.body.requestPointerLock();

                };


            Native.document.body.ondblclick +=
                e =>
                {
                    e.preventDefault();

                    Console.WriteLine("requestPointerLock");
                };

            #endregion



            Native.document.body.onmousewheel +=
                e =>
                {
                    camera.fov -= e.WheelDirection * 5.0;
                    camera.updateProjectionMatrix();
                };


        }
Пример #4
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // haha this is rather messed up on android.
            // perhaps the css3d runs out of memory?

            //var frame0 = Task.Delay(100);
            //var frame1 = Task.Delay(200);



            var sw = Stopwatch.StartNew();



            //var lon0 = 90.0;
            var lon0 = 0.0;
            var lon1 = 0.0;

            var lon = new sum(
                 () => lon0,
                 () => lon1
             );

            var lat0 = 0.0;
            var lat1 = 0.0;

            // or could we do it with byref or pointers?
            var lat = new sum(
                () => lat0,
                () => lat1
            );

            var phi = 0.0;
            var theta = 0.0;



            var camera_rotation_z = 0.0;


            var drag = false;

            new { }.With(
                async delegate
                {

                    //var f12 = await new airplane().async.oncomplete;

                    // S6 likes 1024 more...
                    var f12 = await new airplane_1024().async.oncomplete;



                    Action<int> draweye = async (int eyeid) =>
                        {
                            // view-source:file:///X:/opensource/github/three.js/examples/css3d_panorama.html

                            //var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 1000);

                            // wearality lenses?
                            //var camera = new THREE.PerspectiveCamera(90, Native.window.aspect, 1, 1000);
                            //var camera = new THREE.PerspectiveCamera(120, Native.window.aspect, 1, 1000);
                            //var camera = new THREE.PerspectiveCamera(96, Native.window.aspect, 1, 1000);
                            var camera = new THREE.PerspectiveCamera(90, Native.window.aspect, 1, 1000);
                            var scene = new THREE.Scene();

                            var renderer0 = new THREE.CSS3DRenderer();

                            // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150621


                            // s6 webview wont know?
                            //var f12_height = 1536;
                            // or is s6 memory or size limited?
                            var f12_height = f12.height;

                            //var f12 = await new airplane_low().async.oncomplete;
                            //var f12 = await new airplane_1024().async.oncomplete;
                            //var f12 = await new airplane_729().async.oncomplete;
                            // stop flickering damnet
                            //var f12 = await new airplane_400().async.oncomplete;



                            // ok we got this cool 12 frame stereo map.

                            // what happens if we just pass it?
                            // haha. we get all frames in one.


                            //Func<int, var> f = i =>

                            #region f
                            Func<int, IHTMLCanvas> f = i =>
                            {
                                // we do have a skybox example somewhere...
                                var f1 = new CanvasRenderingContext2D(w: f12_height, h: f12_height);


                                // can we keep animating the stereo ?

                                // if we return canvas it gets messed up. why?
                                // looks to  be a bug?

                                //var stale = new IHTMLImage();

                                if (eyeid == 0)
                                {
                                    // GearVR would have both eyes!
                                    // laptop has to flip between eyes to give similar effect?
                                    // if this were a chrome app. could gearvr request the frames into the photos360 app?

                                    f1.drawImage(f12, i * f12_height, 0, sw: f12_height, sh: f12_height,
                                    dx: 0, dy: 0, dw: f12_height, dh: f12_height);

                                    // whenever we call drawImage ? callsite event monitoring?
                                    // this seems to be slow
                                    //stale.src = f1.canvas.toDataURL();

                                    // can we have a synchronized frame choreo?
                                    //await Task.Delay(1000 / 15);
                                }
                                else
                                {
                                    //await frame0;

                                    // update!

                                    f1.drawImage(f12, (i + 6) * f12_height, 0, sw: f12_height, sh: f12_height,
                                    dx: 0, dy: 0, dw: f12_height, dh: f12_height);

                                    //stale.src = f1.canvas.toDataURL();

                                    //await frame1;
                                    //await Task.Delay(1000 / 15);

                                };

                                // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo

                                return f1;
                            };
                            #endregion


                            //var f0 = new CanvasRenderingContext2D(w: f12.height, h: f12.height);
                            //f0.drawImage(f12, 0, 0, sw: f12.height, sh: f12.height,
                            //    dx: 0, dy: 0, dw: f12.height, dh: f12.height);

                            #region sides
                            var sides = new Func<side>[]
                    {
                () => new side
                {
                    CSS3DObject_element=  f(0),
                    position= new THREE.Vector3( -512, 0, 0 ),
                    rotation= new THREE.Vector3( 0, Math.PI / 2, 0 )
                },
                () => new side {
                    //img=  new humus_nx(),
                    CSS3DObject_element = f(1),

                    position= new THREE.Vector3( 512, 0, 0 ),
                    rotation= new THREE.Vector3( 0, -Math.PI / 2, 0 )
                },
                () => new side{
                    CSS3DObject_element=  f(2),
                    //img=  new humus_py(),
                    position= new THREE.Vector3( 0,  512, 0 ),
                    rotation= new THREE.Vector3( Math.PI / 2, 0, Math.PI )
                },
                () => new side{
                    //img=  new humus_ny(),
                    CSS3DObject_element=  f(3),
                    position= new THREE.Vector3( 0, -512, 0 ),
                    rotation= new THREE.Vector3( - Math.PI / 2, 0, Math.PI )
                },
                () => new side{
                    CSS3DObject_element=  f(4),
                    //img=  new humus_pz(),
                    position= new THREE.Vector3( 0, 0,  512 ),
                    rotation= new THREE.Vector3( 0, Math.PI, 0 )
                },
                () => new side{
                    CSS3DObject_element=  f(5),
                    //img=  new humus_nz(),
                    position= new THREE.Vector3( 0, 0, -512 ),
                    rotation= new THREE.Vector3( 0, 0, 0 )
                }
            };
                            #endregion

                            for (var i = 0; i < sides.Length; i++)
                            {
                                if (i == 1)
                                {
                                    var side = sides[i]();

                                    var element = side.CSS3DObject_element;

                                    element.style.SetSize(1026, 1026);
                                    //element.style.SetSize(256, 256);

                                    //element.width = 1026; // 2 pixels extra to close the gap.

                                    var xobject = new THREE.CSS3DObject(element);
                                    xobject.position.set(side.position.x, side.position.y, side.position.z);
                                    xobject.rotation.set(side.rotation.x, side.rotation.y, side.rotation.z);

                                    // and lets use max res?
                                    // since everything flicers, lets keep only front CSS thing
                                    scene.add(xobject);
                                }

                            }


                            //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(0.34382355213165283, -0.024581052362918854, -0.938712477684021, 0, 0, -0.9996572732925415, 0.026176948100328445, 0, 0.9390342831611633, 0.00900025200098753, 0.34370577335357666, 0, 0, 0, 0, 0.9999999403953552) translate3d(489px, 332px, 0px);">
                            //        <img src="assets/CSSStereoCubeMap/posx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -512, 0, 0, 1);"><img src="assets/CSSStereoCubeMap/negx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 512, 0, 0, 1);"><img src="assets/CSSStereoCubeMap/posy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 512, 0, 1);"><img src="assets/CSSStereoCubeMap/negy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, -512, 0, 1);"><img src="assets/CSSStereoCubeMap/posz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 512, 1);"><img src="assets/CSSStereoCubeMap/negz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div>
                            //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(-0.4524347484111786, 0, 0.8917974829673767, 0, 0, -1, 0, 0, -0.8917974829673767, 0, -0.4524347484111786, 0, 0, 0, 0, 1) translate3d(489px, 332px, 0px);">
                            // <img width="1026" src="textures/cube/Bridge2/posx.jpg"                                             style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negx.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 512, 1);"><img width="1026" src="textures/cube/Bridge2/negz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div> 


                            renderer0.domElement.AttachToDocument();

                            #region onresize
                            new { }.With(
                                async delegate
                                {
                                    do
                                    {

                                        //camera.aspect = Native.window.aspect;
                                        camera.aspect = Native.window.Width / 2.0 / Native.window.Height;
                                        camera.updateProjectionMatrix();

                                        //renderer0.setSize(Native.window.Width / 2, Native.window.Height);
                                        renderer0.setSize(Native.window.Width / 2, Native.window.Height);
                                        //renderer0.domElement.style.SetLocation(Native.window.Width / 2 * eyeid, 0);
                                        renderer0.domElement.style.SetLocation(Native.window.Width / 2 * (1 - eyeid), 0);

                                    }
                                    while (await Native.window.async.onresize);
                                });
                            #endregion

                            var target = new THREE.Vector3();


                            Native.window.onframe +=
                                delegate
                                {
                                    //if (Native.document.pointerLockElement == Native.document.body)
                                    //    lon += 0.00;
                                    //else
                                    //    lon += 0.01;

                                    //lat = Math.Max(-85, Math.Min(85, lat));

                                    Native.document.title = new { lon, lat }.ToString();


                                    //phi = THREE.Math.degToRad(90 - lat);
                                    //theta = THREE.Math.degToRad(lon);

                                    //target.x = Math.Sin(phi) * Math.Cos(theta);
                                    //target.y = Math.Cos(phi);
                                    //target.z = Math.Sin(phi) * Math.Sin(theta);

                                    //camera.lookAt(target);


                                    phi = THREE.Math.degToRad(90 - lat);
                                    theta = THREE.Math.degToRad(lon);

                                    target.x = 500 * Math.Sin(phi) * Math.Cos(theta);
                                    target.y = 500 * Math.Cos(phi);
                                    target.z = 500 * Math.Sin(phi) * Math.Sin(theta);

                                    camera.lookAt(target);
                                    camera.rotation.z += camera_rotation_z;


                                    renderer0.render(scene, camera);
                                };


                        };

                    draweye(1);
                    draweye(0);


                    var compassHeadingOffset = 0.0;
                    var compassHeadingInitialized = 0;
                    var compassHeadingInitializedsw = Stopwatch.StartNew();

                    #region compassHeading
                    // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs
                    Native.window.ondeviceorientation +=
                      dataValues =>
                      {
                          // Convert degrees to radians
                          var alphaRad = dataValues.alpha * (Math.PI / 180);
                          var betaRad = dataValues.beta * (Math.PI / 180);
                          var gammaRad = dataValues.gamma * (Math.PI / 180);

                          // Calculate equation components
                          var cA = Math.Cos(alphaRad);
                          var sA = Math.Sin(alphaRad);
                          var cB = Math.Cos(betaRad);
                          var sB = Math.Sin(betaRad);
                          var cG = Math.Cos(gammaRad);
                          var sG = Math.Sin(gammaRad);

                          // Calculate A, B, C rotation components
                          var rA = -cA * sG - sA * sB * cG;
                          var rB = -sA * sG + cA * sB * cG;
                          var rC = -cB * cG;

                          // Calculate compass heading
                          var compassHeading = Math.Atan(rA / rB);

                          // Convert from half unit circle to whole unit circle
                          if (rB < 0)
                          {
                              compassHeading += Math.PI;
                          }
                          else if (rA < 0)
                          {
                              compassHeading += 2 * Math.PI;
                          }

                          /*
                          Alternative calculation (replacing lines 99-107 above):

                            var compassHeading = Math.atan2(rA, rB);

                            if(rA < 0) {
                              compassHeading += 2 * Math.PI;
                            }
                          */

                          // Convert radians to degrees
                          compassHeading *= 180 / Math.PI;

                          // Compass heading can only be derived if returned values are 'absolute'

                          // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs

                          //Native.document.body.innerText = new { compassHeading }.ToString();
                          //if (compassHeadingInitialized > 0)
                          if (compassHeadingInitializedsw.ElapsedMilliseconds > 5000)
                          {
                              lon1 = compassHeading - compassHeadingOffset;
                          }
                          else
                          {

                              compassHeadingOffset = compassHeading;
                              compassHeadingInitialized++;
                              //compassHeadingInitialized.
                          }

                      };
                    #endregion

                    #region gamma
                    Native.window.ondeviceorientation +=
                        //e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString();
                        //e => lon = e.gamma;
                        e =>
                        {
                            lat1 = e.gamma;

                            // after servicing a running instance would be nice
                            // either by patching or just re running the whole iteration in the backgrou
                            //camera_rotation_z = e.beta * 0.02;
                            camera_rotation_z = e.beta * -0.01;
                        };
                    #endregion



                    #region camera rotation
                    var old = new { clientX = 0, clientY = 0 };

                    Native.document.body.ontouchstart +=
                        e =>
                        {
                            var n = new { e.touches[0].clientX, e.touches[0].clientY };
                            old = n;
                        };

                    Native.document.body.ontouchmove +=
                            e =>
                            {
                                var n = new { e.touches[0].clientX, e.touches[0].clientY };

                                e.preventDefault();

                                lon0 += (n.clientX - old.clientX) * 0.2;
                                lat0 -= (n.clientY - old.clientY) * 0.2;

                                old = n;
                            };


                    Native.document.body.onmousemove +=
                        e =>
                        {
                            e.preventDefault();

                            if (Native.document.pointerLockElement == Native.document.body)
                            {
                                lon0 += e.movementX * 0.1;
                                lat0 -= e.movementY * 0.1;

                                //Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
                            }
                        };


                    Native.document.body.onmouseup +=
                      e =>
                      {
                          //drag = false;
                          e.preventDefault();
                      };

                    Native.document.body.onmousedown +=
                        e =>
                        {
                            //e.CaptureMouse();

                            //drag = true;
                            e.preventDefault();
                            Native.document.body.requestPointerLock();

                        };



                    #endregion



                }
            );

        }