Как узнать все атрибуты "Canvas" в react-three-fiber?

#three.js #react-three-fiber

Вопрос:

Я прочитал официальный документ Canvas в react-three-fiber.

официальный документ Canvas в react-three-fiber

Атрибутов Canvas всего несколько. Я видел чей-то проект. В своем коде он использует больше атрибутов, таких как:

 <Canvas
      concurrent
      noEvents={false}
      pixelRatio={window.devicePixelRatio}
      camera={{ position: [0, 0, 2.5], fov: 69 }}
      gl={{ antialias: true }}
      onCreated={({ gl, scene }) => {
        gl.toneMapping = THREE.ACESFilmicToneMapping
        gl.outputEncoding = THREE.sRGBEncoding
        //scene.background = new THREE.Color('#373740')
      }}>...</Canvas>

итак, как я могу узнать полное введение о Canvas в react-three-fiber?

1. Вам следует взглянуть на исходный код, например: github.com/react-spring/react-three-fiber/blob/v4.2.20/src /…

2. мне жаль, что этот веб-сайт все еще существует, он не официальный. полная документация находится на github: github.com/react-spring/react-three-fiber/blob/master/api.md все реквизиты перечислены. кстати, вам больше не нужно это цветовое пространство, просто передайте флаг colorManagement, и он установит это цветовое пространство и автоматически скорректирует цвета. что касается всех реквизитов в «gl», это threejs, «WebGLRenderer» в документах threejs.

Ответ №1:

Если у вас нет доступа к документации или исходным файлам, просто попробуйте вывести объект JavaScript на консоль с помощью console.log() . Например:

 var c = <Canvas>...</Canvas>
console.log(c);

Затем откройте консоль разработчика, и вы увидите объект со всеми его доступными свойствами, общедоступными методами и всем остальным, к чему у вас может быть доступ.

Ответ №2:

Взгляните на документацию на GitHub. Вот ссылка специально для компонента Canvas.

https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#canvas

На этой странице описывается API react-three-fiber.

Ответ №3:

получить отражение холста

 const myCanvas = useRef();
console.log(myCanvas);

<Canvas ref={myCanvas} >
   ......
</Canvas>

получить ссылку, а затем вывести консоль