{"action":"created","issue":{"url":"https://api.github.com/repos/vasturiano/react-force-graph/issues/38","repository_url":"https://api.github.com/repos/vasturiano/react-force-graph","labels_url":"https://api.github.com/repos/vasturiano/react-force-graph/issues/38/labels{/name}","comments_url":"https://api.github.com/repos/vasturiano/react-force-graph/issues/38/comments","events_url":"https://api.github.com/repos/vasturiano/react-force-graph/issues/38/events","html_url":"https://github.com/vasturiano/react-force-graph/issues/38","id":357417862,"node_id":"MDU6SXNzdWUzNTc0MTc4NjI=","number":38,"title":"How to represent irregular polygon as sprite?","user":{"login":"wadehenning","id":10761087,"node_id":"MDQ6VXNlcjEwNzYxMDg3","avatar_url":"https://avatars3.githubusercontent.com/u/10761087?v=4","gravatar_id":"","url":"https://api.github.com/users/wadehenning","html_url":"https://github.com/wadehenning","followers_url":"https://api.github.com/users/wadehenning/followers","following_url":"https://api.github.com/users/wadehenning/following{/other_user}","gists_url":"https://api.github.com/users/wadehenning/gists{/gist_id}","starred_url":"https://api.github.com/users/wadehenning/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wadehenning/subscriptions","organizations_url":"https://api.github.com/users/wadehenning/orgs","repos_url":"https://api.github.com/users/wadehenning/repos","events_url":"https://api.github.com/users/wadehenning/events{/privacy}","received_events_url":"https://api.github.com/users/wadehenning/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-09-05T21:51:38Z","updated_at":"2018-09-27T21:37:44Z","closed_at":null,"author_association":"NONE","body":"Thank you for this beautiful repo.  How do I replace the 3D Text nodes with irregular shapes?  For example, my shapes might look something California in this example.\r\nhttps://threejs.org/examples/#webgl_geometry_shapes"},"comment":{"url":"https://api.github.com/repos/vasturiano/react-force-graph/issues/comments/425251300","html_url":"https://github.com/vasturiano/react-force-graph/issues/38#issuecomment-425251300","issue_url":"https://api.github.com/repos/vasturiano/react-force-graph/issues/38","id":425251300,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNTI1MTMwMA==","user":{"login":"wadehenning","id":10761087,"node_id":"MDQ6VXNlcjEwNzYxMDg3","avatar_url":"https://avatars3.githubusercontent.com/u/10761087?v=4","gravatar_id":"","url":"https://api.github.com/users/wadehenning","html_url":"https://github.com/wadehenning","followers_url":"https://api.github.com/users/wadehenning/followers","following_url":"https://api.github.com/users/wadehenning/following{/other_user}","gists_url":"https://api.github.com/users/wadehenning/gists{/gist_id}","starred_url":"https://api.github.com/users/wadehenning/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wadehenning/subscriptions","organizations_url":"https://api.github.com/users/wadehenning/orgs","repos_url":"https://api.github.com/users/wadehenning/repos","events_url":"https://api.github.com/users/wadehenning/events{/privacy}","received_events_url":"https://api.github.com/users/wadehenning/received_events","type":"User","site_admin":false},"created_at":"2018-09-27T21:37:44Z","updated_at":"2018-09-27T21:37:44Z","author_association":"NONE","body":"I have been able to get all of your examples working, and I have been able to add custom shapes. But I am still having trouble with custom sprites of shapes.  My sprite code seems to generate sprites, but I get an error message:\r\nUncaught TypeError: Cannot read property 'x' of undefined\r\n    at WebGLSpriteRenderer.render (aframe-master.js:12357)\r\n    at WebGLRenderer.render (aframe-master.js:27568)\r\n    at Function.tick (three-render-objects.module.js:100)\r\n    at Function.r.(:3000/anonymous function) [as tick] (http://localhost:3000/static/js/bundle.js:161238:1813)\r\n    at animate (3d-force-graph.module.js:391)\r\n\r\n\r\nI hope that my code is close enough for your review.\r\n\r\nFirst I have a simple React Component, followed by short code to make my sprite.\r\n\r\n\r\nexport default class SpriteCurves extends React.Component {\r\n        render() {          \r\n          const {data, shape, geometry} = this.props;         \r\n          return <ForceGraph3D           \r\n            graphData={data}\r\n            nodeAutoColorBy=\"group\"\r\n            nodeThreeObject={() => {\r\n               const sprite = generatesprite(shape);\r\n               return sprite;              \r\n              }}           \r\n          />;\r\n        }\r\n  }\r\n\r\nSPRITE CODE:\r\nfunction generateTexture(shape) {\r\n    var canvas = document.createElement( 'canvas' );\r\n    canvas.width = 20;\r\n    canvas.height = 20;\r\n    var context = canvas.getContext( '2d' );    \r\n    var canvasShape = shape;     \r\n    return canvas;\r\n};\r\n\r\nexport function generatesprite(shape){  \r\n    var texture = new THREE.Texture( generateTexture(shape) );\r\n    texture.needsUpdate = true; // important!\r\n    var material = new THREE.SpriteMaterial( { map: texture, color: 0xffffff } );\r\n    material.sizeAttenuation = false;\r\n    var sprite = new THREE.Sprite( material );\r\n    console.log(sprite);\r\n    return sprite;\r\n};\r\n"}}
{"actor":{"display_login":"wadehenning"}}