Studio 씬 에디터
4~100칸 바닥에 에셋을 끌어다 놓고, 사람을 앉히고, 루틴을 정해 .isora.json 으로 저장합니다. 같은 씬을 createSceneBuilder 로 코드에서 지을 수도 있습니다.
Studio 열기
IsoraReact 로 그리는 아이소메트릭 씬
사무실·공장·도시를 GUI 에디터로 배치하고, 저장한 JSON 을 SVG React 컴포넌트로 그립니다. 사람은 알아서 걷고, 앉고, 일합니다.
본문으로 건너뛰기
설치
bash
npm install @isora/core @isora/react @isora/assetstsx
import { createRegistry, parseScene } from '@isora/core'
import { IsoScene } from '@isora/react'
import { officialPacks } from '@isora/assets'
import sceneJson from './scenes/office.isora.json'
const scene = parseScene(sceneJson) // Studio 가 저장한 JSON 을 검증한다
const registry = createRegistry(officialPacks)
export function Office() {
return <IsoScene scene={scene} registry={registry} playBehaviors showActivities />
}데모
모두 이 사이트에서 브라우저만으로 돌아갑니다. 서버가 없습니다.
쇼케이스코드로 지은 30×30 이상 씬 열 개 — 공장 라인·파티션 오피스·스마트 시티·군부대·병동·물류 센터·데이터센터·학교·마트·공항. 시간표와 실시간 설비 상태가 돌아갑니다.쇼케이스 열기 →Studio씬 에디터. 에셋을 놓고, 사람을 앉히고, 루틴을 고치고, 타임라인을 재생합니다. 씬은 브라우저 저장소에 저장됩니다.Studio 열기 →Claude 사무실Claude Code 세션과 서브에이전트를 아이소메트릭 사무실의 사람으로. 작업 중이면 책상에서 코드, 멈추면 커피, 오래 쉬면 Zz. 말풍선을 누르면 진행 상황이 뜹니다. 여기서는 데모 데이터이고, 로컬에서 돌리면 내 세션이 보입니다.Claude 사무실 열기 →