难以创建基本的 Line（@react- Three/Fiber 和 Typescript）

Question

谁能帮我让这条线显示出来？我使用@react-三/纤维和打字稿

My Faulty Component:


import * as THREE from 'three'

const RoadLine = ({start, end}: {start: THREE.Vector3, end: THREE.Vector3}) => {

    return (
        <line>
            <bufferGeometry setFromPoints={() => new THREE.BufferGeometry().setFromPoints([start, end])}/>
            <lineBasicMaterial color={'green'}/>
        </line>
    )
}

export default RoadLine


------------------------------------------------------------------------------------------

The Props Im sending in: 

{roads?.map(road => {
                        return (
                            <RoadLine
                            key={road.id}
                            start={new THREE.Vector3(1,0,3)} //numbers just for test atm
                            end={new THREE.Vector3(11,0,33)} //numbers just for test atm
                            />
                        )
                    })}

我试图从本质上从 a 点到 b 点做一条基本线，不确定我是否正确地处理它

Answer 1

我一直在努力解决这个问题，直到我看到保罗·亨舍尔的回应。

如果您不将 [line] 视为包装器或抽象，事情就会变得更容易。你写的jsx是 Threejs。如果你用 Threejs 写一行，你可以用 jsx 写它。但你混淆了道具和功能。THREE.BufferGeometry.setPoints 是一个函数，您可以覆盖它。在react/jsx中不会调用onClick，而是会设置它。您不能以声明方式调用函数，而是将其作为 useEffect 或 useLayoutEffect 中的副作用来执行。如果你想在屏幕上呈现之前调用你的函数，你可以使用后者。

他链接了这个codesandbox，我也会在这里发布代码。 https://codesandbox.io/s/basic-demo-forked-e46t9?file=/src/App.js

import * as THREE from 'three'
import React, { useLayoutEffect, useRef } from 'react'
import { Canvas } from '@react-three/fiber'

function Line({ start, end }) {
  const ref = useRef()
  useLayoutEffect(() => {
    ref.current.geometry.setFromPoints([start, end].map((point) => new THREE.Vector3(...point)))
  }, [start, end])
  return (
    <line ref={ref}>
      <bufferGeometry />
      <lineBasicMaterial color="hotpink" />
    </line>
  )
}

export default function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
      <pointLight position={[-10, -10, -10]} />
      <Line start={[0, 0, 0]} end={[1, 0, 0]} />
      <Line start={[1, 0, 0]} end={[1, 1, 0]} />
    </Canvas>
  )
}