{"id":21574484,"url":"https://github.com/magiccube/g3d","last_synced_at":"2025-04-10T16:12:15.880Z","repository":{"id":148258794,"uuid":"20874260","full_name":"MagicCube/g3d","owner":"MagicCube","description":"Realtime WebGL rendering maps and big data visualizations based on MXFramework and Three.js.","archived":false,"fork":false,"pushed_at":"2017-06-02T08:50:17.000Z","size":4202,"stargazers_count":55,"open_issues_count":2,"forks_count":28,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T14:01:41.857Z","etag":null,"topics":["3d-gis","blue-3d-glasses","gis","threejs","webgl"],"latest_commit_sha":null,"homepage":"http://magiccube.github.io/g3d/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MagicCube.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2014-06-16T05:55:16.000Z","updated_at":"2024-04-15T14:21:52.000Z","dependencies_parsed_at":"2023-05-29T13:46:56.695Z","dependency_job_id":null,"html_url":"https://github.com/MagicCube/g3d","commit_stats":{"total_commits":55,"total_committers":1,"mean_commits":55.0,"dds":0.0,"last_synced_commit":"f0e26e25f28b0bf7095643a077a5d20b5fe867f8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fg3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fg3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fg3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fg3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MagicCube","download_url":"https://codeload.github.com/MagicCube/g3d/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248251093,"owners_count":21072685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-gis","blue-3d-glasses","gis","threejs","webgl"],"created_at":"2024-11-24T12:10:00.286Z","updated_at":"2025-04-10T16:12:15.861Z","avatar_url":"https://github.com/MagicCube.png","language":"JavaScript","readme":"# VIDEO DEMOS\nhttps://www.youtube.com/watch?v=fFMc5P8F7SY\n\nhttps://www.youtube.com/watch?v=9rUGYhHJJ6E\n\nhttps://www.youtube.com/watch?v=PQuNo-mrLKU\n\nhttps://www.youtube.com/watch?v=DNW6VwIxl4w\n\n# MagicCube g3d Framework\nMagicCube g3D Framework is a web GIS library for 3D visualization using WebGL technology. In this early version, it supports\n* Designed for geo-based big data visualization\n* Powered by [MagicCube MXFramework](https://github.com/MagicCube/mxframework-core)\n* High-performance real-time 3D rendering and animations based on Three.js and WebGL\n* [Open Street Map](http://www.openstreetmap.org/) / [MapBox](http://www.mapbox.com) / [Google Map](https://maps.google.com/) / [Nokia HERE Map](http://here.com/) / [Baidu Map](http://map.baidu.com/) / [AutoNavi](http://www.autonavi.com/) supported\n* Multi-layer supported\n* Basic 2D/3D geometries and features supported\n* GeoJSON supported\n* Cache tile images using HTML5 LocalStorage\n* Build-in ToolBar and Compass\n* \u003cb\u003eAnaglyph Effect (Red/Blue 3D Glasses are needed)\u003cb\u003e\n\n## [Live Demo](http://magiccube.github.io/g3d/)\n\n![](https://raw.githubusercontent.com/MagicCube/g3d/master/screenshots/subway.png)\n\nOpen the [live demo page](http://magiccube.github.io/g3d/) with Chrome, Safari or any other Webkit-based modern browser.\n\n\u003cb\u003eHow to Use\u003c/b\u003e\n* Drag with left button to pan.\n* Drag with right button to rotate.\n* Scroll to zoom in and out.\n\n\u003cb\u003eIf you have a multi-finger touchable device, you can\u003c/b\u003e\n* Touch with one finger to pan.\n* Touch with two fingers to rotate.\n* Pinch with two fingers to zoom in and out.\n\n\u003cb\u003eIf you have a Red/Blue 3D Glasses\u003c/b\u003e\n* Click the glasses button of the toolbar on the left side to switch between 2D and 3D mode.\n\n## Screenshots\n![](https://raw.githubusercontent.com/MagicCube/g3d/master/screenshots/index.png)\n\n## Dependencies\nThe g3d Framework is built on top of [MagicCube MXFramework](https://github.com/MagicCube/mxframework-core), [Three.js](threejs.org/), [Tween.js](https://github.com/sole/tween.js), [jQuery](http://jquery.com) and [jquery.transit](https://github.com/rstacruz/jquery.transit).\n\n## Usage\nCreate a new 3D map view with an OSM-based layer.\n```javascript\n$import(\"g3d.view.MapScene3DView\");\n\nvar mapView = null;\nmx.whenReady(function()\n{\n    // Create a new MapProvider using MapBox tiles.\n    var mapProvider = new g3d.map.MapProvider({\n        urlFormat: \"http://{s}.tiles.mapbox.com/v3/nicki.uxdh1tt9/{z}/{x}/{y}.png32\",\n        tileSize: 256,    // Normally the tile size is always 256 in OSM and Google\n    });\n    \n    \n    // Create an instance of MapScene3DView\n    mapView = new g3d.view.MapScene3DView({\n        $element: $(\"#map\"),\n        mapProvider: mapProvider,\n        centerLocation: [118.778845, 32.04386],\n        zoom: 12,                // The same 'zoom level' rules as Google Map.\n        statsVisible: true,      // Whether display the WebGL status bar.\n        displayCompass: true,    // Whether the compass should be displayed.\n        displayToolBar: true,    // Whether the tool bar should be displayed.\n        onzooming: function(e)\n        {\n            console.log(\"Zooming from %d to %d.\", e.zoomFrom, e.zoomTo);\n        },\n        onzoomed: function(e)\n        {\n            console.log(\"Zoom level is now set to %d.\", e.zoomTo);\n        }\n    });\n\n    // Add a OSM-based tile layer.\n    var tileLayer = new g3d.layer.TileLayer3D({\n        useLocalStorage: true     // Use HTML5 Local Storage to cache the tiles.\n    });\n    mapView.addLayer(tileLayer);\n    \n    // Start animation, so the user can interactive with the map.\n    mapView.startAnimation();\n});\n```\n\n\nNow let's add a polygon mesh to display 'Zifeng Tower'.\nPlease refer to http://www.openstreetmap.org/way/140809508\n```javascript\n// Add a feature layer to diaplay buildings.\nvar buildingLayer = new g3d.layer.FeatureLayer3D();\nmapView.addLayer(buildingLayer);\n\nbuildingLayer.addPolygon(\n    [\n        [ 118.7781014, 32.062422 ],\n        [ 118.7777385, 32.0627166 ],\n        [ 118.7777183, 32.0627721 ],\n        [ 118.7779384, 32.0628862 ],\n        [ 118.7782096, 32.0629544 ],\n        [ 118.7782587, 32.0629002 ],\n        [ 118.7782337, 32.0624534 ],\n        [ 118.7781786, 32.0624179 ]\n    ],\n    200,   // Height of the polygon mesh in pixels.\n    {\n        color : 0xff0000,\n        opacity : 0.8\n    }     // Alternatively you can use any THREE.Material instead\n);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagiccube%2Fg3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagiccube%2Fg3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagiccube%2Fg3d/lists"}