/// <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();
                };
        }
Beispiel #2
0
        /* 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
        }
Beispiel #3
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)
        {
            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

        }