g3d - GitLite

KO | EN

gitlite — search

#dotnet #cpp #mcp #artificial-intelligence #postgresql #java #gpt #deep-learning #ai #claude-code

g3d

(★ 56)

Realtime WebGL rendering maps and big data visualizations based on MXFramework and Three.js.

파일 탐색기

ZIP 다운로드

- common.css
- zero.css
- index.png
- subway.png
- - .gitignore
  - .project
  - debug.js
  - framework-base.js
  - framework-core.js
  - javascript-extensions.js
  - mx.build
  - MXComponent.js
  - MXEvent.js
  - MXObject.js
  - README.md
.gitignore
.project
index.html
README.md

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

`color`

설명 보기 ▼

콘솔의 전경 및 배경 색상을 설정.
더 많은 정보: <https://learn.microsoft.com/windows-server/administration/windows-commands/color>.

color

콘솔 색상을 기본값으로 설정:

color /?

사용 가능한 색상 값 및 세부 정보 나열:

color {{foreground_code}}{{background_code}}

16진수 번호(`1-9,a-f`)를 사용하여 콘솔 전경 및 배경을 특정 색상으로 설정:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

https://www.youtube.com/watch?v=fFMc5P8F7SY

https://www.youtube.com/watch?v=9rUGYhHJJ6E

https://www.youtube.com/watch?v=PQuNo-mrLKU

https://www.youtube.com/watch?v=DNW6VwIxl4w

# MagicCube g3d Framework
MagicCube g3D Framework is a web GIS library for 3D visualization using WebGL technology. In this early version, it supports
* Designed for geo-based big data visualization
* Powered by [MagicCube MXFramework](https://github.com/MagicCube/mxframework-core)
* High-performance real-time 3D rendering and animations based on Three.js and WebGL
* [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
* Multi-layer supported
* Basic 2D/3D geometries and features supported
* GeoJSON supported
* Cache tile images using HTML5 LocalStorage
* Build-in ToolBar and Compass
* <b>Anaglyph Effect (Red/Blue 3D Glasses are needed)<b>

## [Live Demo](http://magiccube.github.io/g3d/)

![](https://raw.githubusercontent.com/MagicCube/g3d/master/screenshots/subway.png)

Open the [live demo page](http://magiccube.github.io/g3d/) with Chrome, Safari or any other Webkit-based modern browser.

<b>How to Use</b>
* Drag with left button to pan.
* Drag with right button to rotate.
* Scroll to zoom in and out.

<b>If you have a multi-finger touchable device, you can</b>
* Touch with one finger to pan.
* Touch with two fingers to rotate.
* Pinch with two fingers to zoom in and out.

<b>If you have a Red/Blue 3D Glasses</b>
* Click the glasses button of the toolbar on the left side to switch between 2D and 3D mode.

## Screenshots
![](https://raw.githubusercontent.com/MagicCube/g3d/master/screenshots/index.png)

## Dependencies
The 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).

## Usage
Create a new 3D map view with an OSM-based layer.
```javascript
$import("g3d.view.MapScene3DView");

var mapView = null;
mx.whenReady(function()
{
    // Create a new MapProvider using MapBox tiles.
    var mapProvider = new g3d.map.MapProvider({
        urlFormat: "http://{s}.tiles.mapbox.com/v3/nicki.uxdh1tt9/{z}/{x}/{y}.png32",
        tileSize: 256,    // Normally the tile size is always 256 in OSM and Google
    });
    
    
    // Create an instance of MapScene3DView
    mapView = new g3d.view.MapScene3DView({
        $element: $("#map"),
        mapProvider: mapProvider,
        centerLocation: [118.778845, 32.04386],
        zoom: 12,                // The same 'zoom level' rules as Google Map.
        statsVisible: true,      // Whether display the WebGL status bar.
        displayCompass: true,    // Whether the compass should be displayed.
        displayToolBar: true,    // Whether the tool bar should be displayed.
        onzooming: function(e)
        {
            console.log("Zooming from %d to %d.", e.zoomFrom, e.zoomTo);
        },
        onzoomed: function(e)
        {
            console.log("Zoom level is now set to %d.", e.zoomTo);
        }
    });

// Add a OSM-based tile layer.
    var tileLayer = new g3d.layer.TileLayer3D({
        useLocalStorage: true     // Use HTML5 Local Storage to cache the tiles.
    });
    mapView.addLayer(tileLayer);
    
    // Start animation, so the user can interactive with the map.
    mapView.startAnimation();
});
```

Now let's add a polygon mesh to display 'Zifeng Tower'.
Please refer to http://www.openstreetmap.org/way/140809508
```javascript
// Add a feature layer to diaplay buildings.
var buildingLayer = new g3d.layer.FeatureLayer3D();
mapView.addLayer(buildingLayer);

buildingLayer.addPolygon(
    [
        [ 118.7781014, 32.062422 ],
        [ 118.7777385, 32.0627166 ],
        [ 118.7777183, 32.0627721 ],
        [ 118.7779384, 32.0628862 ],
        [ 118.7782096, 32.0629544 ],
        [ 118.7782587, 32.0629002 ],
        [ 118.7782337, 32.0624534 ],
        [ 118.7781786, 32.0624179 ]
    ],
    200,   // Height of the polygon mesh in pixels.
    {
        color : 0xff0000,
        opacity : 0.8
    }     // Alternatively you can use any THREE.Material instead
);
```