Skip to content
Permalink
Browse files

feat(inspectorEngine): show sphere and camera

  • Loading branch information...
AmyOrz committed Mar 29, 2019
1 parent f98b88f commit 938daedec5b810d5142055d48cefb129ae9e4f32
@@ -1253,11 +1253,6 @@ html, body {
.wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent .wonder-inspector-component .wonder-three-float-input .inspector-item .component-label {
margin-left: 0 !important;
justify-content: center; }
.wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent .wonder-inspector-component canvas {
margin-top: 50px;
width: 100%;
height: 200px;
border: 1px solid red; }
.wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent .wonder-inspector-component .wonder-inspector-sceneTree {
padding-top: 5px; }
.wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent .wonder-inspector-component .wonder-inspector-sceneTree .sceneTree-name h1 {
@@ -2747,6 +2742,19 @@ html, body {
margin-left: 15px;
align-items: center;
justify-content: center; }
.wonder-app-component .wonder-mainEditor-component .right-component .inspector-canvas-parent {
width: 100%;
height: 200px;
position: relative;
border: 1px solid red;
margin-bottom: 50px; }
.wonder-app-component .wonder-mainEditor-component .right-component .inspector-canvas-parent canvas {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10; }
.wonder-app-component .wonder-app-shell {
width: 100%;
height: 100%; }
@@ -12,4 +12,18 @@
@import "../../../utils/_scrollBarUtils.scss";
@import "component/inspector/inspector";
}
.inspector-canvas-parent{
width:100%;
height:200px;
position: relative;
margin-bottom:50px;
canvas{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10;
}
}
}
@@ -2,12 +2,6 @@
.wonder-inspector-component {
@import "../../../../ui/floatInput";
@import "../../../../ui/threeFloatInput";
canvas{
margin-top:50px;
width:100%;
height:200px;
border:1px solid red;
}
.wonder-inspector-sceneTree {
padding-top: 5px;
@include inspectorItem("sceneTree-name");
@@ -52,7 +52,6 @@ let render = ((uiState, dispatchFunc), addableComponentConfig, _self) => {
),
)
}
<canvas id="inspector-canvas" key="inspectorCanvas" />
</article>;
};

@@ -40,9 +40,12 @@ let _buildElementBeforeInitEngine = (uiState, dispatchFunc) =>
</div>
<div key="rightComponent" className="right-component">
<div className="inline-component inspector-parent">
<article key="inspector" className="wonder-inspector-component">
<div
id="inspectorCanvasParent"
key="inspectorCanvasParent"
className="inspector-parent">
<canvas id="inspector-canvas" key="inspectorCanvas" />
</article>
</div>
</div>
</div>
</article>;
@@ -68,6 +71,12 @@ let _buildElementAfterInitEngine = (uiState, dispatchFunc) =>
</div>
<div key="rightComponent" className="right-component">
<div className="inline-component inspector-parent">
<div
id="inspectorCanvasParent"
key="inspectorCanvasParent"
className="inspector-canvas-parent">
<canvas id="inspector-canvas" key="inspectorCanvas" />
</div>
<MainEditorInspector
uiState
dispatchFunc
@@ -0,0 +1,98 @@
open Wonderjs;
open CameraGroupType;

let _prepareCamera = inspectorEngineState => {
let (inspectorEngineState, camera) =
GameObjectEngineService.create(inspectorEngineState);
let (
inspectorEngineState,
{cameraView, cameraProjection} as cameraComponentRecord,
) =
CameraEngineService.createCameraGroup(inspectorEngineState);

let inspectorEngineState =
inspectorEngineState
|> CameraGroupEngineService.addCameraGroupComponents(
camera,
cameraComponentRecord,
(
GameObjectComponentEngineService.addBasicCameraViewComponent,
GameObjectComponentEngineService.addPerspectiveCameraProjectionComponent,
),
);

let (inspectorEngineState, arcballCameraController) =
ArcballCameraEngineService.create(inspectorEngineState);

let inspectorEngineState =
inspectorEngineState
|> ArcballCameraEngineService.setArcballCameraControllerDistance(
2.,
arcballCameraController,
)
|> ArcballCameraEngineService.setArcballCameraControllerWheelSpeed(
arcballCameraController,
0.5,
)
|> ArcballCameraEngineService.setArcballCameraControllerMoveSpeedX(
arcballCameraController,
1.,
)
|> ArcballCameraEngineService.setArcballCameraControllerMoveSpeedY(
arcballCameraController,
1.,
)
|> ArcballCameraEngineService.setArcballCameraControllerTheta(
arcballCameraController,
Js.Math._PI /. 5.,
)
|> BasicCameraViewEngineService.activeBasicCameraView(cameraView)
|> GameObjectComponentEngineService.addArcballCameraControllerComponent(
camera,
arcballCameraController,
);

(inspectorEngineState, camera);
};

let _createSphere = inspectorEngineState => {
let (inspectorEngineState, sphereGeometry) =
GeometryEngineService.createSphereGeometry(0.5, 28, inspectorEngineState);
let (engineState, lightMaterial) =
LightMaterialEngineService.create(inspectorEngineState);

let (inspectorEngineState, gameObject) =
GameObjectEngineService.create(inspectorEngineState);

let (inspectorEngineState, meshRenderer) =
MeshRendererEngineService.create(inspectorEngineState);
let renderGroup =
RenderGroupEngineService.buildRenderGroup(meshRenderer, lightMaterial);

inspectorEngineState
|> RenderGroupEngineService.addRenderGroupComponents(
gameObject,
renderGroup,
(
GameObjectAPI.addGameObjectMeshRendererComponent,
GameObjectAPI.addGameObjectLightMaterialComponent,
),
)
|> GameObjectComponentEngineService.addGeometryComponent(
gameObject,
sphereGeometry,
);

(inspectorEngineState, gameObject);
};

