react three editable

Reaja três editáveis

️ O React Three Editable agora faz parte do Theatre.js e pode ser encontrado no NPM como @theatre/r3f . O novo projeto é funcionalmente quase o mesmo, apenas com mais recursos, manutenção regular e ... ferramentas de animação! ? Provavelmente, o seu código R3E atual funcionará sem nenhuma modificação.

Para aqueles que não ouviram as notícias, agora também estou trabalhando no Theatre.js, e @theatre/r3f receberá melhorias regulares e manutenção como uma extensão oficial de teatro.js.

Com isso, no entanto, este pacote ( react-three-editable ) está preso a favor do @theatre/r3f . Encorajo todos vocês a conferir no Theatre.js e arquivar problemas lá!

O React Three Editable é uma biblioteca para reação e reagir-três fibras que permite editar sua cena em um editor visual, exigindo modificações mínimas para o seu código R3F. Para ter uma idéia rápida do que se trata, dê uma olhada nesse código e caixa de código.

Aqui estão os dragões! ? O React Three editável é relativamente estável, no entanto, sendo o software pré-1.0.0, a API e a lógica interna podem mudar drasticamente a qualquer momento, sem aviso prévio.

Início rápido

 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 >
  ) ;
}

(Código e caixa)

Por que

Ao criar uma cena em 3D para a fibra de três três anos, você pode escolher duas rotas: você pode codificá-lo no R3F, o que oferece a reatividade e a flexibilidade que o acompanha, ou você pode usar um software 3D como o liquidificador e exportá-lo, mas, se deseja modificar dinamicamente essa cena em tempo de execução, terá que cair de volta para o código imperativo.

O melhor meio termo até agora foi o GLTFJSX , que gera JSX a partir da sua cena exportada, no entanto, ainda envolve muito trabalho manual se você quiser dividir sua cena em componentes, e quaisquer modificações que você fizer precisarão ser reaplicadas se você fizer alterações na cena.

Reaja três objetivos editáveis para preencher essa lacuna, permitindo que você configure sua cena no JSX, dando -lhe reatividade, permitindo que você ajuste as propriedades desses objetos em um editor visual, incluindo suas transformações, que você pode assar em um arquivo json a ser usado pelo tempo de execução na produção. Um objetivo explícito do projeto é refletir o código regular de reacto-três fibras o máximo possível. Isso permite adicioná -lo a um projeto existente com facilidade, retire -o quando não precisar e geralmente o use o mínimo ou o quanto quiser, sem se sentir trancado.

API

editable

Use -o para tornar os objetos editáveis. As propriedades no espelho editable espelham os elementos intrínsecos da fibra de reação e três, no entanto, ainda não há paridade total. Por exemplo, se você deseja criar um <mesh> editável, você faz isso usando <editable.mesh> em vez disso. Esses elementos têm a mesma interface que os normais, com a adição dos adereços abaixo. Qualquer propriedade editável que você definir no código (como position ) será usada como um valor inicial/ponto de redefinição no editor.

editable também é uma função, que permite que você torne seus componentes personalizados editáveis. Seu componente deve ser compatível com a interface do tipo de objeto editável que ele deve representar. Você precisa passar o componente que deseja envolver e o tipo de objeto que ele representa (consulte os tipos de objeto).

 import { editable } from 'react-three-editable' ;
import { PerspectiveCamera } from '@react-three/drei' ;

const EditableCamera = editable ( PerspectiveCamera , 'perspectiveCamera' ) ; 

Adereços

uniqueName: string : um nome exclusivo usado para identificar o objeto no editor.

configure(options)

Permite configurar o editor.

Parâmetros

options.localStorageNamespace: string = '' : permite o nome de nome da chave usada para persistir automaticamente no estado do editor em desenvolvimento. Útil se você estiver trabalhando em vários projetos ao mesmo tempo e não deseja que um projeto substitua o outro.

options.enablePersistence: boolean = true : define se deve permitir a persistência ou não.

Retorna

bind : uma função que você pode usar para conectar telas para reagir três editáveis, veja abaixo.

bind(options)

Bind é uma função ao curry que você chama com options e retorna outra função que deve ser chamada com gl e scene .

Use -o para ligar uma Canvas para reagir três editáveis: <Canvas onCreated={bind(options)}> . Se você usar onCreated para outras coisas também, deve chamar manualmente a função retornada por bind() :

 < Canvas onCreated = { ( { gl , scene } ) => {
  bind ( options ) ( { gl , scene } ) ;
} } >
  // ...
</ Canvas >

❓ "O trecho acima parece errado ...": bind é uma função ao curry, para que você não precise passar gl e scene manualmente no caso médio quando o seu onCreated está vazio. A desvantagem é que fica assim quando você precisa chamá -lo manualmente com gl e scene .

️ Por enquanto, você pode conectar apenas uma única tela, no entanto, o suporte a várias canvas está planejado.

Parâmetros

options.state?: EditableState : um estado exportado anteriormente.

options.allowImplicitInstancing: boolean = false : Permite instanciamento implícito de objetos editáveis através da reutilização uniqueName s. Esses objetos compartilharão todas as propriedades editáveis. É desencorajado, pois você perderá avisos se reutilizarem acidentalmente um uniqueName e será substituído pelos pré -fabricados no futuro.

Tipos de objetos

Reaja três editáveis atualmente suporta os seguintes tipos de objeto:

• grupo
• malha
• Spotlight
• DirecçãoLight
• luz de ponta
• PerspectiveCamera
• Orthographiccamera

Eles estão disponíveis como propriedades de editable e você precisa passá -los como o segundo parâmetro ao envolver componentes personalizados.

Building de produção/desenvolvimento

Reaja três editáveis exibem automaticamente o editor em desenvolvimento e o remove na produção, da mesma forma como o React tem duas construções diferentes. Para fazer uso disso, você precisa configurar seu sistema de compilação para lidar com process.env.NODE_ENV verificações. Se você estiver usando CRA ou Next.js, isso já foi feito para você.

Na produção, o tamanho do pacote de R3E é de 2,9 kb.

Contribuindo

Qualquer ajuda é bem -vinda!

Este projeto ainda está muito na fase conceitual; portanto, feedback e idéias são uma contribuição tão valiosa quanto ajudar com o código ou apoiar o desenvolvimento.

Se você tiver tempo, analise os problemas e veja se há algo com o qual você possa ajudar.