Hi,
I have to make a serpentine shape but I am not able to get intended look.
Can anyone please help me?
Use TubeGeometry.
Thank you !!
I checked it but i am not able to make a path for this shape !!
To make this path, provide a set of points describing the corners of the path. And also, please, share you attempt on CodePen, JSFiddle or a similar system.
I would make it in blender.
Here is a video I made many years ago showing how to quickly and easily create pipes in blender.
This is my output
with this as my code:
var path = [
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(25, 0, 0),
new THREE.Vector3(1, 20, 0),
new THREE.Vector3(25, 20, 0),
new THREE.Vector3(1, 40, 0),
new THREE.Vector3(25, 40, 0),
new THREE.Vector3(1, 60, 0),
new THREE.Vector3(25, 60, 0),
];
var pathBase = new THREE.CatmullRomCurve3(path);
var rod_geometry = new THREE.TubeGeometry(pathBase, 20, 2, 8, false);
var rod_material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var rod = new THREE.Mesh(rod_geometry, rod_material);
scene.add(rod);
I see. You only need to provide a better set of points. And more detailed tube (not 20, but 1000 for example).
I thought you need a flat shape, not a 3D-tube 
I needed flat shape but i could not make it and then i found tube so i went with something rather than nothing 
Flattened tube:
rod.scale.set( 1, 1, 0);
Reminds me about this: Scaling an object in three.js - Stack Overflow
I think, better to scale the geometry instead
1 Like
I am getting this shape
and not able to get rid of this wierd shape
var path = [
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(25, 0, 0),
new THREE.Vector3(26, 2, 0),
new THREE.Vector3(25, 3, 0),
new THREE.Vector3(1, 20, 0),
new THREE.Vector3(25, 20, 0),
new THREE.Vector3(26, 22, 0),
new THREE.Vector3(25, 24, 0),
new THREE.Vector3(1, 40, 0),
new THREE.Vector3(25, 40, 0),
new THREE.Vector3(26, 42, 0),
new THREE.Vector3(25, 41, 0),
new THREE.Vector3(1, 60, 0),
new THREE.Vector3(25, 60, 0),
];
var pathBase = new THREE.CatmullRomCurve3(path);
var rod_geometry = new THREE.TubeGeometry(pathBase, 20, 2, 8, false);
var rod_material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var rod = new THREE.Mesh(rod_geometry, rod_material);
rod.scale.set(1, 1, 0);
scene.add(rod);
even after adding many points in corner !!!
Here you’ve got 20 equidistant sections along the path. What do you expect to see?
ohh !! when u said i need to change 20 to something bigger, you meant number of segments ?? I thought the distance between points !!!
Oh god !! Thank you so much !!!
I am so stupid
Awesome, i got this shape which is what i wanted to make !!
Thank you
2 Likes
@Pravin_Poudel: I’m sorry for the confusion. What is obvious to one person is not necessarily obvious to another one. I should have been more specific.
@prisoner849: Yes, zeros are dangerous. Scaling the geometry is safer. Maybe some small non-zero value would also be fine… or just using 2 radial segments (a kind of making a round worm into a tape worm).
@me: Have a rest.
2 Likes
Try drawing it using SvgPathEditor (yqnn.github.io). Import the SVG to get a flat shape.
Here’s the SVG
<svg viewBox=“-5 -10 9 9” xmlns="http:// www .w3.org/2000/svg " >
<path d=“M 3 -10 L 3 -8 Q 3 -7 2 -7 L -2 -7 C -4 -7 -4 -5 -2 -5 L 2 -5 C 4 -5 4 -1 2 -1 L -2 -1 L -2 -2 L 2 -2 C 3 -2 3 -4 2 -4 L -2 -4 C -5 -4 -5 -8 -2 -8 L 2 -8 L 2 -10” fill=“black” />
</svg>
Here’s equivalent threejs code
const shape = new Shape()
.moveTo(0.3, 1)
.lineTo(0.3, 0.8)
.quadraticCurveTo(0.3, 0.7, 0.2, 0.7)
.lineTo(-0.2, 0.7)
.bezierCurveTo(-0.4, 0.7, -0.4, 0.5, -0.2, 0.5)
.lineTo(0.2, 0.5)
.bezierCurveTo(0.4, 0.5, 0.4, 0.1, 0.2, 0.1)
.lineTo(-0.2, 0.1)
.lineTo(-0.2, 0.2)
.lineTo(0.2, 0.2)
.bezierCurveTo(0.3, 0.2, 0.3, 0.4, 0.2, 0.4)
.lineTo(-0.2, 0.4)
.bezierCurveTo(-0.5, 0.4, -0.5, 0.8, -0.2, 0.8)
.lineTo(0.2, 0.8)
.lineTo(0.2, 1)
const geometry = new ShapeGeometry(shape);
