Rumah  >  Soal Jawab  >  teks badan

useframe menyebabkan tiga.webglrenderer: kehilangan konteks

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.

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粉025632437P粉025632437236 hari yang lalu405

membalas semua(1)saya akan balas

  • P粉841870942

    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;
        }
      )

    balas
    0
  • Batalbalas