react three editable
v0.8.1
ショ和 React Three Editableは現在、Theatre.jsの一部であり、NPMで@theatre/r3fとして見つけることができます。新しいプロジェクトは、機能的にはこれとほぼ同じであり、より多くの機能、定期的なメンテナンス、...アニメーションツールだけです！ ？現在のR3Eコードは、変更なしで機能する可能性があります。このニュースを聞いていない人のために、私は今もTheatre.jsに取り組んでおり、
@theatre/r3f公式のTheatre.js拡張機能として定期的な改善とメンテナンスを受けています。しかし、それに伴い、このパッケージ（
react-three-editable）@theatre/r3fを支持して非推奨されています。皆さんにcheatre.jsでチェックして、そこに問題のある問題を勧めます！
React Three Editableは、R3Fコードの変更を最小限に抑えながら、Visual Editorでシーンを編集できるReactおよびReact-3ファイバーのライブラリです。それが何であるかを簡単に理解するために、このcodeSandboxをご覧ください。
ここにドラゴンになります！ ？ React 3つの編集可能は比較的安定していますが、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-3ファイバーの3Dシーンを作成する場合、2つのルートを選択できます。R3Fでコーディングすることができます。これにより、反応性とそれに付属する柔軟性が得られます。または、Blenderなどの3Dソフトウェアを使用してエクスポートできますが、実行時にそのシーンを動的に変更したい場合は、不可欠なコードに戻る必要があります。
これまでの最高の中間点はGLTFJSXであり、エクスポートされたシーンからJSXを生成しますが、シーンをコンポーネントに分割したい場合は多くの手動作業が含まれ、シーンを変更すると変更する必要があります。
React 3つの編集可能な目的は、JSXでシーンをセットアップし、反応性を提供することにより、このギャップを埋めることを目的としています。一方、これらのオブジェクトのプロパティを視覚エディターで微調整できるようにします。このプロジェクトの明示的な目標は、できるだけ通常のReact-3-Fiberコードをミラーリングすることです。これにより、既存のプロジェクトに簡単に追加し、不要になったときに取り出し、一般的に閉じ込められていると感じることなく、必要なだけ使用します。
editableそれを使用して、オブジェクトを編集可能にします。 editableのプロパティは、反応3繊維の本質的な要素をミラーしますが、まだ完全なパリティはありません。たとえば、編集可能な<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 ：キャンバスを接続して3つの編集可能な反応に使用できる関数。以下を参照してください。
bind(options) Bindは、 optionsで呼び出すカレー機能であり、 glおよびsceneで呼び出さなければならない別の関数を返します。
それを使用してCanvasをバインドして3つの編集可能な反応： <Canvas onCreated={bind(options)}> 。他のものにもonCreatedている場合は、 bind()によって返された関数を手動で呼び出す必要があります。
< Canvas onCreated = { ( { gl , scene } ) => {
bind ( options ) ( { gl , scene } ) ;
} } >
// ...
</ Canvas > "上記のスニペットは間違っているように見えます..."： bindはカレー機能であるため、 onCreated場合の平均的な場合にglとscene手動で渡す必要はありません。欠点は、 glとsceneで手動で呼び出す必要があるときにこのように見えることです。
options.state?: EditableState ：以前にエクスポートされた状態。
options.allowImplicitInstancing: boolean = false ：eusing uniqueNameを再利用することにより、編集可能なオブジェクトを暗黙的にインスタンスすることができます。これらのオブジェクトは、すべての編集可能なプロパティを共有します。あなたが誤ってuniqueNameを再利用し、将来プレハブに取って代わられた場合、あなたは警告を逃したので、それは落胆します。
React Three Editableは現在、次のオブジェクトタイプをサポートしています。
これらはeditableプロパティとして利用可能であり、カスタムコンポーネントをラッピングするときに2番目のパラメーターとして渡す必要があります。
React Three Editableは、開発中にエディターを自動的に表示し、生産で削除します。これを利用するには、 process.env.NODE_ENV処理するためにビルドシステムをセットアップする必要があります。ENV.NODE_ENVチェック。 CRAまたはnext.jsを使用している場合、これはすでに行われています。
生産では、R3Eのバンドルサイズは2.9 kbです。
どんな助けも大歓迎です！
このプロジェクトは依然としてコンセプトフェーズにあるため、フィードバックとアイデアは、コードを支援したり、開発をサポートしたりするのと同じくらい貴重です。
時間がある場合は、問題を経て、手伝うことができるものがあるかどうかを確認してください。
