bufferGeometry setFromPoints с помощью react-three-fiber

Question

Учитывая toLinePath функция:

const toLinePath = (arrayOfPoints, color = 0x000000) => {
  const path = new THREE.Path();
  const firstPoint = arrayOfPoints[0];

  path.moveTo(firstPoint.x, firstPoint.y, firstPoint.z);
  arrayOfPoints.forEach(point => path.lineTo(point.x, point.y, point.z));
  path.closePath();

  const points = path.getPoints();
  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const material = new THREE.LineBasicMaterial({ color });
  const line = new THREE.Line(geometry, material);
  return line;
};

Я хочу воссоздать его, используя react-three-fiber и пробовал что-то вроде этого:

import React from 'react'
import * as THREE from 'three'
import ReactDOM from 'react-dom'
import { Canvas } from 'react-three-fiber'

function LinePath(props) {
  const vertices = React.useMemo(() => {
    const path = new THREE.Path()
    const firstPoint = props.vertices[0]

    path.moveTo(firstPoint.x, firstPoint.y, firstPoint.z)
    props.vertices.forEach(point => path.lineTo(point.x, point.y, point.z))
    path.closePath()

    return path.getPoints()
  }, [props.vertices])

  return (
    <line>
      <bufferGeometry attach="geometry" setFromPoints={vertices} />
      <lineBasicMaterial attach="material" color="black" />
    </line>
  )
}


ReactDOM.render(
  <Canvas>
    <LinePath vertices={[new THREE.Vector3(0, 0, 0), new THREE.Vector3(2, 2, 0), new THREE.Vector3(-2, 2, 0)]} />
  </Canvas>,
  document.getElementById('root')
)

Но вывода / ошибки нет вообще. Полагаю, я совершенно не понялreact-three-fibers API. Что я здесь делаю не так? Спасибо, а вот и песочница

Answer 1

Так что я действительно понял это. Я искал useUpdate крючок, который позволяет нам вызывать методы любого заданного ref. Итак, что нужно сделать:

import { Canvas, useUpdate } from 'react-three-fiber'

function LinePath(props) {
  const vertices = ...

  const ref = useUpdate(geometry => {
    geometry.setFromPoints(vertices)
  }, [])

  return (
    <line>
      <bufferGeometry attach="geometry" ref={ref} />
      ...
    </line>
  )
}

Answer 2

Для будущего гугления useUpdate удалено здесь:

https://github.com/pmndrs/react-three-fiber/pull/996.

Вместо этого используйте useLayoutEffect .

       const ref = React.useRef<BufferGeometry>(null!);
  useLayoutEffect(() => {
    if (ref.current) {
      ref.current.setFromPoints(points);
    }
  }, []);

  return (
    <line>
      <bufferGeometry attach='geometry' ref={ref} />
      <lineBasicMaterial color={0xff0000} />
    </line> 
  );