react three editable
v0.8.1
️ React Three Three قابلة للتحرير هو الآن جزء من TheAtre.js ويمكن العثور عليه على NPM كـ@theatre/r3f. المشروع الجديد هو نفسه تقريبا مثل هذا المشروع ، فقط مع المزيد من الميزات ، صيانة منتظمة و ... أدوات الرسوم المتحركة! ؟ من المحتمل أن يعمل رمز R3E الحالي الخاص بك دون أي تعديلات.بالنسبة لأولئك الذين لم يسمعوا الأخبار ، فأنا الآن أعمل أيضًا على ateatre.js ، وسيتلقى
@theatre/r3fتحسينات وصيانة منتظمة كملحق مسرحي.ومع ذلك ، يتم إهمال هذه الحزمة (
react-three-editable) لصالح@theatre/r3f. أنا أشجعكم جميعًا على التحقق من ذلك في TheAtre.js وقضايا الملف هناك!
React Three Three Three هي مكتبة لـ React و React-ثلاثة ألياف تتيح لك تحرير المشهد الخاص بك في محرر مرئي مع طلب الحد الأدنى من التعديلات على رمز R3F الخاص بك. للحصول على فكرة سريعة عما يدور حوله الأمر ، يرجى إلقاء نظرة على هذا codesandbox.
هنا يكون التنين! ؟ React Three قابل للتحرير مستقر نسبيًا ، ومع ذلك ، يمكن أن يتغير برنامج 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-ثلاثة ألياف ، يمكنك اختيار طريقين: يمكنك إما ترميزه في R3F ، مما يمنحك التفاعل ، والمرونة التي تأتي معها ، أو يمكنك استخدام برنامج ثلاثي الأبعاد مثل Blender وتصديره ، ولكن بعد ذلك ، إذا كنت ترغب في تعديل هذا المشهد في وقت التشغيل ، فسيتعين عليك العودة إلى الكود غير المتميز.
أفضل أرضية منتصف حتى الآن هي GLTFJSX ، التي تولد JSX من المشهد الذي تم تصديره ، ومع ذلك فهو لا يزال ينطوي على الكثير من العمل اليدوي إذا كنت ترغب في تقسيم المشهد الخاص بك إلى مكونات ، وأي تعديلات تقوم بها يجب إعادة تطبيقها إذا قمت بإجراء تغييرات على المشهد.
يهدف React Three Three Three إلى ملء هذه الفجوة من خلال السماح لك بإعداد المشهد الخاص بك في JSX ، مما يتيح لك التفاعل ، مع السماح لك بتعديل خصائص هذه الكائنات في محرر بصري ، بما في ذلك تحويلاتها ، والتي يمكنك بعد ذلك استخدامها في ملف JSON لاستخدامه من قبل وقت التشغيل في الإنتاج. الهدف الصريح للمشروع هو عكس رمز React-ثلاثة ألياف منتظم قدر الإمكان. يتيح لك ذلك إضافته إلى مشروع موجود بسهولة ، وأخذه عندما لا تحتاجه ، واستخدامه عمومًا أقل أو بقدر ما تريد ، دون الشعور بالمغلق.
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 هي وظيفة curried التي تتصل بها مع options وإرجاع وظيفة أخرى يجب استدعاؤها مع gl scene .
استخدمه لربط Canvas للرد على ثلاثة قابلة للتحرير: <Canvas onCreated={bind(options)}> . إذا كنت تستخدم onCreated لأشياء أخرى أيضًا ، فيجب عليك الاتصال يدويًا بالوظيفة التي تم إرجاعها بواسطة bind() :
< Canvas onCreated = { ( { gl , scene } ) => {
bind ( options ) ( { gl , scene } ) ;
} } >
// ...
</ Canvas > ❓ "المقتطف أعلاه يبدو خاطئًا ...": bind هو وظيفة مجهدة ، بحيث لا تضطر إلى تمرير gl scene يدويًا في الحالة المتوسطة عندما يكون onCreated الخاص بك فارغًا. الجانب السلبي هو أنه يبدو هذا عندما تضطر إلى الاتصال به يدويًا مع gl scene .
options.state?: EditableState : حالة تم تصديرها مسبقًا.
options.allowImplicitInstancing: boolean = false : يسمح بالتحديد الضمني للكائنات القابلة للتحرير من خلال إعادة استخدام uniqueName s. ستشارك هذه الكائنات جميع الخصائص القابلة للتحرير. إنه أمر محبط لأنك ستفقد التحذيرات إذا قمت بإعادة استخدام اسم uniqueName عن طريق الخطأ ، وسيتم استبدالها من قبل المسبقين في المستقبل.
رد فعل ثلاثة قابلة للتحرير يدعم حاليًا أنواع الكائنات التالية:
هذه متوفرة كخصائص editable ، وتحتاج إلى تمريرها كمعلمة ثانية عند لف مكونات مخصصة.
يعرض React Three القابل للتحرير تلقائيًا المحرر في التطوير ويزيله في الإنتاج ، على غرار كيف أن React له مباني مختلفة. للاستفادة من هذا ، تحتاج إلى إعداد نظام الإنشاء الخاص بك للتعامل مع process.env.NODE_ENV الشيكات. env.node_env. إذا كنت تستخدم CRA أو Next.js ، فسيتم ذلك بالفعل من أجلك.
في الإنتاج ، يبلغ حجم حزمة R3E 2.9 كيلو بايت.
أي مساعدة مرحب بها!
لا يزال هذا المشروع كثيرًا في مرحلة المفهوم ، لذا فإن التعليقات والأفكار هي بنفس قيمة المساهمة مثل المساعدة في الكود ، أو دعم التطوير.
إذا كان لديك وقت ، فيرجى الاطلاع على المشكلات ومعرفة ما إذا كان هناك أي شيء يمكنك المساعدة فيه.
