react three editable

Reagieren Sie drei bearbeitet

Euen React Three Editable ist jetzt Teil von Theater.js und ist auf NPM als @theatre/r3f zu finden. Das neue Projekt ist funktional fast das gleiche wie dieses, nur mit mehr Funktionen, regelmäßiger Wartung und ... Animationstools! ? Wahrscheinlich funktioniert Ihr aktueller R3E -Code ohne Änderungen.

Für diejenigen, die die Nachrichten nicht gehört haben, arbeite ich jetzt auch am Theater.js, und @theatre/r3f wird regelmäßig Verbesserungen und Wartung als offizielle Erweiterung von Theatre.js erhalten.

Damit ist dieses Paket ( react-three-editable ) jedoch zugunsten von @theatre/r3f veraltet. Ich ermutige Sie alle, es in Theatre.js zu überprüfen und dort Probleme einzureichen!

React Three bearbeitbar ist eine Bibliothek für React und React-Drei-Faser, mit der Sie Ihre Szene in einem visuellen Editor bearbeiten können und gleichzeitig minimale Änderungen an Ihrem R3F-Code benötigen. Um eine kurze Vorstellung davon zu bekommen, worum es geht, werfen Sie bitte einen Blick auf diese Codesandbox.

Hier werden Drachen! ? React Three bearbeitbar ist relativ stabil, aber die API und die interne Logik können sich jederzeit drastisch ändern.

Schneller Start

 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)

Warum

Wenn Sie eine 3D-Szene für React-Drei-Faser erstellen, können Sie zwei Routen auswählen: Sie können sie entweder in R3F codieren, was Ihnen Reaktivität verleiht, und die damit verbundene Flexibilität, oder Sie können eine 3D-Software wie Blender verwenden und sie exportieren, aber wenn Sie diese Szene dynamisch zur Laufzeit ändern möchten, müssen Sie sich zum Imperativcodes codieren.

Der bisher beste Mittelweg war GLTFJSX , der JSX aus Ihrer exportierten Szene erzeugt. Es beinhaltet jedoch immer noch viel manuelle Arbeit, wenn Sie Ihre Szene in Komponenten aufteilen möchten, und alle Änderungen, die Sie vornehmen, müssen erneut angewendet werden, wenn Sie Änderungen an der Szene vornehmen.

Reagieren Sie drei bearbeitbare Ziele, diese Lücke zu schließen, indem Sie Ihre Szene in JSX einrichten, wodurch Sie die Eigenschaften dieser Objekte in einem visuellen Editor, einschließlich ihrer Transformationen, die Eigenschaften dieser Objekte ändern können, die Sie dann in eine JSON -Datei einbacken können, die von der Laufzeit in der Produktion verwendet werden kann. Ein explizites Ziel des Projekts ist es, regelmäßige React-Drei-Faser-Code so weit wie möglich zu spiegeln. Auf diese Weise können Sie es mit Leichtigkeit einem vorhandenen Projekt hinzufügen, es herausnehmen, wenn Sie es nicht benötigen, und verwenden Sie es im Allgemeinen so wenig oder so viel wie Sie möchten, ohne sich eingesperrt zu fühlen.

API

editable

Verwenden Sie es, um Objekte bearbeitbar zu machen. Die Eigenschaften des editable Spiegels spiegeln die intrinsischen Elemente von React-Drei-Faser wider, es gibt jedoch noch keine vollständige Parität. Wenn Sie ein bearbeitbares <mesh> erstellen möchten, verwenden Sie es stattdessen mit <editable.mesh> . Diese Elemente haben die gleiche Schnittstelle wie die normalen, wobei die folgenden Requisiten hinzugefügt werden. Jede bearbeitbare Eigenschaft, die Sie im Code (wie position ) festgelegt haben, wird im Editor als Anfangswert/Reset -Punkt verwendet.

