public override void Init()
        {
            mouse = new THREE.Vector2();
            raycaster = new THREE.Raycaster();
            offset = new THREE.Vector3();
            allObjects = new THREE.Mesh[] { };

            CreateCamera();
            CreateScene();

            CreateBoxes();

            plane = new THREE.Mesh(
                new THREE.PlaneBufferGeometry(2000.0, 2000.0, 8.0, 8.0),
                new THREE.MeshBasicMaterial() { color = 0x000000, opacity = 0.25, transparent = true }
            );
            plane.visible = false;
            scene.add(plane);

            CreateRenderer();
            renderer.domElement.OnMouseMove = this.onDocumentMouseMove;
            renderer.domElement.OnMouseDown = this.onDocumentMouseDown;
            renderer.domElement.OnMouseUp = this.onDocumentMouseUp;

            CreateTrackball();
        }
        public override void Init()
        {
            mouse      = new THREE.Vector2();
            raycaster  = new THREE.Raycaster();
            offset     = new THREE.Vector3();
            allObjects = new THREE.Mesh[] { };

            CreateCamera();
            CreateScene();

            CreateBoxes();

            plane = new THREE.Mesh(
                new THREE.PlaneBufferGeometry(2000.0, 2000.0, 8.0, 8.0),
                new THREE.MeshBasicMaterial()
            {
                color = 0x000000, opacity = 0.25, transparent = true
            }
                );
            plane.visible = false;
            scene.add(plane);

            CreateRenderer();
            renderer.domElement.OnMouseMove = this.onDocumentMouseMove;
            renderer.domElement.OnMouseDown = this.onDocumentMouseDown;
            renderer.domElement.OnMouseUp   = this.onDocumentMouseUp;

            CreateTrackball();
        }
        /// <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();
                };
        }
Example #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)
        {
            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();
                }
            };
        }