Meshline react-three-fiber

Questions
1

I try to create curved line with texture. I use to meshline, but why does my line look like it has different widths?

export const StraightLine = () => {
const texture = useTexture(crosswalk);
const { width, height } = useThree((state) => state.size);

const pointsData = b;
const isCurved = true;
const lineRef = useRef<any>();
const { scene } = useThree();
const [points, setPoints] = useState<THREE.Vector3[]>([]);

useEffect(() => {
	// Convert points data to THREE.Vector3 array
	const pointVectors = pointsData.map((point) => new THREE.Vector3(point.x, point.y, 0));
	if (isCurved) {
		const curve = new CatmullRomCurve3(pointVectors);
		setPoints(curve.getPoints(1000));
	} else {
		setPoints(pointVectors);
	}
}, [pointsData, isCurved]);

useEffect(() => {
	if (points.length > 0) {
		const geometry = new MeshLineGeometry();
		geometry.setPoints(points.flatMap((p) => [p.x, p.y, 0]));
		const copyTexture = texture.clone();
		copyTexture.wrapS = THREE.RepeatWrapping;
		copyTexture.wrapT = THREE.RepeatWrapping;
		// copyTexture.repeat.set(3, 1);
		copyTexture.needsUpdate = true;

		const material = new MeshLineMaterial({
			color: 'red',
			useMap: 1,
			lineWidth: 0.05,
			map: copyTexture,
			alphaTest: 0.5,
			// @ts-ignore
			transparent: 1,
			depthTest: false,
			resolution: new THREE.Vector2(width, height),
			// @ts-ignore
			repeat: new THREE.Vector2(150, 1),
		});

		const line = new Mesh(geometry, material);
		line.scale.set(1, 1, 0);
		lineRef.current.add(line);
		lineRef.current.renderOrder = 1;
		scene.add(lineRef.current);
	}
}, [scene, points, texture, width, height]);

return <mesh ref={lineRef} />;

};

Снимок экрана 2024-06-01 в 18.57.30
Снимок экрана 2024-06-01 в 18.57.301780×1396 275 KB

2

you are using this meshline? GitHub - pmndrs/meshline: 🪱 Mesh replacement for THREE.Line

it isn’t so convoluted normally, you can use it declaratively. you never add or remove stuff the imperative way, it would go against the whole point of react.

import { Canvas, extend } from '@react-three/fiber'
import { MeshLineGeometry, MeshLineMaterial, raycast } from 'meshline'

extend({ MeshLineGeometry, MeshLineMaterial })

function App() {
  return (
    <Canvas>
      <mesh raycast={raycast} onPointerOver={console.log}>
        <meshLineGeometry points={[0, 0, 0, 1, 0, 0]} />
        <meshLineMaterial lineWidth={1} color="hotpink" />
      </mesh>
    </Canvas>
  )
}

here’s an example with a textured meshline https://codesandbox.io/p/sandbox/lanyard-rope-physics-2vsq8k

ps, i don’t understand why you would want a useEffect + setState instead of a simple useMemo. useEffect is for side effects, useMemo is for memoized calculations.

const curve = useMemo(() => {
  const pointVectors = pointsData.map((point) => new THREE.Vector3(point.x, point.y, 0))
  return isCurved
    ? new CatmullRomCurve3(pointVectors).getPoints(1000)
    : pointVectors
}, [pointsData, isCurved])
3

i tried this example, but why can’t I see anything on the screen? although the console works?

import { Canvas, extend } from ‘@react-three/fiber’;
import { MeshLineGeometry, MeshLineMaterial, raycast } from ‘meshline’;

extend({ MeshLineGeometry, MeshLineMaterial });

Снимок экрана 2024-06-01 в 22.42.31
Снимок экрана 2024-06-01 в 22.42.311098×536 36.1 KB

Снимок экрана 2024-06-01 в 22.39.28
Снимок экрана 2024-06-01 в 22.39.28834×1646 164 KB

4

most likely needs more points and the documentation is wrong.

5

I changed your example. Why does the line have different weights? I try to draw 2d curved line with texture. Maybe it’s doesn’t work with 2d?

https://codesandbox.io/p/sandbox/lanyard-rope-physics-forked-44yk42?file=%2Fsrc%2FApp.js%3A102%2C52