Rumah > Soal Jawab > teks badan
Saya cuba menghidupkan saiz komponen React 3 Fiber drei Box menggunakan useFrame. Geometri berfungsi dengan baik sehingga saya menambah fungsi useFrame, yang menyebabkan penyemak imbas membuang ralat THREE.WebGLRenderr: Context Lost
dan menghalang sebarang pemaparan semula.
import React, {useRef} from 'react'; import { Box } from '@react-three/drei'; import { useFrame } from '@react-three/fiber'; export default function BarGraph() { const purpleColor = "#5b21b6"; const barRef1 = useRef(); useFrame( (state) => { barRef1.current.parameters.depth = Math.sin(state.clock.elapsedTime) + 3; } ) return ( <mesh position={[0,1,1]} scale={0.5}> <Box args={[1,1,3]} position={[1,3,2]} ref={barRef1}> <meshStandardMaterial color={purpleColor}/> </Box> </mesh> )
Saya juga cuba menggantikan kandungan useFrame dengan barRef1.current.args = [1,1,Math.sin(state.clock.elapsedTime) + 3]
tetapi ia menghasilkan hasil yang sama. p>
Saya tahu saya membebankan keupayaan grafik penyemak imbas, tetapi saya tidak tahu mengapa atau cara mengehadkannya dalam useFrame.
Kemas kini:
Saya dapat mengakses dan mengubah suai scale
sifat komponen dan mencapai hasil yang diharapkan.
useFrame( (state) => { barRef1.current.scale.y = Math.sin(state.clock.elapsedTime) + 3; } )
P粉8418709422024-03-20 10:52:48
Saya dapat mengakses dan mengubah suai scale
sifat komponen dan mencapai hasil yang diharapkan.
useFrame( (state) => { barRef1.current.scale.y = Math.sin(state.clock.elapsedTime) + 3; } )