react three editable
v0.8.1
配x React Triex Edable现在已成为Theatre.js的一部分，可以在NPM上以@theatre/r3f形式找到。新项目在功能上几乎与此项目相同，只有更多功能，常规维护和...动画工具！ ？您当前的R3E代码的可能性将无需任何修改。对于那些尚未听到这个消息的人，我现在也在theatre.js上工作，
@theatre/r3f将作为正式的Theatre.js扩展名进行定期改进和维护。但是，此软件包（
react-three-editable）被弃用了@theatre/r3f的支持。我鼓励大家在theatre.js上检查一下，并在那里提交问题！
React Three可编辑是一个用于React和React三纤维的库，可让您在视觉编辑器中编辑场景，同时需要对R3F代码进行最小的修改。要快速了解它的全部内容，请查看此代码框。
这是龙！ ？ React Three Edyable相对稳定，但是是1.0.0 Predable，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）
当创建3D反应纤维的3D场景时，您可以选择两条路线：您可以在R3F中进行编码，从而为您提供反应性和随之而来的灵活性，或者您可以使用Blender等3D软件并导出它并导出它，但是如果您想在运行时动态修改该场景，则必须回到有障碍的代码中。
到目前为止，最好的中间立场是GLTFJSX ，它从导出的场景中生成JSX，但是如果您想将场景分成组件，它仍然涉及大量的手动工作，如果您对场景进行更改，则必须重新应用任何修改。
React三个可编辑的目的是通过允许您在JSX中设置场景，使您的反应性填补这一空白，同时允许您在视觉编辑器中调整这些对象的属性，包括它们的转换，然后您可以将其烘烤到JOSON文件中，以在生产中运行时使用。该项目的明确目标是尽可能地镜像常规的三纤维代码。这使您可以轻松地将其添加到一个现有的项目中，在不需要时将其删除，并且通常会根据需要使用它尽可能少地或使用它，而不会感到锁定。
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 ：您可以用来连接帆布以反应三个可编辑的函数，请参见下文。
bind(options) bind是您使用options调用的咖喱功能，并返回必须使用gl和scene调用的另一个功能。
用它来绑定Canvas以反应三个可编辑： <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 ：允许通过重复使用uniqueName s对可编辑对象的隐式实例。这些对象将共享所有可编辑的属性。它会灰心，因为如果您不小心重复使用uniqueName ，您会错过警告，并且将来将被预先贴上预制。
反应三个可编辑当前支持以下对象类型：
这些可作为editable的属性可用，在包装自定义组件时，您需要将它们作为第二个参数传递。
React三个可编辑可以自动显示编辑器在开发中，并在生产中删除它，与React具有两个不同的构建类似。为了利用此功能，您需要设置构建系统以处理process.env.NODE_ENV检查。如果您使用的是CRA或Next.js，则已经为您完成。
在生产中，R3E的束大小为2.9 kb。
欢迎任何帮助！
该项目仍在概念阶段非常重要，因此反馈和想法与帮助代码或支持开发一样有价值。
如果您有时间，请解决问题，看看是否有任何帮助。
