react three editable
v0.8.1
️ React Three Reditable fait désormais partie de Theatre.js et peut être trouvé sur NPM en tant que@theatre/r3f. Le nouveau projet est fonctionnellement presque le même que celui-ci, avec plus de fonctionnalités, de maintenance régulière et ... des outils d'animation! ? Les chances sont que votre code R3E actuel fonctionnera sans aucune modification.Pour ceux qui n'ont pas entendu les nouvelles, je travaille maintenant également sur theatre.js, et
@theatre/r3frecevra des améliorations et une maintenance régulières en tant qu'extension officielle de Theatre.js.Avec cela, cependant, ce package (
react-three-editable) est obsolète en faveur de@theatre/r3f. Je vous encourage tous à le vérifier sur theatre.js et à y déposer des problèmes!
React Three Reditable est une bibliothèque pour React et React-Three-Fibre qui vous permet de modifier votre scène dans un éditeur visuel tout en nécessitant des modifications minimales à votre code R3F. Pour avoir une idée rapide de ce dont il s'agit, veuillez jeter un œil à cette boîte de codes.
Voici des dragons! ? React trois modifiables est relativement stable, mais étant un logiciel avant 1,0.0, l'API et la logique interne peuvent changer radicalement à tout moment, sans avertissement.
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 >
) ;
}(Codes et boîte)
Lors de la création d'une scène 3D pour React-Three-Fibre, vous pouvez choisir deux itinéraires: vous pouvez soit le coder dans R3F, ce qui vous donne la réactivité, et la flexibilité qui l'accompagne, soit utiliser un logiciel 3D comme le mélangeur et l'exporter, mais si vous souhaitez modifier dynamiquement cette scène à l'exécution, vous devrez vous reporter à un code impératif.
Jusqu'à présent, le meilleur terrain d'entente a été GLTFJSX , qui génère JSX à partir de votre scène exportée, mais elle implique toujours beaucoup de travail manuel si vous souhaitez diviser votre scène en composants, et toutes les modifications que vous apportez devront être réappliquées si vous apportez des modifications à la scène.
Réagir trois objectifs modifiables à combler cette lacune en vous permettant de configurer votre scène dans JSX, vous donnant une réactivité, tout en vous permettant de modifier les propriétés de ces objets dans un éditeur visuel, y compris leurs transformations, que vous pouvez ensuite faire des cuisson dans un fichier JSON à utiliser par l'exécution dans la production. Un objectif explicite du projet est de refléter autant que possible le code React-Three-Fibre régulier. Cela vous permet de l'ajouter à un projet existant avec facilité, de le retirer lorsque vous n'en avez pas besoin et de l'utiliser généralement aussi peu ou autant que vous le souhaitez, sans vous sentir enfermé.
editable Utilisez-le pour rendre les objets modifiables. Les propriétés sur editable reflètent les éléments intrinsèques de React-Three-Fibre, mais il n'y a pas encore de parité complète. Par exemple, si vous souhaitez créer un <mesh> modifiable, vous le faites en utilisant <editable.mesh> à la place. Ces éléments ont la même interface que celles normales, avec l'ajout des accessoires ci-dessous. Toute propriété modifiable que vous définissez dans le code (comme position ) sera utilisée comme point de valeur / réinitialisation initial dans l'éditeur.
editable est également une fonction, qui vous permet de rendre vos composants personnalisés modifiables. Votre composant doit être compatible avec l'interface du type d'objet modifiable qu'il est censé représenter. Vous devez le transmettre le composant que vous souhaitez envelopper et le type d'objet qu'il représente (voir types d'objets).
import { editable } from 'react-three-editable' ;
import { PerspectiveCamera } from '@react-three/drei' ;
const EditableCamera = editable ( PerspectiveCamera , 'perspectiveCamera' ) ; uniqueName: string : Un nom unique utilisé pour identifier l'objet dans l'éditeur.
configure(options)Vous permet de configurer l'éditeur.
options.localStorageNamespace: string = '' : vous permet d'espace de noms la clé utilisée pour persister automatiquement l'état de l'éditeur en développement. Utile si vous travaillez sur plusieurs projets en même temps et que vous ne voulez pas qu'un projet écrase l'autre.
options.enablePersistence: boolean = true : Définit ou non de permettre la persistance.
bind : une fonction que vous pouvez utiliser pour connecter des toiles pour réagir trois modifiables, voir ci-dessous.
bind(options) Bind est une fonction au curry que vous appelez avec options et renvoie une autre fonction qui doit être appelée avec gl et scene .
Utilisez-le pour lier une Canvas pour réagir trois modifiables: <Canvas onCreated={bind(options)}> . Si vous utilisez également onCreated d'autres choses, vous devez appeler manuellement la fonction renvoyée par bind() :
< Canvas onCreated = { ( { gl , scene } ) => {
bind ( options ) ( { gl , scene } ) ;
} } >
// ...
</ Canvas > ❓ "Le extrait ci-dessus a l'air mal ...": bind est une fonction au curry, afin que vous n'ayez pas à passer gl et scene manuellement dans le cas moyen lorsque votre onCreated est vide. L'inconvénient est que cela ressemble à ceci lorsque vous devez l'appeler manuellement avec gl et scene .
options.state?: EditableState : un état précédemment exporté.
options.allowImplicitInstancing: boolean = false : permet un instance implicite d'objets modifiables en réutilisant uniqueName s. Ces objets partageront toutes les propriétés modifiables. Il est découragé car vous manquerez des avertissements si vous réutilisez accidentellement un uniqueName et que vous serez remplacé par des préfabriqués à l'avenir.
React trois modifiables prend actuellement en charge les types d'objets suivants:
Ceux-ci sont disponibles en tant que propriétés de editable , et vous devez les transmettre comme deuxième paramètre lors de l'enveloppe des composants personnalisés.
React Three Editable affiche automatiquement l'éditeur en développement et le supprime en production, de façon similaire à la façon dont React a deux versions différentes. Pour en utiliser, vous devez faire configurer votre système de construction pour gérer process.env.NODE_ENV . Si vous utilisez CRA ou Next.js, cela est déjà fait pour vous.
En production, la taille du faisceau de R3E est de 2,9 kb.
Toute aide est la bienvenue!
Ce projet est toujours dans la phase de concept, donc les commentaires et les idées sont tout aussi précieux qu'une contribution que d'aider au code ou de soutenir le développement.
Si vous avez le temps, veuillez passer par les problèmes et voir s'il y a quelque chose avec lequel vous pouvez vous aider.
