Hello community , how we can move 3d cube on ziczac line with drag controls ??
I saw this example and thank’s for Mr who made it https://jsfiddle.net/prisoner849/sc82ajd5/ , but in addition of this , can we drag the object in line and for once time , i mean when the user drag the object from the top of line to the end of line he cannot redrag it again ? thank you
Now i can drag on street line , can i change the line to zigzag line ?
https://jsfiddle.net/yj68x0eo/
Depends - how do you define the zigzag / path you want the object to follow?
like that 
That, my sir, is not a definition - that is a picture. 🥲
What I meant is how do you define that path in code.
Sorry , my bad
Any help plz? 
Any reference stuff about the desired behaviour/result?
HI mr , some one wrote this to me https://jsfiddle.net/9qch6wzy/ (Thank’s for him ) but i don’t know how he set a zigzag line i want a zigzag line instead of grid helper and drag the cube into it
it’s just the sine function of obj.position.x
obj.position.z = 10 * Math.sin( 0.6 * obj.position.x );
Yes but how i can see the line ?
then is the sine make a curve ? not a zigzag like the photo i posted it ?
Use the THREE.Line object 
Seems it was the desired result of zigzag.
But yes, sine produces a curvy line.
Pardon the ages of delay. There are only three ways I can imagine to do that 
- As Mr Gentleman @prisoner849 pointed out, define the zigzag / curve using a math function or a combination of those. Ex.:
function y(x) {
if (x > 0.0 && x <= 1.0) {
y = x;
} else if (x > 1.0 && x <= 2.0) {
y = Math.sin(x) * -0.5;
} else {
y = x * 2.0;
}
}
This comes with limitations of math functions (ie. each input can have only a single output, so no crazy, concave zigzags allowed.)
- A bit more intuitive way I’d personally go for - that’d also allow quite a bit more flexibility and complexity of the zigzag - is estimating several points along the path (ex. the point at which the line changes it’s direction. Those can just as well be vertices of the line you’ve shown earlier.) Then just create a tiny pathfinding script that’d follow a set of points. Something like:
const points = [
new Vector3(0.0, 0.0, 0.0),
new Vector3(0.0, 1.0, 0.0),
new Vectot3(0.5, 2.0, 0.0),
// ...
];
let targetPoint;
function followPath () {
if (!targetPoint) {
// NOTE Set the first point as a target
targetPoint = points[0];
}
if (!targetPoint && !points.length) {
// NOTE Path was completed
return;
}
const objectDirection = Vector3();
const objectPosition = Vector3();
object.getWorldDirection(objectDirection);
object.getWorldPosition(objectPosition);
const distanceToNextPoint = objectPosition.distanceTo(targetPoint);
if (distanceToNextPoint <= 0.1) {
// NOTE If next point is close enough - consider it reached and pick a next point
targetPoint = null;
} else {
objectDirection.normalize().multiplyScalar(Math.min(distanceToNextPoint, 1.0));
object.position.add(objectDirection);
}
}
function animate () {
followPath();
// NOTE Rendering ...
}
- Or maybe you’re feeling like breaking the law today in a way your grandchildren will still be talking about in 600 years
? Gotchu covered. Open up Blender, and create a zigzag shape using a plane geometry:
Export it as GLTF (ex. .glb ) and load in your Three.js project. Then install donmccurdy/three-pathfinding while simultaneously ignoring screams and weeping of junior developers that’d never even dare to write a single unoptimised line of code in their life. Then, use that three-pathfinding utility together with the GLTF zigzag you created in Blender to create a navmap path for the object to follow - then just duplicate this demo code to make the object follow the path 
3 Likes
while simultaneously ignoring screams and weeping of junior developers that’d never even dare to write a single unoptimised line of code in their life
Thanks for that. That made me laugh 
gotta love pikachu dropping a bomb like this on someone who
don’t know how he set a zigzag line