/// <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) { onMouseDownPosition = new THREE.Vector2(); //camera = new THREE.PerspectiveCamera( // 45, // Native.window.aspect, // 1, // 1000 // //2000 // ); //camera.position.z = 400; camera = new THREE.PerspectiveCamera(40, Native.window.Width / Native.window.Height, 1, 10000); camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); camera.position.y = radious * Math.Sin(phi * Math.PI / 360); camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); scene = new THREE.Scene(); var ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); var directionalLight = new THREE.DirectionalLight(0xffeedd); directionalLight.position.set(0, 0, 1); scene.add(directionalLight); var obj = new THREE.Object3D(); var buttomCylinder1 = new THREE.Mesh( new THREE.CylinderGeometry(50, 50, 50, 32), new THREE.MeshPhongMaterial( new { specular = new THREE.Color(0xa0a0a0), color = new THREE.Color(0xa0a0a0), }) ); buttomCylinder1.rotation.x = - 90 * Math.PI / 180; //buttomCylinder1.position.x = 0; //buttomCylinder1.position.y = 0; //buttomCylinder1.position.z = 0; obj.add(buttomCylinder1); scene.add(obj); var renderer = new THREE.WebGLRenderer( new { preserveDrawingBuffer = true } ); renderer.setSize(Native.window.Width, Native.window.Height); this.canvas = (IHTMLCanvas)renderer.domElement; this.canvas.AttachToDocument(); this.canvas.style.SetLocation(0, 0); camera.lookAt(scene.position); scene.add(obj); //var plane = new THREE.Mesh(new THREE.Plane(1000, 1000)); //plane.rotation.x = -90 * Math.PI / 180; //scene.add(plane); #region onmousedown this.canvas.onmousedown += e => { e.preventDefault(); isMouseDown = true; onMouseDownTheta = theta; onMouseDownPhi = phi; onMouseDownPosition.x = e.CursorX; onMouseDownPosition.y = e.CursorY; }; #endregion this.canvas.onmousewheel += e => { radious -= e.WheelDirection; camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); camera.position.y = radious * Math.Sin(phi * Math.PI / 360); camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); camera.updateMatrix(); }; #region onmousemove this.canvas.onmousemove += e => { e.preventDefault(); if (isMouseDown) { theta = -((e.CursorX - onMouseDownPosition.x) * 0.5) + onMouseDownTheta; phi = ((e.CursorX - onMouseDownPosition.y) * 0.5) + onMouseDownPhi; phi = Math.Min(360, Math.Max(0, phi)); camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); camera.position.y = radious * Math.Sin(phi * Math.PI / 360); camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); camera.updateMatrix(); } }; #endregion this.canvas.onmouseup += e => { e.preventDefault(); isMouseDown = false; onMouseDownPosition.x = e.CursorX - onMouseDownPosition.x; onMouseDownPosition.y = e.CursorY - onMouseDownPosition.y; }; // could we Native.window.onframe += e => { renderer.clear(); camera.updateProjectionMatrix(); camera.lookAt(scene.position); renderer.render(scene, camera); }; Native.window.onresize += delegate { //if (canvas.parentNode == Native.document.body) // are we embedded? if (page != null) renderer.setSize(); }; }
/* Source: http://www.webspaceinvader.com/2011/09/21/first-try-at-webgl/ */ /// <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(IDefault page = null) { var SCREEN_WIDTH = Native.window.Width; var SCREEN_HEIGHT = Native.window.Height; //var ,stats; //var mesh, zmesh, geometry; var mouseX = 0; var mouseY = 0; var windowHalfX = SCREEN_WIDTH / 2; var windowHalfY = SCREEN_HEIGHT / 2; var lastUpdate = new IDate().getTime(); Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; var container = new IHTMLDiv(); container.AttachToDocument(); container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 100000); camera.position.z = 50; camera.updateMatrix(); var scene = new THREE.Scene(); // LIGHTS var ambient = new THREE.AmbientLight(0x222222); ambient.position.z = -300; scene.add(ambient); var directionalLight = new THREE.DirectionalLight(0xffeedd); directionalLight.position.set(-1, 0, 1); directionalLight.position.normalize(); scene.add(directionalLight); var dLight = new THREE.DirectionalLight(0xffeedd); dLight.position.set(1, 0, 1); dLight.position.normalize(); scene.add(dLight); // init the WebGL renderer and append it to the Dom var renderer = new THREE.WebGLRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); renderer.autoClear = false; renderer.domElement.AttachTo(container); #region createScene Action <object, f, f, f, f> createScene = (geometry, x, y, z, b) => { //var zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial()); var zmesh = new THREE.Mesh(geometry); zmesh.position.x = x; zmesh.position.z = y; zmesh.position.y = z; zmesh.scale.x = 5f; zmesh.scale.y = 5f; zmesh.scale.z = 5f; //zmesh.overdraw = true; zmesh.updateMatrix(); scene.add(zmesh); }; #endregion // message: "Unexpected token /" var loader = new THREE.JSONLoader(); Action <object> callbackMale = (geometry) => { createScene(geometry, 90, 50, 0, 105); }; loader.load( url: new invade().Content.src, callback: IFunction.OfDelegate(callbackMale) ); // postprocessing var composer = new THREE.EffectComposer(renderer); var renderModel = new THREE.RenderPass(scene, camera); composer.addPass(renderModel); var effectFilm = new THREE.FilmPass(0.35, 0.50, 2048, false); //( 0.35, 0.75, 2048, false ); effectFilm.renderToScreen = true; composer.addPass(effectFilm); #region IsDisposed var IsDisposed = false; Dispose = delegate { if (IsDisposed) { return; } IsDisposed = true; renderer.domElement.Orphanize(); }; #endregion #region getFrametime Func <long> getFrametime = () => { var now = new IDate().getTime(); var tdiff = (now - lastUpdate) / 1000; lastUpdate = now; return(tdiff); }; #endregion #region render Action render = delegate { var delta = getFrametime(); camera.position.x += (mouseX - camera.position.x) * .05f; camera.position.y += (-mouseY - camera.position.y) * .05f; camera.updateMatrix(); //renderer.render( scene, camera ); renderer.clear(); composer.render(delta); }; #endregion #region onmousemove Native.document.onmousemove += e => { mouseX = (e.CursorX - windowHalfX); mouseY = (e.CursorY - windowHalfY); }; #endregion Native.window.onframe += delegate { if (IsDisposed) { return; } render(); }; #region AtResize Action AtResize = delegate { container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion #region requestFullscreen Native.document.body.ondblclick += delegate { if (IsDisposed) { return; } // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.document.body.requestFullscreen(); }; #endregion }
/// <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) { onMouseDownPosition = new THREE.Vector2(); //camera = new THREE.PerspectiveCamera( // 45, // Native.window.aspect, // 1, // 1000 // //2000 // ); //camera.position.z = 400; camera = new THREE.PerspectiveCamera(40, Native.window.Width / Native.window.Height, 1, 10000); camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); camera.position.y = radious * Math.Sin(phi * Math.PI / 360); camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); scene = new THREE.Scene(); var ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); var directionalLight = new THREE.DirectionalLight(0xffeedd); directionalLight.position.set(0, 0, 1); scene.add(directionalLight); var obj = new THREE.Object3D(); var buttomCylinder1 = new THREE.Mesh( new THREE.CylinderGeometry(50, 50, 50, 32), new THREE.MeshPhongMaterial( new { specular = new THREE.Color(0xa0a0a0), color = new THREE.Color(0xa0a0a0), }) ); buttomCylinder1.rotation.x = -90 * Math.PI / 180; //buttomCylinder1.position.x = 0; //buttomCylinder1.position.y = 0; //buttomCylinder1.position.z = 0; obj.add(buttomCylinder1); scene.add(obj); var renderer = new THREE.WebGLRenderer( new { preserveDrawingBuffer = true } ); renderer.setSize(Native.window.Width, Native.window.Height); this.canvas = (IHTMLCanvas)renderer.domElement; this.canvas.AttachToDocument(); this.canvas.style.SetLocation(0, 0); camera.lookAt(scene.position); scene.add(obj); //var plane = new THREE.Mesh(new THREE.Plane(1000, 1000)); //plane.rotation.x = -90 * Math.PI / 180; //scene.add(plane); #region onmousedown this.canvas.onmousedown += e => { e.preventDefault(); isMouseDown = true; onMouseDownTheta = theta; onMouseDownPhi = phi; onMouseDownPosition.x = e.CursorX; onMouseDownPosition.y = e.CursorY; }; #endregion this.canvas.onmousewheel += e => { radious -= e.WheelDirection; camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); camera.position.y = radious * Math.Sin(phi * Math.PI / 360); camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); camera.updateMatrix(); }; #region onmousemove this.canvas.onmousemove += e => { e.preventDefault(); if (isMouseDown) { theta = -((e.CursorX - onMouseDownPosition.x) * 0.5) + onMouseDownTheta; phi = ((e.CursorX - onMouseDownPosition.y) * 0.5) + onMouseDownPhi; phi = Math.Min(360, Math.Max(0, phi)); camera.position.x = radious * Math.Sin(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); camera.position.y = radious * Math.Sin(phi * Math.PI / 360); camera.position.z = radious * Math.Cos(theta * Math.PI / 360) * Math.Cos(phi * Math.PI / 360); camera.updateMatrix(); } }; #endregion this.canvas.onmouseup += e => { e.preventDefault(); isMouseDown = false; onMouseDownPosition.x = e.CursorX - onMouseDownPosition.x; onMouseDownPosition.y = e.CursorY - onMouseDownPosition.y; }; // could we Native.window.onframe += e => { renderer.clear(); camera.updateProjectionMatrix(); camera.lookAt(scene.position); renderer.render(scene, camera); }; Native.window.onresize += delegate { //if (canvas.parentNode == Native.document.body) // are we embedded? if (page != null) { renderer.setSize(); } }; }
/* Source: http://www.webspaceinvader.com/2011/09/21/first-try-at-webgl/ */ /// <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(IDefault page = null) { var SCREEN_WIDTH = Native.window.Width; var SCREEN_HEIGHT = Native.window.Height; //var ,stats; //var mesh, zmesh, geometry; var mouseX = 0; var mouseY = 0; var windowHalfX = SCREEN_WIDTH / 2; var windowHalfY = SCREEN_HEIGHT / 2; var lastUpdate = new IDate().getTime(); Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; var container = new IHTMLDiv(); container.AttachToDocument(); container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 100000); camera.position.z = 50; camera.updateMatrix(); var scene = new THREE.Scene(); // LIGHTS var ambient = new THREE.AmbientLight(0x222222); ambient.position.z = -300; scene.add(ambient); var directionalLight = new THREE.DirectionalLight(0xffeedd); directionalLight.position.set(-1, 0, 1); directionalLight.position.normalize(); scene.add(directionalLight); var dLight = new THREE.DirectionalLight(0xffeedd); dLight.position.set(1, 0, 1); dLight.position.normalize(); scene.add(dLight); // init the WebGL renderer and append it to the Dom var renderer = new THREE.WebGLRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); renderer.autoClear = false; renderer.domElement.AttachTo(container); #region createScene Action<object, f, f, f, f> createScene = (geometry, x, y, z, b) => { //var zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial()); var zmesh = new THREE.Mesh(geometry); zmesh.position.x = x; zmesh.position.z = y; zmesh.position.y = z; zmesh.scale.x = 5f; zmesh.scale.y = 5f; zmesh.scale.z = 5f; //zmesh.overdraw = true; zmesh.updateMatrix(); scene.add(zmesh); }; #endregion // message: "Unexpected token /" var loader = new THREE.JSONLoader(); Action<object> callbackMale = (geometry) => { createScene(geometry, 90, 50, 0, 105); }; loader.load( url: new invade().Content.src, callback: IFunction.OfDelegate(callbackMale) ); // postprocessing var composer = new THREE.EffectComposer(renderer); var renderModel = new THREE.RenderPass(scene, camera); composer.addPass(renderModel); var effectFilm = new THREE.FilmPass(0.35, 0.50, 2048, false); //( 0.35, 0.75, 2048, false ); effectFilm.renderToScreen = true; composer.addPass(effectFilm); #region IsDisposed var IsDisposed = false; Dispose = delegate { if (IsDisposed) return; IsDisposed = true; renderer.domElement.Orphanize(); }; #endregion #region getFrametime Func<long> getFrametime = () => { var now = new IDate().getTime(); var tdiff = (now - lastUpdate) / 1000; lastUpdate = now; return tdiff; }; #endregion #region render Action render = delegate { var delta = getFrametime(); camera.position.x += (mouseX - camera.position.x) * .05f; camera.position.y += (-mouseY - camera.position.y) * .05f; camera.updateMatrix(); //renderer.render( scene, camera ); renderer.clear(); composer.render(delta); }; #endregion #region onmousemove Native.document.onmousemove += e => { mouseX = (e.CursorX - windowHalfX); mouseY = (e.CursorY - windowHalfY); }; #endregion Native.window.onframe += delegate { if (IsDisposed) return; render(); }; #region AtResize Action AtResize = delegate { container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion #region requestFullscreen Native.document.body.ondblclick += delegate { if (IsDisposed) return; // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.document.body.requestFullscreen(); }; #endregion }