editable ist auch eine Funktion, mit der Sie Ihre benutzerdefinierten Komponenten bearbeitbar machen können. Ihre Komponente muss mit der Schnittstelle des bearbeitbaren Objekttyps kompatibel sein, das sie darstellen soll. Sie müssen die Komponente übergeben, die Sie einwickeln möchten, und den darstellenden Objekttyp (siehe Objekttypen).

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

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

Requisiten

uniqueName: string : Ein eindeutiger Name, der verwendet wird, um das Objekt im Editor zu identifizieren.

configure(options)

Mit dem Editor konfigurieren Sie.

Parameter

options.localStorageNamespace: string = '' : Ermöglicht Sie den Namen, den Schlüssel zum automatischen Bestehen des Editor -Status in der Entwicklung verwendet. Nützlich, wenn Sie gleichzeitig an mehreren Projekten arbeiten und nicht möchten, dass ein Projekt das andere überschreibt.

options.enablePersistence: boolean = true : Legt fest, ob die Persistenz aktiviert werden soll oder nicht.

Zurück

bind : Eine Funktion, mit der Sie Leinwände anschließen können, um drei bearbeitet zu werden, siehe unten.

bind(options)

Bind ist eine Curry -Funktion, die Sie mit options aufrufen und eine andere Funktion zurückgeben, die mit gl und scene aufgerufen werden muss.

Verwenden Sie es, um eine Canvas zu binden, um drei bearbeitet zu werden: <Canvas onCreated={bind(options)}> . Wenn Sie auch für andere Dinge onCreated werden, müssen Sie die von bind() zurückgegebene Funktion manuell aufrufen:

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

❓ "Das obige Snippet sieht falsch aus ...": bind ist eine Curry -Funktion, so dass Sie in dem durchschnittlichen Fall, wenn Ihr onCreated leer ist, nicht manuell und in dem durchschnittlichen scene gl müssen. Der Nachteil ist, dass es so aussieht, wenn Sie es manuell mit gl und scene nennen müssen.

Euen Im Moment können Sie nur eine einzelne Leinwand anschließen, jedoch ist eine Mehrkanvas-Unterstützung geplant.

Parameter

options.state?: EditableState : Ein zuvor exportierter Zustand.

options.allowImplicitInstancing: boolean = false uniqueName Diese Objekte teilen alle bearbeitbaren Eigenschaften. Es ist entmutigt, da Sie Warnungen verpassen werden, wenn Sie versehentlich einen uniqueName wiederverwenden und in Zukunft von Vorbereitungen ersetzt werden.

Objekttypen

React Three bearbeitbar unterstützt derzeit die folgenden Objekttypen:

• Gruppe
• Netz
• Scheinwerfer
• DirectionAllight
• Pointlight
• PerspectiveCamera
• orthographische Kamera

Diese sind als Eigenschaften von editable erhältlich, und Sie müssen sie beim Wickeln benutzerdefinierter Komponenten als zweiter Parameter übergeben.

Produktions-/Entwicklungsbau

React Three bearbeitbar wird der Editor in der Entwicklung automatisch angezeigt und entfernt ihn in der Produktion, ähnlich wie React zwei verschiedene Builds hat. Um dies zu verwenden, müssen Sie Ihr Build -System einrichten, um process.env.NODE_ENV zu verarbeiten.Env.NODE_ENV -Überprüfungen. Wenn Sie CRA oder Next.js verwenden, ist dies bereits für Sie geschehen.

In der Produktion beträgt die Bündelgröße von R3E 2,9 kb.

Beitragen

Jede Hilfe ist willkommen!

Dieses Projekt ist nach wie vor sehr in der Konzeptphase, daher sind Feedback und Ideen genauso wertvoll ein Beitrag wie bei der Unterstützung des Code oder der Unterstützung der Entwicklung.

Wenn Sie Zeit haben, gehen Sie bitte die Probleme und sehen Sie, ob Sie etwas helfen können.