{"id":16181295,"url":"https://github.com/kaosat-dev/polymer-threejs","last_synced_at":"2026-03-07T00:31:06.491Z","repository":{"id":9987561,"uuid":"12017454","full_name":"kaosat-dev/polymer-threejs","owner":"kaosat-dev","description":"Experimental Three.js elements  using the Polymer framework + three.js","archived":false,"fork":false,"pushed_at":"2013-11-15T13:36:44.000Z","size":2972,"stargazers_count":26,"open_issues_count":2,"forks_count":5,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-02T21:11:11.489Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaosat-dev.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":"2013-08-10T07:40:31.000Z","updated_at":"2024-10-08T10:18:53.000Z","dependencies_parsed_at":"2022-09-15T13:02:07.688Z","dependency_job_id":null,"html_url":"https://github.com/kaosat-dev/polymer-threejs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kaosat-dev/polymer-threejs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaosat-dev%2Fpolymer-threejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaosat-dev%2Fpolymer-threejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaosat-dev%2Fpolymer-threejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaosat-dev%2Fpolymer-threejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaosat-dev","download_url":"https://codeload.github.com/kaosat-dev/polymer-threejs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaosat-dev%2Fpolymer-threejs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30204154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"ssl_error","status_checked_at":"2026-03-06T18:57:34.882Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-10-10T06:24:30.930Z","updated_at":"2026-03-07T00:31:06.470Z","avatar_url":"https://github.com/kaosat-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"polymer-threejs\n===============\n\nExperimental custom elements using the  [Polymer framework](http://www.polymer-project.org/ \"Polymer framework\") and the [Three.js](http://threejs.org/ \"Three.js\") framework.\n\nAll custom elements are in the elements folder (seperated by folder)\nthree-viewer (the main element) depends on/ makes use of both three-controls and three-stats\na more simple, independant three-viewer will be added down the line.\n\nNotes\n=====\n- very early stages, highly experimental so not bugs are very likely :)\n- api is neither complete nor as practical as I would like it to be \n- uses a custom \"wrapped\" (generated with [Browserify](http://browserify.org/ \"Browserify\") version of Three.js, as the standard build does not get imported correctly from within elements.\n- the view comes pre packaged with the three.js OrbitControls \u0026 CombinedCamera : these are both custom versions, with \"z-up\" instead of\nthe standard \"y-up\", since this was originally intended to be used for 3d modeling for 3d printing (that uses z-up)\n\nusage\n=====\n- as stated above, elements are in the \"elements\" folder\n- you will however need a web server to run polymer.js elements locally : you can install a node-js simple http server for this project\nby typing npm install and then npm start (once you have node.js and npm of course!)\n\n\nexamples\n========\n\n\n\n\nInclude the elements (three-elements itself links to all other elements, for convenience): \n\n\n```html\n    \u003clink rel=\"import\" href=\"elements/three-elements.html\"\u003e\n```\n\n- Create a Three.js view default settings \n   \n\n```html  \n    \u003cthree-viewer\u003e\u003c/three-viewer\u003e\n```\n\nThis resuls in :\n\n![Alt text](https://github.com/kaosat-dev/polymer-threejs/raw/master/polymer-three.js-ex0.png)\n\nCreate a Three.js view 320*200, with a fov of 50 shadows enabled\n   \n\n```html  \n    \u003cthree-viewer  width=320 height=200 viewAngle=50 showControls showShadows \u003e\u003c/three-viewer\u003e\n```\n\nThis resuls in :\n\n![Alt text](https://github.com/kaosat-dev/polymer-threejs/raw/master/polymer-three.js-ex1.png)\n\n\n- Create a Three.js view 640*480, with a fov of 50, autorotating camera, with onscreen controls, grid, axes, and shadows enabled,\nand a greenish background\n\n```html\n    \u003cthree-viewer  width=640 height=480 viewAngle=50 bg=\"#c0ff00\" autoRotate showControls showShadows showGrid showAxes\u003e\u003c/three-viewer\u003e\n```\n\nThis resuls in :\n\n![Alt text](https://github.com/kaosat-dev/polymer-threejs/raw/master/polymer-three.js-ex2.png)\n \n\n- you can also create multiple views (all independant, but still  a bit buggy sometimes):\n\n```html\n    \u003cthree-viewer style=\"right:180px;top:300px;\"\u003e\u003c/three-viewer\u003e\n    \u003cthree-viewer  viewAngle=\"25\" width=640 height=480  autoRotate showControls showShadows id=\"viewer1\"\u003e\u003c/three-viewer\u003e\n    \u003cthree-viewer bg=\"#c0ff00\" viewAngle=\"45\" width=320 height=240  showControls showShadows=false style=\"left:680px;top:500px;border: 1px solid blue;\"\u003e\u003c/three-viewer\u003e\n```\n\n\nThis resuls in :\n\n![Alt text](https://github.com/kaosat-dev/polymer-threejs/raw/master/polymer-three.js-ex3.png)\n\n\n- editing the scene/add objects to the view \nPolymer components are loaded in an asynch maner (there is callback for that ! as they say :)\nSo to add a cube to a viewer you could do :\n\n```javascript\nwindow.addEventListener('WebComponentsReady', function() {\n\t    document.body.style.opacity = 1; // show body now that registration is done.\n\t    var threeViewer = document.querySelector('three-viewer');\n\t    console.log(\"components loaded\",threeViewer);\n\t      \n\t\tvar cubeGeometry = new THREE.CubeGeometry( 30, 30, 30 ); \n\t\tvar material = new THREE.MeshLambertMaterial( {color: 0x0088ff} ); \n\t\tvar cube = new THREE.Mesh(cubeGeometry, material);\n\t\tcube.position.set(-25, 25, -35); \n\t\t\t\n\t\tcube.castShadow =  true\n\t    cube.receiveShadow = true\n\t    \n\t    //here we add the cube to the scene via the addToScene method\n\t\tthreeViewer.addToScene(cube);\n```\n\nLive Demo\n=========\nhttp://kaosat-dev.github.io/polymer-threejs/demo\n\n\nLicence\n=======\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaosat-dev%2Fpolymer-threejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaosat-dev%2Fpolymer-threejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaosat-dev%2Fpolymer-threejs/lists"}