虚线移动线反应三纤维

Question

我想知道我是否可以做类似这样的效果：https://reactflow.dev/

用一条指示方向的移动虚线。

使用 r3f 但正常 three.js 也可以

我也想要那种类型的背景，但如果我能让箭头工作也很好。

Answer 1

只需用 .onBeforeCompile 扩展 LineDashedMaterial，添加 time uniform：

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 5);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let g = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector2(-2, 2, 0),
  new THREE.Vector2(0, -2, 0),
  new THREE.Vector2(2, 2, 0)
]);
let uniforms = {
  time: {value: 0}
}
let m = new THREE.LineDashedMaterial({
  color: "yellow",
  dashSize: 0.5,
  gapSize: 0.25,
  onBeforeCompile: shader => {
    shader.uniforms.time = uniforms.time;
    shader.fragmentShader = `
      uniform float time;
      ${shader.fragmentShader}
    `.replace(
      `vLineDistance,`,
      `vLineDistance - time,`
    );
    //console.log(shader.fragmentShader);
  }
});
let l = new THREE.Line(g, m);
l.computeLineDistances();
scene.add(l);

let clock = new THREE.Clock();

renderer.setAnimationLoop( _ => {
  uniforms.time.value = clock.getElapsedTime();
  renderer.render(scene, camera);
});

body{
  overflow: hidden;
  margin:0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.126.1/build/three.min.js"></script>

虚线移动线反应三纤维

Dashed moving line React Three Fiber

javascript

webgl

three.js

reactjs

react-three-fiber