bufferGeometry setFromPoints 与反应三纤维
bufferGeometry setFromPoints with react-three-fiber
考虑 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')
)
但根本没有 output/error。我想我完全误解了 react-three-fiber
s API。我在这里做错了什么?谢谢,这是 sandbox
所以我真的想通了。我正在寻找的是 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>
)
}
For a future googler, useUpdate has been removed here:
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>
);
考虑 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')
)
但根本没有 output/error。我想我完全误解了 react-three-fiber
s API。我在这里做错了什么?谢谢,这是 sandbox
所以我真的想通了。我正在寻找的是 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>
)
}
For a future googler, useUpdate has been removed here:
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>
);