Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to extrude multi path in one svg by d3,three.js,d3-threeD #19

Open
liyihongcug opened this issue Feb 11, 2016 · 3 comments
Open

how to extrude multi path in one svg by d3,three.js,d3-threeD #19

liyihongcug opened this issue Feb 11, 2016 · 3 comments

Comments

@liyihongcug
Copy link

Error is Uncaught TypeError: Cannot read property 'amount' of undefined !!
I update chapter-06\05-extrude-svg.html. you can see below
<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"> <g id="landmarks"> <path id="batman-path" style="fill:rgb(0,0,0);" d="M 261.135 114.535 C 254.906 116.662 247.491 ,,,,,"/> <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"/> </g> </svg>

But It can't run. I am boring so that I can't make progress in this week. I hope you can help me.

All code are below:
`
var shapearr=[];
var shape, svgString;
var paths=document.querySelectorAll("svg > path[id]")
for(var i = 0; i < paths.length; i++) {
var path = paths[i];
svgString=path.getAttribute('d');
console.log(svgString);
//shape = transformSVGPathExposed(svgString);
shape=createMesh(new THREE.ShapeGeometry(drawShape2(svgString)));
scene.add(shape);
shapearr.push(shape);
}
.....
var controls = new function () {
this.amount =6; //2;
this.bevelThickness = 2;
this.bevelSize = 0.5;
this.bevelEnabled = true;
this.bevelSegments = 3;
this.bevelEnabled = true;
this.curveSegments = 12;
this.steps = 1;
this.asGeom = function () {
scene.remove(shape);
var options = {
amount: controls.amount,
bevelThickness: controls.bevelThickness,
bevelSize: controls.bevelSize,
bevelSegments: controls.bevelSegments,
bevelEnabled: controls.bevelEnabled,
curveSegments: controls.curveSegments,
steps: controls.steps
};

            var paths=document.querySelectorAll("svg > path[id]")
            console.log(shapearr);
            for(var i = 0; i < paths.length; i++) {
                var path = paths[i];
                svgString=path.getAttribute('d');
                console.log(svgString);
               // shape = transformSVGPathExposed(svgString);
                shape=createMesh(new THREE.ExtrudeGeometry(drawShape2(svgString)),options);
                scene.add(shape);
            }
        };

    };

   ``
@liyihongcug
Copy link
Author

I sovled the poblem .The answer is upper

@ghost
Copy link

ghost commented Dec 31, 2016

@liyihongcug
could you show this result?

@liyihongcug
Copy link
Author

codes are above . YOu can find it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant