react three editable下載 - react three editable源代碼下載

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文件中，以在生產中運行時使用。該項目的明確目標是盡可能地鏡像常規的三纖維代碼。這使您可以輕鬆地將其添加到一個現有的項目中，在不需要時將其刪除，並且通常會根據需要使用它盡可能少地或使用它，而不會感到鎖定。

API

`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手動稱呼它時，它看起來像這樣。

配x目前，您只能連接單個畫布，但是計劃了多核粉的支持。

參數

options.state?: EditableState ：先前導出的狀態。

options.allowImplicitInstancing: boolean = false ：允許通過重複使用uniqueName s對可編輯對象的隱式實例。這些對象將共享所有可編輯的屬性。它會灰心，因為如果您不小心重複使用uniqueName ，您會錯過警告，並且將來將被預先貼上預製。