{"id":13542431,"url":"https://github.com/create3000/x_ite","last_synced_at":"2025-04-04T20:05:09.676Z","repository":{"id":41113773,"uuid":"101772306","full_name":"create3000/x_ite","owner":"create3000","description":"X_ITE X3D Browser, view and manipulate X3D, VRML, glTF and other 3D sources in HTML.","archived":false,"fork":false,"pushed_at":"2025-03-30T16:01:42.000Z","size":2254701,"stargazers_count":73,"open_issues_count":8,"forks_count":15,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-30T16:26:47.796Z","etag":null,"topics":["3d","browser","electron","framework","glb","gltf2","javascript","json","node","parser","stl","svg","vrml","wavefront-obj","webgl","wrl","x3d","x3d-browser","x3dom","xml"],"latest_commit_sha":null,"homepage":"https://create3000.github.io/x_ite/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/create3000.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"X_ITE"}},"created_at":"2017-08-29T14:45:27.000Z","updated_at":"2025-03-30T16:01:45.000Z","dependencies_parsed_at":"2023-09-23T03:33:41.999Z","dependency_job_id":"ffbeab76-0c21-40fd-ace9-493be7ceb657","html_url":"https://github.com/create3000/x_ite","commit_stats":{"total_commits":11936,"total_committers":6,"mean_commits":"1989.3333333333333","dds":0.0749832439678284,"last_synced_commit":"8d0719715f4d5674b936d37a37aad7394052beb1"},"previous_names":[],"tags_count":288,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/create3000%2Fx_ite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/create3000%2Fx_ite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/create3000%2Fx_ite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/create3000%2Fx_ite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/create3000","download_url":"https://codeload.github.com/create3000/x_ite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242669,"owners_count":20907133,"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","browser","electron","framework","glb","gltf2","javascript","json","node","parser","stl","svg","vrml","wavefront-obj","webgl","wrl","x3d","x3d-browser","x3dom","xml"],"created_at":"2024-08-01T10:01:07.561Z","updated_at":"2025-04-04T20:05:09.668Z","avatar_url":"https://github.com/create3000.png","language":"JavaScript","readme":"# [X_ITE](https://create3000.github.io/x_ite/) X3D Browser\n\n[![npm Version](https://badgen.net/npm/v/x_ite)](https://www.npmjs.com/package/x_ite)\n[![Build Size](https://create3000.github.io/x_ite/assets/img/badges/compressed.svg)](https://create3000.github.io/x_ite/features/)\n[![jsDelivr Hits](https://badgen.net/jsdelivr/hits/npm/x_ite)](https://www.jsdelivr.com/package/npm/x_ite)\n[![npm Downloads](https://badgen.net/npm/dm/x_ite)](https://npmtrends.com/x_ite)\n[![DeepScan grade](https://deepscan.io/api/teams/23540/projects/26814/branches/855447/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=23540\u0026pid=26814\u0026bid=855447)\n\n## Introduction\n\nX_ITE is a comprehensive 3D library entirely written in JavaScript and uses WebGL for 3D rendering. Authors can publish X3D, VRML, glTF and [other 3D file formats](https://create3000.github.io/x_ite/#supported-file-formats) online within an HTML5 page with X_ITE that works with web browsers **without** prior plug-in installation. Since X3D is backwardly compatible, X_ITE can also be used as a VRML viewer.\n\n🚀 For more information and a live preview, please visit our [home page](https://create3000.github.io/x_ite/).\n\n## Funding\n\nX_ITE needs your support. If you become a [Patreon](https://patreon.com/X_ITE), we can improve X_ITE even better, or simply subscribe to receive the latest news.\n\n## Quick Links\n\n* [Getting Started](https://create3000.github.io/x_ite/)\n* [Supported Nodes](https://create3000.github.io/x_ite/supported-nodes)\n* [Accessing the External Browser](https://create3000.github.io/x_ite/accessing-the-external-browser)\n* [DOM Integration](https://create3000.github.io/x_ite/dom-integration)\n* [Custom Shaders](https://create3000.github.io/x_ite/custom-shaders)\n* [glTF Sample Viewer](https://create3000.github.io/x_ite/laboratory/gltf-sample-viewer/)\n\n## Using X_ITE with a CDN\n\nUsing a CDN improves website performance, reliability, and security by caching content closer to users, distributing traffic loads, and providing protection against attacks.\n\nIf you are going to use X_ITE in a production environment, you should use a fixed version of X_ITE. You can get a list of all available versions [here on npm](https://www.npmjs.com/package/x_ite?activeTab=versions).\n\n### jsDelivr CDN\n\njsDelivr is an open-source content delivery network (CDN) renowned for its no-cost access, swift performance, and reliable service.\n\n```html\n\u003cscript defer src=\"https://cdn.jsdelivr.net/npm/x_ite@11.4.2/dist/x_ite.min.js\"\u003e\u003c/script\u003e\n\u003c!-- or as ES module for use in scripts --\u003e\n\u003cscript type=\"module\"\u003e\nimport X3D from \"https://cdn.jsdelivr.net/npm/x_ite@11.4.2/dist/x_ite.min.mjs\";\n\u003c/script\u003e\n```\n\n\u003e**Info:** It is no longer necessary to include the CSS file.\n\n## Get it from NPM\n\nTo install, use the following command:\n\n```console\n$ npm install x_ite\n```\n\nMaybe you are curious now [how to use X_ITE with Electron](https://create3000.github.io/x_ite/how-to-use-x-ite-with-electron)?\n\nAlso try [x_ite-node](https://www.npmjs.com/package/x_ite-node), a pure Node.js version, without any dependencies on Electron or any browser. Suitable for just reading 3D files, analyzing, processing and generating X3D.\n\n```console\n$ npm install x_ite-node\n```\n\n## Usage\n\nThis script initializes an X3D canvas within an HTML page, configuring it to contain a scene, a camera and a geometric cube with default material properties. It then animates the rotation of the cube within the scene, ensuring that the camera captures the dynamic action.\n\n### Declarative Syntax\n\n```html\n\u003cscript defer src=\"https://cdn.jsdelivr.net/npm/x_ite@11.4.2/dist/x_ite.min.js\"\u003e\u003c/script\u003e\n\u003cx3d-canvas\u003e\n  \u003cX3D profile='Interchange' version='4.0'\u003e\n    \u003chead\u003e\n      \u003cunit category='angle' name='degree' conversionFactor='0.017453292519943295'\u003e\u003c/unit\u003e\n    \u003c/head\u003e\n    \u003cScene\u003e\n      \u003cViewpoint\n          description='Initial View'\n          position='2.869677 3.854335 8.769781'\n          orientation='-0.7765887 0.6177187 0.1238285 28.9476440862198'\u003e\u003c/Viewpoint\u003e\n      \u003cTransform DEF='Box'\n          rotation='0 1 0 0'\u003e\n        \u003cShape\u003e\n          \u003cAppearance\u003e\n            \u003cMaterial\u003e\u003c/Material\u003e\n          \u003c/Appearance\u003e\n          \u003cBox\u003e\u003c/Box\u003e\n        \u003c/Shape\u003e\n      \u003c/Transform\u003e\n      \u003cTimeSensor DEF='Timer'\n          cycleInterval='10'\n          loop='true'\u003e\u003c/TimeSensor\u003e\n      \u003cOrientationInterpolator DEF='Rotor'\n          key='0, 0.25, 0.5, 0.75, 1'\n          keyValue='0 1 0 0, 0 1 0 90, 0 1 0 180, 0 1 0 270, 0 1 0 0'\u003e\u003c/OrientationInterpolator\u003e\n      \u003cROUTE fromNode='Timer' fromField='fraction_changed' toNode='Rotor' toField='set_fraction'\u003e\u003c/ROUTE\u003e\n      \u003cROUTE fromNode='Rotor' fromField='value_changed' toNode='Box' toField='set_rotation'\u003e\u003c/ROUTE\u003e\n    \u003c/Scene\u003e\n  \u003c/X3D\u003e\n\u003c/x3d-canvas\u003e\n```\n\n### Pure JavaScript\n\nThe same scene can also be created using pure JavaScript:\n\n```html\n\u003cscript type=\"module\"\u003e\nimport X3D from \"https://cdn.jsdelivr.net/npm/x_ite@11.4.2/dist/x_ite.min.mjs\";\n\nconst\n   browser = X3D .getBrowser (),\n   scene   = await browser .createScene (browser .getProfile (\"Interchange\"), browser .getComponent (\"Interpolation\", 1));\n\n// Create Viewpoint:\n\nconst viewpointNode = scene .createNode (\"Viewpoint\");\n\nviewpointNode .set_bind    = true;\nviewpointNode .description = \"Initial View\";\nviewpointNode .position    = new X3D .SFVec3f (2.869677, 3.854335, 8.769781);\nviewpointNode .orientation = new X3D .SFRotation (-0.7765887, 0.6177187, 0.1238285, 0.5052317);\n\nscene .rootNodes .push (viewpointNode);\n\n// Create Box:\n\nconst\n   transformNode  = scene .createNode (\"Transform\"),\n   shapeNode      = scene .createNode (\"Shape\"),\n   appearanceNode = scene .createNode (\"Appearance\"),\n   materialNode   = scene .createNode (\"Material\"),\n   boxNode        = scene .createNode (\"Box\");\n\nappearanceNode .material = materialNode;\n\nshapeNode .appearance = appearanceNode;\nshapeNode .geometry   = boxNode;\n\ntransformNode .children .push (shapeNode);\n\nscene .rootNodes .push (transformNode);\n\n// Give the node a name if you like.\nscene .addNamedNode (\"Box\", transformNode);\n\n// Create animation:\n\nconst\n   timeSensorNode   = scene .createNode (\"TimeSensor\"),\n   interpolatorNode = scene .createNode (\"OrientationInterpolator\");\n\ntimeSensorNode .cycleInterval = 10;\ntimeSensorNode .loop          = true;\n\nfor (let i = 0; i \u003c 5; ++ i)\n{\n  interpolatorNode .key [i]      = i / 4;\n  interpolatorNode .keyValue [i] = new X3D .SFRotation (0, 1, 0, Math .PI / 2 * i);\n}\n\nscene .rootNodes .push (timeSensorNode, interpolatorNode);\n\n// Add routes:\n\nscene .addRoute (timeSensorNode,   \"fraction_changed\", interpolatorNode, \"set_fraction\");\nscene .addRoute (interpolatorNode, \"value_changed\",    transformNode,    \"set_rotation\");\n\n// Show scene.\n\nawait browser .replaceWorld (scene);\n\u003c/script\u003e\n\u003c!-- x3d-canvas element comes here: --\u003e\n\u003cx3d-canvas\u003e\u003c/x3d-canvas\u003e\n```\n\n## Contributing\n\nContributions are always welcome. There is no special form to do this. A good idea is to fork the X_ITE repository and create a separate branch from the `development` branch, make your changes and then make a pull request.\n\n## License\n\nX_ITE is free software: you can redistribute it and/or modify it under the terms of the [GNU General Public License version 3](LICENSE.md) only, as published by the Free Software Foundation.\n\n## See Also\n\n* [x_ite-node](https://www.npmjs.com/package/x_ite-node) — Pure Node.js version of X_ITE\n* [x3d-tidy](https://www.npmjs.com/package/x3d-tidy) — X3D converter, beautifier and minimizer\n* [x3d-image](https://www.npmjs.com/package/x3d-image) — render image files from X3D\n* [sunrize](https://www.npmjs.com/package/sunrize) — a multi-platform X3D editor\n","funding_links":["https://patreon.com/X_ITE"],"categories":["JavaScript","xml"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreate3000%2Fx_ite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreate3000%2Fx_ite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreate3000%2Fx_ite/lists"}