难以创建基本行（@react-three/fiber 和 Typescript）答案

【问题标题】：Difficulty creating basic Line (@react-three/fiber and Typescript)难以创建基本行（@react-three/fiber 和 Typescript）
【发布时间】：2021-09-04 17:57:32
【问题描述】：

谁能帮我把这条线显示出来？我正在使用 @react-three/fiber 和 Typescript

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点画一条基本线，不确定我是否正确

【问题讨论】：

标签： reactjs three.js react-three-fiber

【解决方案1】：

我一直在努力解决这个问题，直到我收到 Paul Henschel 的回复。

如果您不将 [line] 视为包装器或抽象。你写的jsx是threejs。如果你写一行 threejs 你可以在 jsx 中制作它。但你把道具和职能。 THREE.BufferGeometry.setPoints 是一个函数，而你覆盖它。在 react/jsx 中没有调用 onClick，它设置它。你不能以声明方式调用函数，你可以作为 useEffect 或 useLayoutEffect 的副作用。你用后者如果你想在事物呈现之前调用你的函数在屏幕上。

他链接了这个codeandbox，我也会在这里发布代码。 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>
  )
}

【讨论】：