<p>Ok, I've found the solution myself.</p>

<p>It goes like this:</p>

<pre><code>// create shape
shape = new THREE.Shape();

// move it to first point of the chord
shape.moveTo(0+(RADIUS-2)*Math.cos(-1.4639537206164), 0+(RADIUS-2)*Math.sin(-1.4639537206164));

// create all the parts afterward
shape.absarc(0, 0, (RADIUS-2), -1.4639537206164, -1.3041396376011, true);
shape.quadraticCurveTo(0, 0, 0+(RADIUS-2)*Math.cos(4.5262534414805), 0+(RADIUS-2)*Math.sin(4.5262534414805));
shape.absarc(0, 0, (RADIUS-2), 4.5262534414805, 4.6513392175639, true);
shape.quadraticCurveTo(0, 0, 0+(RADIUS-2)*Math.cos(-1.4639537206164), 0+(RADIUS-2)*Math.sin(-1.4639537206164));

// create geometry
geometry = new THREE.ShapeGeometry( shape );
// create mesh
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide } ) ) ;
// rotate
mesh.rotation.x = 90 * Math.PI/180;
// add to scene
scene.add( mesh );
</code></pre>

<p>1) create Shape object<br>
2) move offset to the first point on the arc<br>
3) create arc with the same center and smaller radius as circle (start angle of the first point, end angle second)<br>
4) use quadratic curve with control point (circle center) and the third point<br>
5) use arc the same way as before<br>
6) complete shape with quadratic curve and the last point<br>
7) set geometry, material, add it to scene</p>

CC BY-SA 3.0
2016-08-26T12:38:52.143Z
I'd be interested to see an explanation of how your solution works, and it might be useful for future visitors too...
trichoplax is on Codidact now
CC BY-SA 3.0
2016-08-27T06:38:11.690Z
I've added a simple explanation...
user2229608
CC BY-SA 3.0
2016-08-28T01:00:11.153Z
Can you post a working example? (one way to do it could be with http://jsfiddle.net)
trusktr
CC BY-SA 3.0
2016-08-25T15:31:00.660Z
2016-08-27T06:38:33.557Z
2016-08-27T06:38:33.557Z
user2229608
<p>I'm starting to learn three.js and want to create a chord diagram as possible in d3.js, but from ground up. I've created a scene and have circle segments on xz axes. But I got stuck on the chords. I looked up d3.js code (path+quadratic curve) but need some good example or explanation how to do it in three.js.</p>

<p><a href="https://i.sstatic.net/7y0zT.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/7y0zT.png" alt="enter image description here"></a></p>

<p>What I'd like to do is to have chords with stroke and fill joining my circle segments with different widths at both ends, nicely curved and thinner in the middle (same as d3.js) with a way to set z-index and opacity in the future.</p>

<p>Some example could be really helpfull, thanks.</p>

<p>I want to achieve something like this:</p>

<p><a href="https://i.sstatic.net/7kxbA.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/7kxbA.png" alt="enter image description here"></a></p>

CC BY-SA 3.0
2016-08-20T18:14:20.377Z
Ok, I'll add one.
user2229608
CC BY-SA 3.0
2016-08-20T19:10:43.440Z
Yes, I'd need something that could work with different widths, I'l change the picture once again, because it's slightly different than what I achieved in d3.js.
user2229608
CC BY-SA 3.0
2016-08-20T19:31:47.617Z
I notice in your updated second image there are some that overlap. For example, the mid grey strip near the top of the circle overlaps the green strip that starts next to it (even though both the grey end points are inside the range of the green end points). If that is permitted in the solution then it will be easier to solve.
trichoplax is on Codidact now
CC BY-SA 3.0
2016-08-20T19:32:24.837Z
If you have existing code in d3.js that already gives the desired result, it would be helpful to see it.
trichoplax is on Codidact now
CC BY-SA 3.0
2016-08-20T19:39:38.397Z
I think I'll have to live with some of the curves overlapping. Yes, I can paste here d3.js code, but it does not deal with drawing the chords. It's already in the library, I think that it's here in ribbon function: https://github.com/d3/d3-chord/blob/master/src/ribbon.js.
user2229608
<javascript>
draw a chord in three.js as in d3.js
user2229608
# draw a chord in three.js as in d3.js

(Asked by: username_0 on 2016-08-20)

I'm starting to learn three.js and want to create a chord diagram as possible in d3.js, but from ground up. I've created a scene and have circle segments on xz axes. But I got stuck on the chords. I looked up d3.js code (path+quadratic curve) but need some good example or explanation how to do it in three.js.

[![enter image description here](https://i.sstatic.net/7y0zT.png)](https://i.sstatic.net/7y0zT.png)

What I'd like to do is to have chords with stroke and fill joining my circle segments with different widths at both ends, nicely curved and thinner in the middle (same as d3.js) with a way to set z-index and opacity in the future.

Some example could be really helpfull, thanks.

I want to achieve something like this:

[![enter image description here](https://i.sstatic.net/7kxbA.png)](https://i.sstatic.net/7kxbA.png)

**Tags:** javascript

> **Comments:**
> **username_0**: Ok, I'll add one.  
> **username_0**: Yes, I'd need something that could work with different widths, I'l change the picture once again, because it's slightly different than what I achieved in d3.js.  
> **username_1**: I notice in your updated second image there are some that overlap. For example, the mid grey strip near the top of the circle overlaps the green strip that starts next to it (even though both the grey end points are inside the range of the green end points). If that is permitted in the solution then it will be easier to solve.  
> **username_1**: If you have existing code in d3.js that already gives the desired result, it would be helpful to see it.  
> **username_0**: I think I'll have to live with some of the curves overlapping. Yes, I can paste here d3.js code, but it does not deal with drawing the chords. It's already in the library, I think that it's here in ribbon function: https://github.com/d3/d3-chord/blob/master/src/ribbon.js.  

---

## 1 answers

### Answer by username_0 on 2016-08-25. Score: 1 | Accepted answer

Ok, I've found the solution myself.

It goes like this:

```
// create shape
shape = new THREE.Shape();

// move it to first point of the chord
shape.moveTo(0+(RADIUS-2)*Math.cos(-1.4639537206164), 0+(RADIUS-2)*Math.sin(-1.4639537206164));

// create all the parts afterward
shape.absarc(0, 0, (RADIUS-2), -1.4639537206164, -1.3041396376011, true);
shape.quadraticCurveTo(0, 0, 0+(RADIUS-2)*Math.cos(4.5262534414805), 0+(RADIUS-2)*Math.sin(4.5262534414805));
shape.absarc(0, 0, (RADIUS-2), 4.5262534414805, 4.6513392175639, true);
shape.quadraticCurveTo(0, 0, 0+(RADIUS-2)*Math.cos(-1.4639537206164), 0+(RADIUS-2)*Math.sin(-1.4639537206164));

// create geometry
geometry = new THREE.ShapeGeometry( shape );
// create mesh
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide } ) ) ;
// rotate
mesh.rotation.x = 90 * Math.PI/180;
// add to scene
scene.add( mesh );

```

1) create Shape object  
2) move offset to the first point on the arc  
3) create arc with the same center and smaller radius as circle (start angle of the first point, end angle second)  
4) use quadratic curve with control point (circle center) and the third point  
5) use arc the same way as before  
6) complete shape with quadratic curve and the last point  
7) set geometry, material, add it to scene

> **Comments:**
> **username_1**: I'd be interested to see an explanation of how your solution works, and it might be useful for future visitors too...  
> **username_0**: I've added a simple explanation...  
> **username_2**: Can you post a working example? (one way to do it could be with http://jsfiddle.net)  

---