let initInspectorEngineJob = (_, inspectorEngineState) => {
let (inspectorEngineState, camera) = _prepareCamera(inspectorEngineState);
let (inspectorEngineState, sphere) = _createSphere(inspectorEngineState);

inspectorEngineState
|> SceneEngineService.addSceneChild(camera)
|> SceneEngineService.addSceneChild(sphere);

inspectorEngineState;
};
@@ -1,6 +1,7 @@
open Js.Promise;

let _getLoadEngineData = () => {
Js.log("load engine");
let engineConfigDir = "./config/engine/";

AssetEngineService.loadConfig(
@@ -10,6 +11,7 @@ let _getLoadEngineData = () => {
};

let _getLoadInspectorEngineData = () => {
Js.log("load inspector enigne");
let engineConfigDir = "./config/inspectorEngine/";

AssetEngineService.loadConfig(
@@ -18,7 +20,7 @@ let _getLoadInspectorEngineData = () => {
);
};

let _registerJob = engineState =>
let _registerJobForEngine = engineState =>
engineState
|> JobEngineService.registerNoWorkerInitJob(
"init_editor",
@@ -81,11 +83,11 @@ let _registerJob = engineState =>
RestoreJob.restoreJob,
);

let _registerJobForInspector = engineState =>
let _registerJobForInspectorEngine = engineState =>
engineState
|> JobEngineService.registerNoWorkerInitJob(
"init_camera_controller",
InitCameraControllerJob.initJob,
"init_inspector_engine",
InitInspectorEngineJob.initInspectorEngineJob
)
|> JobEngineService.registerNoWorkerLoopJob(
"reallocate_cpu_memory",
@@ -95,21 +97,13 @@ let _registerJobForInspector = engineState =>
"update_camera",
UpdateCameraJob.updateJob,
)
|> JobEngineService.registerNoWorkerLoopJob(
"prepare_render_scene_view",
PrepareRenderSceneViewJob.prepareRenderSceneViewJob,
)
|> JobEngineService.registerNoWorkerLoopJob(
"prepare_render_game_view",
PrepareRenderGameViewJob.prepareRenderGameViewJob,
)
|> JobEngineService.registerNoWorkerLoopJob(
"restore",
RestoreJob.restoreJob,
);

let _handleEngineState = engineState => {
let engineState = _registerJob(engineState);
let engineState = _registerJobForEngine(engineState);
let scene = engineState |> SceneEngineService.getSceneGameObject;

engineState
@@ -122,7 +116,7 @@ let _handleEngineState = engineState => {
};

let _handleInspectorEngineState = inspectorEngineState => {
let inspectorEngineState = _registerJobForInspector(inspectorEngineState);
let inspectorEngineState = _registerJobForInspectorEngine(inspectorEngineState);

inspectorEngineState
|> DirectorEngineService.init
@@ -169,11 +163,11 @@ let initEngine = () =>
|> WonderBsMost.Most.tap(engineState =>
engineState |> _handleEngineState |> ignore
)
|> WonderBsMost.Most.merge(
|> WonderBsMost.Most.flatMap(_ =>
_getLoadInspectorEngineData()
|> WonderBsMost.Most.tap(inspectorEngineState =>
inspectorEngineState |> _handleInspectorEngineState |> ignore
),
)
)
|> WonderBsMost.Most.drain
);
@@ -24,8 +24,8 @@ let _getCanvasParentSize = parent => (
parent##offsetHeight,
);

let getCanvasParentSize = () =>
DomHelper.getElementById("canvasParent")
let getCanvasParentSize = canvasParentDom =>
canvasParentDom
|> DomHelperType.convertDomElementToJsObj
|> _getCanvasParentSize;

@@ -37,8 +37,8 @@ let getCanvasSize = () => {
(canvas##width, canvas##height);
};

let resizeCanvas = ((width, height)) =>
DomHelper.getElementById("canvas")
let resizeCanvas = (canvasDom, (width, height)) =>
canvasDom
|> DomHelperType.convertDomElementToJsObj
|> ScreenEngineService.setScreenSize((width, height, width, height))
|> ignore;
@@ -110,11 +110,18 @@ let isViewSizeChange =
);

let resizeScreen = () => {
let canvasParentSize = getCanvasParentSize();
let engineState = StateEngineService.unsafeGetState();
/* let inspectorEngineState = StateInspectorEngineService.unsafeGetState(); */
let inspectorEngineState = StateInspectorEngineService.unsafeGetState();

resizeCanvas(canvasParentSize);
let canvasParentSize =
DomHelper.getElementById("canvasParent") |> getCanvasParentSize;
let inspectorCanvasParentSize =
DomHelper.getElementById("inspectorCanvasParent") |> getCanvasParentSize;

canvasParentSize |> resizeCanvas(DomHelper.getElementById("canvas"));

inspectorCanvasParentSize
|> resizeCanvas(DomHelper.getElementById("inspector-canvas"));

engineState |> DeviceManagerEngineService.getGl |> Js.Option.isSome ?
{
@@ -127,6 +134,12 @@ let resizeScreen = () => {
|> ignore;
} :
();
/* inspectorEngineState |> DeviceManagerEngineService.getGl |> Js.Option.isSome ?
inspectorEngineState |> StateLogicService.refreshEngineState |> ignore : (); */

inspectorEngineState |> DeviceManagerEngineService.getGl |> Js.Option.isSome ?
inspectorEngineState
|> resizeViewport(inspectorCanvasParentSize)
|> DirectorEngineService.loopBody(0.)
|> StateInspectorEngineService.setState
|> ignore :
();
};

0 comments on commit 938daed

Please sign in to comment.
You can’t perform that action at this time.