react three editable

Отреагировать три редактируемого

️ React Three Editake теперь является частью Theatre.js и может быть найдена на NPM как @theatre/r3f . Новый проект функционально почти такой же, как и этот, просто с большим количеством функций, регулярного обслуживания и ... инструментов анимации! ? Скорее всего, ваш текущий код R3E будет работать без каких -либо изменений.

Для тех, кто не слышал новости, я теперь также работаю над Theatre.js, и @theatre/r3f будет получать регулярные улучшения и обслуживание в качестве официального расширения Theatre.js.

Однако с этим, этот пакет ( react-three-editable ) устарел в пользу @theatre/r3f . Я призываю вас всех проверить это на theatre.js и подать проблемы там!

React Three Edable-это библиотека для React и React-Fiber, которая позволяет вам редактировать вашу сцену в визуальном редакторе, требуя минимальных изменений в вашем коде R3F. Чтобы получить быстрое представление о том, о чем это все, посмотрите на этот код и ящик.

Здесь будь драконами! ? React Three Edake является относительно стабильным, однако, будучи программным обеспечением до 1,0.0, API и внутренняя логика могут кардинально измениться в любое время без предупреждения.

Быстрый старт

 yarn add react-three-editable

 import React from 'react' ;
import { Canvas } from 'react-three-fiber' ;
import { editable as e , configure } from 'react-three-editable' ;

// Import your previously exported state
import editableState from './editableState.json' ;

const bind = configure ( {
  // Enables persistence in development so your edits aren't discarded when you close the browser window
  enablePersistence : true ,
  // Useful if you use r3e in multiple projects
  localStorageNamespace : 'Example' ,
} ) ;

export default function App ( ) {
  return (
    < Canvas onCreated = { bind ( { state : editableState } ) } >
      < ambientLight intensity = { 0.5 } />
      { /* Mark objects as editable. */ }
      { /* Properties in the code are used as initial values and reset points in the editor. */ }
      < e . spotLight
        position = { [ 10 , 10 , 10 ] }
        angle = { 0.15 }
        penumbra = { 1 }
        uniqueName = "Spotlight"
      />
      < e . pointLight uniqueName = "PointLight" />
      < e . mesh uniqueName = "Box" >
        < boxBufferGeometry />
        < meshStandardMaterial color = "orange" />
      </ e . mesh >
    </ Canvas >
  ) ;
}

(Codesandbox)

Почему

При создании трехмерной сцены для React-Fiber вы можете выбрать два маршрута: вы можете либо кодировать ее в R3F, что дает вам реакционную способность, и гибкость, которая идет с ним, или вы можете использовать 3D-программное обеспечение, такое как Blender, и экспортировать его, но затем, если вы хотите динамически изменить эту сцену во время выполнения, вам придется отступить к имперскому коду.

На данный момент лучшим средним уровнем является GLTFJSX , который генерирует JSX из вашей экспортируемой сцены, однако он все же включает в себя много ручной работы, если вы хотите разделить свою сцену на компоненты, и любые модификации, которые вы вносите

Отрешите три редактируемых целях, чтобы заполнить этот пробел, позволяя вам настроить вашу сцену в JSX, давая вам реактивность, позволяя вам настроить свойства этих объектов в визуальном редакторе, включая их преобразования, которые вы можете запекать в файл JSON для использования во время выполнения в производстве. Явной целью проекта является то, чтобы отразить регулярный код реагирования с тремя волокнами максимально. Это позволяет вам легко добавить его в существующий проект, вывести его, когда он вам не нужен, и, как правило, использовать его столько или столько, сколько вы хотите, не чувствуя себя запертым.

API

editable

Используйте его, чтобы сделать объекты редактируемыми. Свойства на editable зеркале. Внутренние элементы реагирования с тремя волокнами, однако еще нет полной паритета. Например, если вы хотите создать редактируемый <mesh> , вы делаете это, используя <editable.mesh> вместо этого. Эти элементы имеют тот же интерфейс, что и нормальные, с добавлением приведенного ниже реквизита. Любое редактируемое свойство, которое вы устанавливаете в коде (например, position ), будет использоваться в качестве начального значения/точки сброса в редакторе.

editable также является функцией, которая позволяет вам сделать ваши пользовательские компоненты редактируемыми. Ваш компонент должен быть совместим с интерфейсом типа редактируемого объекта, который он предназначен для представления. Вам нужно передать ему компонент, который вы хотите обернуть, и тип объекта, который он представляет (см. Типы объектов).

 import { editable } from 'react-three-editable' ;
import { PerspectiveCamera } from '@react-three/drei' ;

const EditableCamera = editable ( PerspectiveCamera , 'perspectiveCamera' ) ; 

Реквизит

uniqueName: string : уникальное имя, используемое для идентификации объекта в редакторе.

configure(options)

Позволяет настроить редактор.

Параметры

options.localStorageNamespace: string = '' : позволяет вам пространство имен ключ, используемый для автоматического удержания государства редактора в разработке. Полезно, если вы работаете над несколькими проектами одновременно и не хотите, чтобы один проект перезаписывал другой.

options.enablePersistence: boolean = true

Возврат

bind : функция, которую вы можете использовать для подключения Canvases для реагирования на три редактируемого, см. Ниже.

bind(options)

Bind - это функция карри, которую вы называете options , и возвращает другую функцию, которую необходимо вызвать с gl и scene .

Используйте его, чтобы привязать Canvas , чтобы отреагировать три редактируемых: <Canvas onCreated={bind(options)}> . Если вы используете onCreated и для других вещей, вы должны вручную вызывать функцию, возвращаемую bind() :

 < Canvas onCreated = { ( { gl , scene } ) => {
  bind ( options ) ( { gl , scene } ) ;
} } >
  // ...
</ Canvas >

❓ «Приведенный выше фрагмент выглядит неправильно ...»: bind - это карри, так что вам не нужно проходить gl и scene вручную в среднем случае, когда ваш onCreated пуст. Недостатком является то, что это выглядит так, когда вам приходится вручную назвать это с gl и scene .

️ На данный момент вы можете подключить только один холст, однако запланирована поддержка с несколькими канвами.

Параметры

options.state?: EditableState : ранее экспортируемое состояние.

options.allowImplicitInstancing: boolean = false : позволяет неявное инстать в редактируемых объектах через повторное использование uniqueName S. Эти объекты будут делиться всеми редактируемыми свойствами. Это обескуражен, так как вы упустите предупреждения, если вы случайно повторно используете uniqueName , и в будущем будет заменен префабами.

Типы объектов

Отрешите три редактируемых в настоящее время поддерживает следующие типы объектов:

• группа
• сетка
• прожектор
• Направление
• гоночный свет
• Перспектива
• OrthographicCamera

Они доступны в качестве свойств editable , и вам необходимо передать их в качестве второго параметра при обертывании пользовательских компонентов.

Производство/разработка сборка

React Three Edable автоматически отображает редактора в разработке и удаляет его в производстве, аналогично тому, как React имеет две разные сборки. Чтобы использовать это, вам необходимо настроить систему сборки для обработки проверок. process.env.NODE_ENV . Если вы используете CRA или Next.js, это уже сделано для вас.

В производстве размер пакета R3E составляет 2,9 кб.

Внося

Любая помощь приветствуется!

Этот проект по -прежнему очень сильно находится на этапе концепции, поэтому обратная связь и идеи столь же ценны, как и помощь в коде, или поддержка разработки.

Если у вас есть время, пожалуйста, просмотрите проблемы и посмотрите, есть ли что -нибудь, с чем вы можете помочь.