As below, I’d like to move lines from one point to another
From:
To:
Explain my question with code:
Here’s my three lines
const vecX = [
new Vector3(.8, .7, .7),
new Vector3(1.3, .7, .7)
]
const vecY = [
new Vector3(.5, .5, .7),
new Vector3(1.2, 0, 0)
]
const vecZ = [
new Vector3(1.2, -.2, 0),
new Vector3(-.3, -.4, -.2)
]
// ........ render below
<Line
ref={lineXRef}
scale={[.1, 1, 1]}
points={[vecX[0], vecX[1]]}
color="#ddd" // Default
lineWidth={.6} // In pixels (default)
/>
<Line
ref={lineYRef}
points={[vecY[0], vecY[1]]}
scale={[.1, 0, 0]}
color="#ddd" // Default
lineWidth={.6} // In pixels (default)
/>
<Line
ref={lineZRef}
points={[vecZ[0], vecZ[1]]}
scale={[.1, .1, .1]}
color="#ddd" // Default
lineWidth={.6} // In pixels (default)
/>
And I need my lines transform to
const vecX = [
new Vector3(0,0,0),
new Vector3(1,0,0)
]
const vecY = [
new Vector3(0,0,0),
new Vector3(0,1,0)
]
const vecZ = [
new Vector3(0,0,0),
new Vector3(0,0,1)
]
What’s the best practice in this situation?
I tried it with applyMatrix4, but I don’t know how to apply it as an animation(not working as expected)
might be the right way but I’m doing it correctly?
useFrame((state, delta) => {
const time = state.clock.getElapsedTime() * .0001;
const matrix = new Matrix4();
const trans = new Vector3(time * 2, 0, 0);
const rotat = new Quaternion().setFromEuler(new Euler(0, 0, Math.PI / 2 * time ));
const scale = new Vector3(1, 1, 1);
lineXRef.current.applyMatrix4(
matrix.compose(trans, rotat, scale));
}
Or should I get all points on a line and animate every points to the target vector?
If anyone can point me out the right direction I’ll be really grateful.
