react three editable
v0.8.1
️ React Three Editable ahora es parte de Theatre.js y se puede encontrar en NPM como@theatre/r3f. El nuevo proyecto es funcionalmente casi el mismo que este, solo con más características, mantenimiento regular y ... ¡herramientas de animación! ? Lo más probable es que su código R3E actual funcione sin ninguna modificación.Para aquellos que no han escuchado las noticias, ahora también estoy trabajando en Theatre.js, y
@theatre/r3frecibirá mejoras y mantenimiento regulares como una extensión oficial de teatre.js.Con eso, sin embargo, este paquete (
react-three-editable) está en favor a favor de@theatre/r3f. ¡Les animo a todos a verlo en Theatre.js y los problemas de archivos allí!
React Three Editable es una biblioteca para React y React-Three-Fiber que le permite editar su escena en un editor visual al tiempo que requiere modificaciones mínimas a su código R3F. Para tener una idea rápida de de qué se trata, eche un vistazo a este CodesandBox.
¡Aquí hay dragones! ? React Three Editable es relativamente estable, sin embargo, estar antes de 1.0.0 el software, la API y la lógica interna pueden cambiar drásticamente en cualquier momento, sin previo aviso.
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)
Al crear una escena 3D para React-Three-Fiber, puede elegir dos rutas: puede codificarla en R3F, lo que le brinda reactividad y la flexibilidad que viene con ella, o puede usar un software 3D como Blender y exportarlo, pero luego, si desea modificar dinámicamente esa escena en tiempo de ejecución, tendrá que recurrir al código imperativo.
El mejor término medio hasta ahora ha sido GLTFJSX , que genera JSX a partir de su escena exportada, sin embargo, todavía implica mucho trabajo manual si desea dividir su escena en componentes, y cualquier modificación que haga deberá volver a aplicar si realiza cambios en la escena.
Reaccione tres objetivos editables para llenar este vacío al permitirle configurar su escena en JSX, dándole reactividad, al tiempo que le permite ajustar las propiedades de estos objetos en un editor visual, incluidas sus transformaciones, que luego puede hornear en un archivo JSON para ser utilizado por el tiempo de ejecución en producción. Un objetivo explícito del proyecto es reflejar el código regular React-Three-Fiber tanto como sea posible. Esto le permite agregarlo a un proyecto existente con facilidad, sacarlo cuando no lo necesite y, en general, usarlo tan poco o tanto como desee, sin sentirse bloqueado.
editable Úselo para hacer que los objetos editen. Las propiedades en editable reflejan los elementos intrínsecos de React-Three-Fiber, sin embargo, aún no hay paridad completa. Por ejemplo, si desea crear un editable <mesh> , lo hace usando <editable.mesh> en su lugar. Estos elementos tienen la misma interfaz que las normales, con la adición de los siguientes accesorios. Cualquier propiedad editable que haya establecido en el código (como position similar) se utilizará como un valor inicial/punto de reinicio en el editor.
editable también es una función que le permite hacer que sus componentes personalizados editen. Su componente debe ser compatible con la interfaz del tipo de objeto editable que debe representar. Debe pasarlo el componente que desea envolver, y el tipo de objeto que representa (ver tipos de objeto).
import { editable } from 'react-three-editable' ;
import { PerspectiveCamera } from '@react-three/drei' ;
const EditableCamera = editable ( PerspectiveCamera , 'perspectiveCamera' ) ; uniqueName: string : un nombre único utilizado para identificar el objeto en el editor.
configure(options)Le permite configurar el editor.
options.localStorageNamespace: string = '' : le permite el espacio de nombres la clave utilizada para persistir automáticamente el estado del editor en el desarrollo. Útil si está trabajando en múltiples proyectos al mismo tiempo y no desea que un proyecto que sobrescribe al otro.
options.enablePersistence: boolean = true
bind : una función que puede usar para conectar lienzos para reaccionar tres editables, ver a continuación.
bind(options) Bind es una función curry que llama con options y devuelve otra función que debe llamarse con gl y scene .
Úselo para unir un Canvas para reaccionar tres editables: <Canvas onCreated={bind(options)}> . Si también usa onCreated para otras cosas, debe llamar manualmente la función devuelta por bind() ::
< Canvas onCreated = { ( { gl , scene } ) => {
bind ( options ) ( { gl , scene } ) ;
} } >
// ...
</ Canvas > ❓ "El fragmento anterior se ve mal ...": bind es una función curry, de modo que no tiene que pasar gl y scene manualmente en el caso promedio cuando su onCreated está vacía. La desventaja es que se ve así cuando tienes que llamarlo manualmente con gl y scene .
options.state?: EditableState : un estado exportado previamente.
options.allowImplicitInstancing: boolean = false uniqueName Estos objetos compartirán todas las propiedades editables. Se desanima ya que se perderá las advertencias si se reutiliza accidentalmente un uniqueName , y será reemplazado por prefabricados en el futuro.
React Three Editable actualmente admite los siguientes tipos de objetos:
Estas están disponibles como propiedades de editable , y debe pasarlas como el segundo parámetro al envolver los componentes personalizados.
React Three Editable muestra automáticamente el editor en el desarrollo y lo elimina en producción, de manera similar a cómo React tiene dos compilaciones diferentes. Para hacer uso de esto, debe configurar su sistema de compilación para manejar process.env.NODE_ENV Checks. Si está utilizando CRA o Next.js, esto ya está hecho para usted.
En producción, el tamaño del paquete de R3E es de 2.9 kb.
¡Cualquier ayuda es bienvenida!
Este proyecto todavía está muy en la fase conceptual, por lo que la retroalimentación e ideas son una contribución tan valiosa como ayudar con el código o apoyar el desarrollo.
Si tiene tiempo, realice los problemas y vea si hay algo con lo que pueda ayudar.
