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ฉันขอแนะนำให้คุณทุกคนตรวจสอบที่ Theatre.js และปัญหาไฟล์ที่นั่น!
React Three Editable เป็นห้องสมุดสำหรับ React และ React-Three-Fiber ที่ให้คุณแก้ไขฉากของคุณในตัวแก้ไขภาพในขณะที่ต้องมีการปรับเปลี่ยนรหัส R3F ของคุณน้อยที่สุด หากต้องการทราบอย่างรวดเร็วว่ามันเป็นเรื่องเกี่ยวกับอะไรโปรดดูที่ CodeSandbox นี้
นี่คือมังกร! - React สามแก้ไขได้ค่อนข้างเสถียร แต่เป็นซอฟต์แวร์ pre-16.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)
เมื่อสร้างฉาก 3 มิติสำหรับ React-Three-Fiber คุณสามารถเลือกสองเส้นทาง: คุณสามารถกำหนดรหัสใน R3F ซึ่งให้ปฏิกิริยาและความยืดหยุ่นที่มาพร้อมกับมันหรือคุณสามารถใช้ซอฟต์แวร์ 3D เช่น Blender และส่งออก แต่ถ้าคุณต้องการปรับเปลี่ยนฉากนั้น
กราวด์กลางที่ดีที่สุดจนถึงตอนนี้คือ GLTFJSX ซึ่งสร้าง JSX จากฉากที่ส่งออกของคุณอย่างไรก็ตามมันยังคงเกี่ยวข้องกับการทำงานด้วยตนเองจำนวนมากหากคุณต้องการแบ่งฉากของคุณออกเป็นส่วนประกอบและการดัดแปลงใด ๆ ที่คุณทำจะต้องนำกลับมาใช้ใหม่หากคุณทำการเปลี่ยนแปลงฉาก
ตอบสนองสามเป้าหมายที่แก้ไขได้เพื่อเติมเต็มช่องว่างนี้โดยช่วยให้คุณตั้งค่าฉากของคุณใน JSX ให้ปฏิกิริยาตอบสนองในขณะที่ให้คุณปรับแต่งคุณสมบัติของวัตถุเหล่านี้ในตัวแก้ไขภาพรวมถึงการแปลงซึ่งคุณสามารถอบเข้าไฟล์ JSON เพื่อใช้งานโดยรันไทม์ในการผลิต เป้าหมายที่ชัดเจนของโครงการคือการสะท้อนโค้ด React-Three-Three-Three มากที่สุดเท่าที่จะทำได้ สิ่งนี้ช่วยให้คุณเพิ่มลงในโครงการที่มีอยู่ได้อย่างง่ายดายนำออกมาเมื่อคุณไม่ต้องการและใช้โดยทั่วไปน้อยหรือมากเท่าที่คุณต้องการโดยไม่รู้สึกล็อค
editable ใช้เพื่อให้วัตถุแก้ไขได้ คุณสมบัติเกี่ยวกับกระจก editable องค์ประกอบที่แท้จริงของ React-Three-three-fiber อย่างไรก็ตามยังไม่มีความเท่าเทียมกันอย่างเต็มที่ เช่นหากคุณต้องการสร้าง <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 เป็นฟังก์ชั่นแกงกะหรี่เพื่อที่คุณจะได้ไม่ต้องผ่าน gl และ scene ด้วยตนเองในกรณีโดยเฉลี่ยเมื่อคุณ onCreated ว่างเปล่า ข้อเสียคือดูเหมือนว่าเมื่อคุณต้องเรียกมันด้วย gl และ scene ด้วยตนเอง
options.state?: EditableState : สถานะที่ส่งออกก่อนหน้านี้
options.allowImplicitInstancing: boolean = false : อนุญาตให้ใช้งานโดยปริยายของวัตถุที่แก้ไขได้ผ่านการใช้ uniqueName s วัตถุเหล่านี้จะแบ่งปันคุณสมบัติที่แก้ไขได้ทั้งหมด มันท้อแท้เนื่องจากคุณจะพลาดคำเตือนหากคุณใช้ uniqueName ซ้ำโดยไม่ตั้งใจและจะถูกแทนที่โดยสำเร็จรูปในอนาคต
ตอบสนองสามในปัจจุบันที่แก้ไขได้สนับสนุนประเภทวัตถุต่อไปนี้:
สิ่งเหล่านี้มีให้เป็นคุณสมบัติของ editable และคุณต้องส่งผ่านเป็นพารามิเตอร์ที่สองเมื่อห่อส่วนประกอบที่กำหนดเอง
React สาม Editable จะแสดงตัวแก้ไขโดยอัตโนมัติในการพัฒนาและลบออกในการผลิตเช่นเดียวกับวิธีการที่ React มีสอง builds ที่แตกต่างกัน ในการใช้ประโยชน์จากสิ่งนี้คุณต้องตั้งค่าระบบบิลด์ของคุณเพื่อจัดการการตรวจสอบ process.env.NODE_ENV หากคุณใช้ CRA หรือ next.js สิ่งนี้จะทำเพื่อคุณแล้ว
ในการผลิตขนาดชุดของ R3E คือ 2.9 kb
ยินดีต้อนรับความช่วยเหลือ!
โครงการนี้ยังคงอยู่ในขั้นตอนแนวคิดเป็นอย่างมากดังนั้นข้อเสนอแนะและความคิดจึงมีคุณค่าเช่นเดียวกับการช่วยเหลือรหัสหรือสนับสนุนการพัฒนา
หากคุณมีเวลาโปรดผ่านปัญหาและดูว่ามีอะไรที่คุณสามารถช่วยได้หรือไม่
