{"id":14981181,"url":"https://github.com/wolfwind521/indoor3d","last_synced_at":"2025-10-26T15:07:35.890Z","repository":{"id":25239838,"uuid":"28664529","full_name":"wolfwind521/indoor3D","owner":"wolfwind521","description":"a js lib based on three.js to show 3D indoor map","archived":false,"fork":false,"pushed_at":"2017-09-07T15:40:32.000Z","size":857,"stargazers_count":709,"open_issues_count":8,"forks_count":241,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-04-04T20:09:35.888Z","etag":null,"topics":["3d-map","canvas","indoormap","javascript","threejs","webgl"],"latest_commit_sha":null,"homepage":"  http://wolfwind521.github.io  ","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wolfwind521.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-31T11:32:35.000Z","updated_at":"2025-03-31T03:59:04.000Z","dependencies_parsed_at":"2022-09-19T05:52:19.235Z","dependency_job_id":null,"html_url":"https://github.com/wolfwind521/indoor3D","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfwind521%2Findoor3D","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfwind521%2Findoor3D/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfwind521%2Findoor3D/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfwind521%2Findoor3D/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wolfwind521","download_url":"https://codeload.github.com/wolfwind521/indoor3D/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242678,"owners_count":20907134,"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-map","canvas","indoormap","javascript","threejs","webgl"],"created_at":"2024-09-24T14:03:05.490Z","updated_at":"2025-10-26T15:07:30.833Z","avatar_url":"https://github.com/wolfwind521.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"indoor3D\n====\n\nThis is a javascript lib based on three.js to show an indoor map.\n\n**This was an experimental project when I was learning javascript and webgl, and I haven't updated it since then.**\n**Thanks for the followers and feedbacks, I decide to update it again.**\n\n**A GUI map eidtor written by QT is under development. And I'm working on supporting the popular GeoJson format**\n\n# Demo #\n2D Map Demo Page: http://wolfwind521.github.io/2dmap\n\n3D Map Demo Page: http://wolfwind521.github.io\n\n# Usage #\na simplest example: \n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cscript src=\"js/three.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/Detector.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/OrbitControls.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/IndoorMap.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/Projector.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/IndoorMap2d.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/IndoorMap3d.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    var map = new IndoorMap();\n    map.load('data/testMapData.json').showFloor(1);\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\na little more complex example：\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cscript src=\"js/three.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/Detector.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/OrbitControls.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/Projector.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/IndoorMap.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/IndoorMap2d.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/IndoorMap3d.js\"\u003e\u003c/script\u003e\n\u003clink href=\"css/indoor3D.css\" rel=\"stylesheet\"\u003e\n\n\u003cdiv id=\"indoor3d\" style=\"width: 800px; height: 500px\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    var params = {\n        mapDiv:\"indoor3d\",\n        dim:\"3d\"\n    }\n    var map = IndoorMap(params);\n    map.load('data/testMapData.json', function(){\n        map.showAllFloors().showAreaNames(true).setSelectable(true);\n        var ul = IndoorMap.getUI(map);\n        document.body.appendChild(ul);\n    });\n\u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\nThe explanation is as follows:\n1) include the required js files\n```html\n\u003cscript src=\"js/three.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/Detector.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/OrbitControls.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/Projector.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/IndoorMap.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/IndoorMap2d.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/IndoorMap3d.js\"\u003e\u003c/script\u003e\n\u003clink href=\"css/indoor3D.css\" rel=\"stylesheet\"\u003e\n```\n  - [three.min.js](http://threejs.org/): a 3D javascript library\n  - Detector: detects whether the browser support the webgl. if it does not, threejs switches to a normal canvas renderer.\n  - OrbitControls: handles the user interactions to zoom, pan and pivot. (Only used in 3D version)\n  - Projector: user selection detection used by threejs. (Only used in 3D version)\n\n2) set up the parameters of the indoor map and pass it to the creator\n```js\nvar params={mapDiv:\"indoor3d\",dim:\"3d\"};\nvar indoorMap = IndoorMap(params);\n```\noptional parameters:\\\n@mapDiv: if you have create your own ``` \u003cdiv\u003e ``` as a map container, you can specify its id here, otherwise it will create a full screen map.\\\n@dim: \"2d\" or \"3d\". \"3d\" as default value. But the final result depends on your device. If it doesn't support WebGL, it will show a 2d map even if u set \"3d\".\n\n\nSo if there is no params passed to IndoorMap, it will create a fullscreen 3D map by default:\n```js\nvar indoorMap = IndoorMap();\n```\n\n3) load the map data, and set up its styles.\n```js\nindoorMap.load('data/testMapData.json', function(){\n        map.setTheme(myTheme).showAllFloors().showAreaNames(true).setSelectable(true);\n        var ul = IndoorMap.getUI(indoorMap);\n        document.body.appendChild(ul);\n    });\n```\nthe second parameter of the load() function is a callback function when the data is successfully loaded.\nYou can customize the style and interaction of your indoor map in it. You may call the functions separately:\n```js\nmap.setTheme(myTheme);\nmap.showAllFloors();\nmap.showAreaNames(true);\nmap.setSelectable(true);\n```\nor in a chain for convenience:\n\n```js\nmap.setTheme(myTheme).showAllFloors().showAreaNames(true).setSelectable(true);\n```\nThe UI is the buttons for switching floors. Its style is defined in the css file. so you can customize it by yourself.\n\n# User Reference #\nThere are Three main classes:\\\n  -IndoorMap\\\n  -IndoorMap2d\\\n  -IndoorMap3d\n\n\n## IndoorMap2d ##\n### methods: ###\n**.load(fileName, callback)**\n\nloads a file. \nWhen it finishes loading, the callback functon is called.\nSince the ui can only be constructed after the data is fully loaded, so the `getUI()` function must be called in the callback.\n\nif the file is already loaded by other modules, you should use the `.parse(jsonData)` method instead\n\n**.parse(jsonData)**\n\nparse the json Data.\nif the jsonData is loaded by other modules, you can just use this function to pass it to the indoor map\n\n**.setDefaultView()**\n\nreset the camera to default view (Default perspective view for a 3d map and default top view for a 2d map)\n\n**.setTopView()**\n\nset the camera to the top view. this function is only valid in the 3d map.\n\n**.zoomIn(zoomScale)**\n\nzoom in. zoom Scale is not necessary. so you can just call .zoomIn()\n\n**.zoomOut(zoomScale)**\n\nzoom out. Same as the zoomIn() function, zoom Scale is not necessary.\n\n**.adjustCamera**\n\nResets the camera to its default settings. This function is called when switching floors\n\n**.setSelectable(selectable)**\n\nselectable- a boolean parameter to specify whether the rooms are selectable\n\n**.showLabels(showLabels)**\n\nshowLabels- a boolean parameter to specify whether to show the labels.\nThe labels are the icons and texts in the map.\n\n**.getUI()**\n\nreturns a `\u003cul\u003e` tag with all the floor id. The user can switch the floor by clicking the `\u003cli\u003e`\nYou can insert the `\u003cul\u003e` to anywhere in the html.\nMake sure to call this method only after the map is loaded.\n\n**.setSelectionListener(callback)**\n\nset the call back function when a shop is selected.\n\nthe shop id is passed as the parameter of callback. and -1 for nothing is selected.\n\n**.getSelectedId()**\n\nget the selected shop's id\n\n**.selectById(id)**\n\nselect the shop by its id\n\n**.showFloor(id)**\n\n`id`-the floor id\nshows the floor by id. Notice this does not handle the labels.\n\n**.showAllFloors()**\n\nshows all the floors together. Notice this does not handle the labels.\n\n\n## Mall: ##\n### Properties ###\n**.floors**\n\nThis is an array with all the floors of `[THREE.Object3D]`(http://threejs.org/docs/#Reference/Core/Object3D) type.\n\n### Methods: ###\n**.getCurFloorId()**\n\ngets the `id` of the current floor.\nNotice: the `id` is a  signed integers. -1 means Floor B1, and 1 means Floor F1. 0 is preserved for showing all the floors.\n\n\n**.getFloor(id)**\n\n`id`-the floor id\ngets the floor of `[THREE.Object3D]`(http://threejs.org/docs/#Reference/Core/Object3D) type by its `id`.\n\n**.getCurFloor()**\n\ngets the current floor of `[THREE.Object3D]`(http://threejs.org/docs/#Reference/Core/Object3D) type.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolfwind521%2Findoor3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwolfwind521%2Findoor3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolfwind521%2Findoor3d/lists"}