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