/// <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(); }; }
/// <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 }
// 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(); }; }
/// <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 } ); }