react three editable
v0.8.1
️ React Three Edited sekarang menjadi bagian dari Theatre.js dan dapat ditemukan di NPM sebagai@theatre/r3f. Proyek baru secara fungsional hampir sama dengan yang ini, hanya dengan lebih banyak fitur, pemeliharaan rutin dan ... Alat Animasi! ? Kemungkinan kode R3E Anda saat ini akan berfungsi tanpa modifikasi.Bagi mereka yang belum pernah mendengar berita itu, saya sekarang juga mengerjakan Theatre.js, dan
@theatre/r3fakan menerima perbaikan dan pemeliharaan rutin sebagai ekstensi resmi Theatre.js.Dengan itu, bagaimanapun, paket ini (
react-three-editable) sudah usang mendukung@theatre/r3f. Saya mendorong Anda semua untuk memeriksanya di Theatre.js dan mengajukan masalah di sana!
React Three Edited adalah perpustakaan untuk reaksi dan reaksi-tiga serat yang memungkinkan Anda mengedit adegan Anda dalam editor visual sambil membutuhkan modifikasi minimal pada kode R3F Anda. Untuk mendapatkan gambaran singkat tentang apa itu semua, silakan lihat CodesandBox ini.
Di sini menjadi naga! ? Bereaksi tiga yang dapat diedit relatif stabil, namun menjadi perangkat lunak pra-1.0.0, API dan logika internal dapat berubah secara drastis kapan saja, tanpa peringatan.
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)
Saat membuat adegan 3D untuk react-three-fiber, Anda dapat memilih dua rute: Anda dapat mengkodekannya di R3F, yang memberi Anda reaktivitas, dan fleksibilitas yang menyertainya, atau Anda dapat menggunakan perangkat lunak 3D seperti blender dan mengekspornya, tetapi jika Anda ingin memodifikasi adegan itu secara dinamis saat runtime, Anda harus kembali ke kode yang peka terhadap kode peka.
Jalan tengah terbaik sejauh ini adalah GLTFJSX , yang menghasilkan JSX dari adegan yang diekspor Anda, namun masih melibatkan banyak pekerjaan manual jika Anda ingin membagi adegan Anda menjadi komponen, dan modifikasi apa pun yang Anda buat harus diterapkan kembali jika Anda membuat perubahan pada adegan.
Bereaksi tiga tujuan yang dapat diedit untuk mengisi celah ini dengan memungkinkan Anda mengatur adegan Anda di JSX, memberi Anda reaktivitas, sambil memungkinkan Anda untuk mengubah sifat -sifat objek ini dalam editor visual, termasuk transformasi mereka, yang kemudian dapat Anda panggang ke dalam file JSON untuk digunakan oleh runtime dalam produksi. Tujuan eksplisit dari proyek ini adalah untuk mencerminkan kode reaksi tiga serat secara teratur sebanyak mungkin. Ini memungkinkan Anda menambahkannya ke proyek yang ada dengan mudah, mengeluarkannya saat Anda tidak membutuhkannya, dan umumnya menggunakannya sesedikit atau sebanyak yang Anda inginkan, tanpa merasa terkunci.
editable Gunakan untuk membuat objek dapat diedit. Sifat-sifat pada mirror editable , elemen intrinsik reaksi-tiga serat, namun belum ada paritas penuh. Misalnya jika Anda ingin membuat <mesh> yang dapat diedit, Anda melakukannya dengan menggunakan <editable.mesh> sebagai gantinya. Elemen -elemen ini memiliki antarmuka yang sama dengan yang normal, dengan penambahan alat peraga di bawah ini. Setiap properti yang dapat diedit yang Anda atur dalam kode (seperti position ) akan digunakan sebagai titik nilai/reset awal di editor.
editable juga merupakan fungsi, yang memungkinkan Anda untuk membuat komponen khusus Anda diedit. Komponen Anda memang harus kompatibel dengan antarmuka tipe objek yang dapat diedit yang dimaksudkan untuk diwakili. Anda perlu meneruskannya komponen yang ingin Anda bungkus, dan jenis objek yang diwakilinya (lihat tipe objek).
import { editable } from 'react-three-editable' ;
import { PerspectiveCamera } from '@react-three/drei' ;
const EditableCamera = editable ( PerspectiveCamera , 'perspectiveCamera' ) ; uniqueName: string : Nama unik yang digunakan untuk mengidentifikasi objek di editor.
configure(options)Memungkinkan Anda mengkonfigurasi editor.
options.localStorageNamespace: string = '' : Memungkinkan Anda untuk namespace kunci yang digunakan untuk secara otomatis bertahan status editor dalam pengembangan. Berguna jika Anda sedang mengerjakan beberapa proyek secara bersamaan dan Anda tidak ingin satu proyek menimpa yang lain.
options.enablePersistence: boolean = true : menetapkan apakah akan mengaktifkan kegigihan atau tidak.
bind : Fungsi yang dapat Anda gunakan untuk menghubungkan kanvas untuk bereaksi tiga yang dapat diedit, lihat di bawah.
bind(options) Bind adalah fungsi kari yang Anda panggil dengan options dan mengembalikan fungsi lain yang harus dipanggil dengan gl dan scene .
Gunakan untuk mengikat Canvas untuk bereaksi tiga yang dapat diedit: <Canvas onCreated={bind(options)}> . Jika Anda menggunakan onCreated untuk hal -hal lain, Anda harus secara manual memanggil fungsi yang dikembalikan oleh bind() :
< Canvas onCreated = { ( { gl , scene } ) => {
bind ( options ) ( { gl , scene } ) ;
} } >
// ...
</ Canvas > ❓ "Cuplikan di atas terlihat salah ...": bind adalah fungsi kari, sehingga Anda tidak perlu melewati gl dan scene secara manual dalam kasus rata -rata ketika onCreated Anda kosong. Kelemahannya adalah terlihat seperti ini ketika Anda harus secara manual menyebutnya dengan gl dan scene .
options.state?: EditableState : keadaan yang diekspor sebelumnya.
options.allowImplicitInstancing: boolean = false : memungkinkan pengaruh implisit objek yang dapat diedit melalui penggunaan kembali uniqueName s. Objek -objek ini akan berbagi semua properti yang dapat diedit. Itu tidak disarankan karena Anda akan kehilangan peringatan jika Anda secara tidak sengaja menggunakan kembali uniqueName , dan akan digantikan oleh prefab di masa depan.
Bereaksi tiga yang dapat diedit saat ini mendukung jenis objek berikut:
Ini tersedia sebagai properti yang editable , dan Anda harus meneruskannya sebagai parameter kedua saat membungkus komponen khusus.
Bereaksi tiga yang dapat diedit secara otomatis menampilkan editor dalam pengembangan dan menghapusnya dalam produksi, mirip dengan bagaimana React memiliki dua bangunan yang berbeda. Untuk memanfaatkan ini, Anda harus mengatur sistem build Anda untuk menangani process.env.NODE_ENV . Jika Anda menggunakan CRA atau Next.js, ini sudah dilakukan untuk Anda.
Dalam produksi, ukuran bundel R3E adalah 2,9 kb.
Bantuan apa pun diterima!
Proyek ini masih dalam fase konsep, sehingga umpan balik dan ide -ide sama berharganya dengan kontribusi seperti membantu dengan kode, atau pengembangan pendukung.
Jika Anda punya waktu, silakan menjalani masalah ini dan melihat apakah ada sesuatu yang dapat Anda bantu.
