{"action":"opened","issue":{"url":"https://api.github.com/repos/josdirksen/learning-threejs/issues/19","repository_url":"https://api.github.com/repos/josdirksen/learning-threejs","labels_url":"https://api.github.com/repos/josdirksen/learning-threejs/issues/19/labels{/name}","comments_url":"https://api.github.com/repos/josdirksen/learning-threejs/issues/19/comments","events_url":"https://api.github.com/repos/josdirksen/learning-threejs/issues/19/events","html_url":"https://github.com/josdirksen/learning-threejs/issues/19","id":132985405,"number":19,"title":"how to extrude multi path in one svg by d3,three.js,d3-threeD","user":{"login":"liyihongcug","id":10718533,"avatar_url":"https://avatars.githubusercontent.com/u/10718533?v=3","gravatar_id":"","url":"https://api.github.com/users/liyihongcug","html_url":"https://github.com/liyihongcug","followers_url":"https://api.github.com/users/liyihongcug/followers","following_url":"https://api.github.com/users/liyihongcug/following{/other_user}","gists_url":"https://api.github.com/users/liyihongcug/gists{/gist_id}","starred_url":"https://api.github.com/users/liyihongcug/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/liyihongcug/subscriptions","organizations_url":"https://api.github.com/users/liyihongcug/orgs","repos_url":"https://api.github.com/users/liyihongcug/repos","events_url":"https://api.github.com/users/liyihongcug/events{/privacy}","received_events_url":"https://api.github.com/users/liyihongcug/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-02-11T14:18:25Z","updated_at":"2016-02-11T14:18:25Z","closed_at":null,"body":"Error is Uncaught TypeError: Cannot read property 'amount' of undefined !!\r\nI update chapter-06\\05-extrude-svg.html. you can see below\r\n<svg version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"1152px\" height=\"1152px\" xml:space=\"preserve\">\r\n<g id=\"landmarks\">\r\n<path  id=\"batman-path\" style=\"fill:rgb(0,0,0);\" d=\"M 261.135 114.535 C 254.906 116.662 247.491 ,,,,,\"/>\r\n<path  id=\"batman-path2\" style=\"fill:rgb(0,0,0)\" d=\"M550.1 163.4 L576.5 170.5 L579.4 174.8 L606 169.6 L641.3 181.3 L669 220.2 L593.7 236.1 L584.9 222.6 L595.2 220.5 L586.2 206.7 L539.8 216.1 L524.8 239.1 L471.9 250.1 L461.4 231.3 L471.1 229.4 L464.8 218.1 L455.1 220.1 L435.6 185.1 Z\"/>\r\n</g>\r\n</svg>\r\n\r\nBut It can't run. I am boring so that I can't make progress in this week. I hope you can help me.\r\n\r\nAll code are below:\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Example 06.05 - Extrude SVG</title>\r\n    <script type=\"text/javascript\" src=\"../libs/three.js\"></script>\r\n    <script type=\"text/javascript\" src=\"../libs/stats.js\"></script>\r\n    <script type=\"text/javascript\" src=\"../libs/dat.gui.js\"></script>\r\n    <script type=\"text/javascript\" src=\"../libs/d3-threeD.js\"></script>\r\n    <script type=\"text/javascript\" src=\"../libs/OrbitControls.js\"></script>\r\n    <style>\r\n        body {\r\n            margin: 0;\r\n            overflow: hidden;\r\n        }\r\n    </style>\r\n</head>\r\n<body>\r\n<div id=\"Stats-output\">\r\n</div>\r\n<!-- Div which will hold the Output -->\r\n<div id=\"WebGL-output\">\r\n</div>\r\n<div id=\"batman\" style=\"display:none\">\r\n    <svg version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"1152px\" height=\"1152px\" xml:space=\"preserve\">\r\n<g id=\"landmarks\">\r\n<path  id=\"batman-path\" style=\"fill:rgb(0,0,0);\" d=\"M ....... \"/>\r\n<path  id=\"batman-path2\" style=\"fill:rgb(0,0,0)\" d=\"M550.1 163.4 L576.5 170.5 L579.4 174.8 L606 169.6 L641.3 181.3 L669 220.2 L593.7 236.1 L584.9 222.6 L595.2 220.5 L586.2 206.7 L539.8 216.1 L524.8 239.1 L471.9 250.1 L461.4 231.3 L471.1 229.4 L464.8 218.1 L455.1 220.1 L435.6 185.1 Z\"/>\r\n</g>\r\n</svg>\r\n</div>\r\n<script type=\"text/javascript\">\r\n    var orbit;\r\n    function init() {\r\n        var stats = initStats();\r\n        var scene = new THREE.Scene();\r\n        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);\r\n        var webGLRenderer = new THREE.WebGLRenderer();\r\n        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));\r\n        webGLRenderer.setSize(window.innerWidth, window.innerHeight);\r\n        webGLRenderer.shadowMapEnabled = true;\r\n        var shapearr=[];\r\n        var shape, svgString;\r\n        var paths=document.querySelectorAll(\"svg g[id^='landmarks'] > path[id]\")\r\n        for(var i = 0; i < paths.length; i++) {\r\n            var path = paths[i];\r\n            svgString=path.getAttribute('d');\r\n            console.log(svgString);\r\n            //shape = transformSVGPathExposed(svgString);\r\n            shape=createMesh(new THREE.ShapeGeometry(drawShape2(svgString)));\r\n            scene.add(shape);\r\n            shapearr.push(shape);\r\n        }\r\n     //   console.log(\"sdfsdf :\"+document.querySelector(\"#batman-path\").getAttribute(\"d\"));\r\n      /*  var shape = createMesh(new THREE.ShapeGeometry(drawShape()));\r\n        // add the sphere to the scene\r\n        scene.add(shape);*/\r\n\r\n        // position and point the camera to the center of the scene\r\n        camera.position.x = -80;\r\n        camera.position.y = 80;\r\n        camera.position.z = 80;\r\n        camera.lookAt(new THREE.Vector3(60, -60, 0));\r\n\r\n        var spotLight = new THREE.DirectionalLight(0xffffff);\r\n        spotLight.position = new THREE.Vector3(70, 170, 70);\r\n        spotLight.intensity = 0.7;\r\n\r\n        spotLight.target = shape;\r\n\r\n        scene.add(spotLight);\r\n\r\n        // add the output of the renderer to the html element\r\n        document.getElementById(\"WebGL-output\").appendChild(webGLRenderer.domElement);\r\n\r\n        orbit = new THREE.OrbitControls(camera, webGLRenderer.domElement);\r\n\r\n        // call the render function\r\n        var step = 0;\r\n\r\n\r\n        // setup the control gui\r\n        var controls = new function () {\r\n\r\n            this.amount =6; //2;\r\n            this.bevelThickness = 2;\r\n            this.bevelSize = 0.5;\r\n            this.bevelEnabled = true;\r\n            this.bevelSegments = 3;\r\n            this.bevelEnabled = true;\r\n            this.curveSegments = 12;\r\n            this.steps = 1;\r\n\r\n            this.asGeom = function () {\r\n                // remove the old plane\r\n                scene.remove(shape);\r\n                // create a new one\r\n\r\n                var options = {\r\n                    amount: controls.amount,\r\n                    bevelThickness: controls.bevelThickness,\r\n                    bevelSize: controls.bevelSize,\r\n                    bevelSegments: controls.bevelSegments,\r\n                    bevelEnabled: controls.bevelEnabled,\r\n                    curveSegments: controls.curveSegments,\r\n                    steps: controls.steps\r\n                };\r\n\r\n               /* shape = createMesh(new THREE.ExtrudeGeometry(drawShape(), options));\r\n                // add it to the scene.\r\n                scene.add(shape);*/\r\n\r\n                var paths=document.querySelectorAll(\"svg g[id^='landmarks'] > path[id]\")\r\n                console.log(shapearr);\r\n                for(var i = 0; i < paths.length; i++) {\r\n                    var path = paths[i];\r\n                    svgString=path.getAttribute('d');\r\n                    console.log(svgString);\r\n                   // shape = transformSVGPathExposed(svgString);\r\n                    shape=createMesh(new THREE.ExtrudeGeometry(drawShape2(svgString)),options);\r\n                    scene.add(shape);\r\n                }\r\n            };\r\n\r\n        };\r\n\r\n        var gui = new dat.GUI();\r\n        gui.add(controls, 'amount', 0, 20).onChange(controls.asGeom);\r\n        gui.add(controls, 'bevelThickness', 0, 10).onChange(controls.asGeom);\r\n        gui.add(controls, 'bevelSize', 0, 10).onChange(controls.asGeom);\r\n        gui.add(controls, 'bevelSegments', 0, 30).step(1).onChange(controls.asGeom);\r\n        gui.add(controls, 'bevelEnabled').onChange(controls.asGeom);\r\n        gui.add(controls, 'curveSegments', 1, 30).step(1).onChange(controls.asGeom);\r\n        gui.add(controls, 'steps', 1, 5).step(1).onChange(controls.asGeom);\r\n\r\n        controls.asGeom();\r\n        render();\r\n\r\n     /*   function drawShape() {\r\n            var svgString = document.querySelector(\"#batman-path\").getAttribute(\"d\");\r\n            var shape = transformSVGPathExposed(svgString);\r\n            return shape;\r\n        }*/\r\n        function drawShape2(svgString) {\r\n            //var svgString = document.querySelector(\"#batman-path\").getAttribute(\"d\");\r\n             shape = transformSVGPathExposed(svgString);\r\n            return shape;\r\n        }\r\n        function createMesh(geom) {\r\n            geom.applyMatrix(new THREE.Matrix4().makeTranslation(-390, -74, 0));\r\n            var meshMaterial = new THREE.MeshPhongMaterial({color: 0x333333, shininess: 100, metal: true});\r\n            var mesh = new THREE.Mesh(geom, meshMaterial);\r\n            mesh.scale.x = 0.1;\r\n            mesh.scale.y = 0.1;\r\n\r\n            mesh.rotation.z = Math.PI;\r\n            mesh.rotation.x = -1.1;\r\n            return mesh;\r\n        }\r\n        function render() {\r\n            stats.update();\r\n           //shape.rotation.y = step += 0.005;\r\n           // orbit.update();\r\n            // render using requestAnimationFrame\r\n            requestAnimationFrame(render);\r\n            webGLRenderer.render(scene, camera);\r\n        }\r\n        function initStats() {\r\n            var stats = new Stats();\r\n            stats.setMode(0); // 0: fps, 1: ms\r\n            // Align top-left\r\n            stats.domElement.style.position = 'absolute';\r\n            stats.domElement.style.left = '0px';\r\n            stats.domElement.style.top = '0px';\r\n            document.getElementById(\"Stats-output\").appendChild(stats.domElement);\r\n            return stats;\r\n        }\r\n    }\r\n    window.onload = init;\r\n</script>\r\n</body>\r\n</html>"}}