react three editable
v0.8.1
켈 React Three 편집 가능성은 이제 Theatre.js의 일부이며 NPM에서@theatre/r3f로 찾을 수 있습니다. 새로운 프로젝트는 기능적 으로이 프로젝트와 거의 동일합니다. 더 많은 기능, 정기적 인 유지 보수 및 ... 애니메이션 도구! ? 현재 R3E 코드는 수정없이 작동 할 가능성이 있습니다.뉴스를 듣지 못한 사람들을 위해, 나는 이제 Theatre.js에서 일하고 있으며
@theatre/r3f공식 Theatre.js 확장으로 정기적으로 개선 및 유지 보수를받을 것입니다.그러나이 패키지 (
react-three-editable)는@theatre/r3f에 찬성하여 더 이상 사용되지 않습니다. Theatre.js에서 확인하고 파일 문제를 확인하는 것이 좋습니다.
React Three Editable은 R3F 코드를 최소한으로 수정 해야하는 반응 및 반응 3 개 섬유를위한 라이브러리입니다. 그것이 무엇인지에 대한 간단한 아이디어를 얻으려면이 코드 및 박스를 살펴보십시오.
여기 드래곤! ? React Three 편집 가능성은 상대적으로 안정적이지만 1.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)
React-Three-Fiber의 3D 장면을 만들 때 두 가지 경로를 선택할 수 있습니다. R3F로 코딩 할 수 있습니다. R3F로 코딩 할 수 있습니다. 이는 반응성과 함께 제공되는 유연성을 제공하거나 Blender와 같은 3D 소프트웨어를 사용하여 런타임에 해당 장면을 동적으로 수정하려면 명령 코드로 넘어 가야합니다.
지금까지 최고의 중간지면은 내보내기 장면에서 JSX를 생성하는 GLTFJSX 였습니다. 그러나 장면을 구성 요소로 분할하려면 여전히 많은 수동 작업이 포함되며 장면을 변경하면 수정해야합니다.
JSX에서 장면을 설정하여 반응성을 부여하여 반응성을 제공하는 동시에이 간격을 채우는 데 반응하는 세 가지 편집 가능한 목표를 제공하고, 변환을 포함하여 시각적 편집기에서 이러한 객체의 속성을 조정할 수있게되면, 제작에서 런타임으로 JSON 파일로 굽을 수 있습니다. 이 프로젝트의 명백한 목표는 가능한 한 정기적 인 React-Three-Fiber 코드를 반영하는 것입니다. 이를 통해 기존 프로젝트에 쉽게 추가하고 필요하지 않을 때 꺼내고 일반적으로 잠긴 느낌없이 원하는만큼 또는 많이 사용할 수 있습니다.
editable 객체를 편집 할 수 있도록 사용하십시오. editable 특성은 반응 3 개 섬유의 고유 한 요소를 미러링하지만 아직 완전한 패리티는 없습니다. 예 : 편집 가능한 <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 으로 호출하는 Curried 함수이며 gl 및 scene 으로 호출되어야하는 다른 기능을 반환합니다.
이를 사용하여 Canvas 바인드하여 세 가지 편집 가능성을 반응합니다. <Canvas onCreated={bind(options)}> . 다른 것들에 대해서도 onCreated 사용하는 경우 bind() 에 의해 반환 된 함수를 수동으로 호출해야합니다.
< Canvas onCreated = { ( { gl , scene } ) => {
bind ( options ) ( { gl , scene } ) ;
} } >
// ...
</ Canvas > "위의 스 니펫은 틀린 것 같습니다 ...": bind 는 카레 기능이므로 onCreated 비어있는 경우 평균 케이스에서 gl 과 scene 수동으로 통과 할 필요가 없습니다. 단점은 gl 과 scene 으로 수동으로 호출해야 할 때 이렇게 보인다는 것입니다.
options.state?: EditableState
options.allowImplicitInstancing: boolean = false : uniqueName 을 재사용하여 편집 가능한 개체의 암시 적 인스턴스를 허용합니다. 이 개체는 모든 편집 가능한 속성을 공유합니다. 실수로 uniqueName 재사용하고 앞으로의 사전 랩에 의해 대체 될 경우 경고를 놓칠 수 있기 때문에 낙담합니다.
반응 세 가지 편집 가능한 반응 현재 다음 객체 유형을 지원합니다.
이들은 editable 속성으로 제공되며 사용자 정의 구성 요소를 포장 할 때 두 번째 매개 변수로 전달해야합니다.
React Three 편집 가능성은 개발 분야의 편집기를 자동으로 표시하고 React가 두 가지 다른 빌드를 갖는 방식과 유사하게 생산에서 제거합니다. 이를 사용하려면 process.env.NODE_ENV Checks를 처리하기 위해 빌드 시스템을 설정해야합니다. CRA 또는 Next.js를 사용하는 경우 이미 완료되었습니다.
생산에서 R3E의 번들 크기는 2.9kb입니다.
모든 도움이 환영합니다!
이 프로젝트는 여전히 개념 단계에있어 매우 많으므로 피드백과 아이디어는 코드를 돕거나 개발을 지원하는 것만 큼 가치가 있습니다.
시간이 있다면 문제를 살펴보고 도움을 줄 수있는 것이 있는지 확인하십시오.
