MV Core Library

MV 본부의 인터렉션 런타임, 3D 렌더러를 관리하는 코어 라이브러리입니다.

Get Started

npm set registry http://192.168.153.214:4873

npm i @mv/core

Use Case

import { MxCanvasCore } from "@mv/core";

const data = {
  ...
}

const App = () => {
  return (
    <div>
      <MxCanvasCore data={data} mode="play"/>
    </div>
  );
};

MX Core Library Specification

data

const data = {
  scene: ...,
  interaction: ...,
  editableInteraction: ...,
}

| props | description | note | | ------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------ | | scene | Three.js Scene 데이터 구조와 동일 | Three.js JSON fotmat | | interaction | MX Studio 인터랙션 에디터 참조 | | | editableInteraction | MX 상위 스튜디오에서 변경가능한 인터랙션 | | | sceneSetting | Scene Setting에 관한 정보 | SceneSetting |

mode

| enum | value | | ---- | ------ | | PLAY | "play" | | EDIT | "edit" |

SceneSetting

| props | description | note | | -------------- | ---------------------- | --------------------------- | | environment | 환경광에 해당하는 정보 | Environment | | postprocessing | | |

Environment

| props | description | type | default | | ---------- | --------------------------------------------- | ------- | ---------------------------- | | enabled | 환경광 적용 유무 | Boolean | false | | background | 배경 적용 유무 | Boolean | false | | hdriFile | hdri 파일 주소 | String | null | | rotation | Environment 하위 sphere mesh 회전값 | Object | {x:0, y:0, z:0, order:"XYZ"} | | distance | Environment 하위 sphere mesh 거리 | Number | 200 | | intensity | Environment 하위 sphere mesh 머터리얼 opacity | Number | 1 | | near | Environment near prop | Number | 1 | | far | Environment far prop | Number | 1000 | | resolution | Environment resolution prop | String | | | frames | Environment frames prop | Number | 1 | | blur | Environment blur prop | Number | 0 |

PostProcessing

| props | description | type | default | | -------------------- | -------------------------------------------------------------------------- | ------- | ------- | | depthBufferEnabled | Whether the main render targets should have a depth buffer. | Boolean | true | | normalPassDisabled | NormalPass 여부 | Boolean | true | | stencilBufferEnabled | Whether the main render targets should have a stencil buffer. | Boolean | false | | autoClearEnabled | RenderPass에서의 버퍼 자동 clear 옵션 | Boolean | false | | multisampling | The number of samples used for multisample antialiasing. Requires WebGL 2. | Number | 8 | | resolutionScale | DepthDownsamplingPass의 resolutionScale | Number | 0.5 | | passes | EffectPass에서 후처리할 효과들의 명세를 작성해서 배열로 입력. | Array | [] |

Outline

| props | description | type | default | | ---------------- | ------------------------------------------------------------- | ---------- | --------------------- | | uuid | 고유한 id, 필수 | string | | | selectedIds | 효과가 나타날 오브젝트의 uuid | Array | [] | | selectionLayer | 입력하지 않을 시, 고유한 selectionLayer 부여 | Number | | | patternTexture | A pattern texture | Number | null | | edgeStrength | The edge strength | Number | 1 | | pulseSpeed | The pulse speed. A value of zero disables the pulse effect. | Number | 0 | | visibleEdgeColor | The color of visible edges. | Number | 0xffffff | | hiddenEdgeColor | The color of hidden edges. | Number | 0x22090a | | kernelSize | The blur kernel size. | KernelSize | KernelSize.VERY_SMALL | | blur | Whether the outline should be blurred. | Boolean | false | | xRay | Whether occluded parts of selected objects should be visible. | Boolean | true |

EditableProps For PMX

| props | description | type | default | | ----- | ----------------------------------------- | ---- | ------- | | [key] | PMX와 UX에서 사용하기 위한 유니크한 키 값 | |

EditableProp For PMX

| props | description | type | default | | ----- | ----------------------------------------------------------------------- | -------------------------- | ------- | | type | Editable Props Value의 타입 | Vector3, Color, Boolean... | | | name | Editable Props의 식별가능한 name / ex)"Cone(1)" | String | | | ref | Editable Props의 참조할 대상 / "[props]/[uuid] or undefined/property.." | String | | | value | Editable Props의 참조 대상의 초깃값 / ex) { x: 0, y: 0, z: 0 } | | |

EditableProps For UX

| props | description | type | default | | ----- | ----------------------------------------- | ---- | ------- | | [key] | PMX와 UX에서 사용하기 위한 유니크한 키 값 | |

EditableProp For UX

| props | description | type | default | | ----- | ----------------------------------------------- | ------ | ------- | | name | Editable Props의 식별가능한 name / ex)"Cone(1)" | String | | | value | Editable Props Value | | |

EditableProp Type

| type | description | example | | ------- | ---------------------------------------- | ---------------------------------- | | Vector3 | position/scale/rotation 등에 사용되는 값 | { x: 0, y: 0, z: 0} | | Euler | position/scale/rotation 등에 사용되는 값 | { x: 0, y: 0, z: 0, order: "XYZ" } | | Boolean | | false | | String | | "Cone" | | Number | | 1 | | Color | | "#ffffff" |

EditableProps Use Case

// Mx Studio의 PMX
// 스튜디오는 수정 가능한 대상의 프로퍼티를 editableProps에 정의한다

{
  scene: ...,
  interactions: ...,
  editableProps: {
    editable_value_1: {
      type: "Vector3",
      name: "Cone(1)",
      ref: "scene/e4f14ced-8cc6-4efc-a0b5-61e13ffc3102/position",
    },
    editable_value_2: {
      type: "Color",
      name: "Cone(1)",
      ref: "scene/c8fd0540-3d1e-44c2-84a6-5b809638b209/material/color",
    },
  },
}

import { MxCanvasCore } from '@mv/core';

// UX에서는 PMX에 정의된 에디터블 프롭스를 바라본다
// 수정하길 원하는 대상의 키 값을 동일하게 주고 원하는 타입에 맞춰 value를 구성한다
// 이후 MxCanvasCore의 editableProps로 넘겨주면 된다

const editableProps = {
  editable_value_1: {
    name: "Cone(1)",
    value: { x: 2, y: 1, z: 1 },
  },
  editable_value_2: {
    name: "Cone(1)",
    value: "#000000",
  },
}

const App = () => {
  return <MxCanvasCore data={pmx} mode={mode} editableProps={editableProps} >
}