wonder.js
Version:
556 lines (323 loc) • 15.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cube</title>
</head>
<body>
<script src="../../test/e2e/js/AssetTool.js"></script>
<script src="../../test/e2e/js/BasicBoxesTool.js"></script>
<script src="../../test/e2e/js/LightBoxesTool.js"></script>
<script src="../../test/e2e/js/PositionTool.js"></script>
<script src="../../test/e2e/js/LightTool.js"></script>
<script src="../../test/e2e/js/CameraTool.js"></script>
<script src="../../test/e2e/js/LightMaterialTool.js"></script>
<script src="../../dist/wd.js"></script>
<canvas id="ui-canvas" style="
position:absolute;
left:0;
top:0;
z-index:100;
"></canvas>
<button id="begin_draw_line" style="width:100px;height:100px;
position:absolute;
left:0px;
top:0px;
z-index:101;
">开始实线</button>
<select id="line_type" style="width:100px;height:100px;
position:absolute;
left:0px;
top:200px;
z-index:101;
">
<option value="solid">实线</option>
<option value="dash">虚线</option>
</select>
<!-- <button id="begin_draw_dash_line" style="width:100px;height:100px;
position:absolute;
left:0px;
top:200px;
z-index:101;
">开始虚线</button> -->
<button id="end_draw_line" style="width:100px;height:100px;
position:absolute;
left:200px;
top:0px;
z-index:101;
">结束画线</button>
<button id="clear_draw_line" style="
width:100px;height:100px;
position:absolute;
left:400px;
top:0px;
z-index:101;
">清空</button>
<input type="range" id="line_alpha" name="line_alpha" value="1" min="0" max="1" step="0.05" style="
position:absolute;
left:600px;
top:0px;
z-index:101;
">
<script>
window.onload = function () {
return AssetTool.loadConfig(["./config/setting.json", "./config/"], null, function () {
return initSample(wd.unsafeGetState());
});
function _getInterctedPoint(event, cameraGameObject, state, box2) {
var ray = wd.createPerspectiveCameraRayFromEvent(
event,
cameraGameObject, state
);
var checkResult =
wd.checkIntersectMesh(
ray,
wd.unsafeGetGameObjectGeometryComponent(
box2, state,
),
wd.getTransformLocalToWorldMatrixTypeArray(
wd.unsafeGetGameObjectTransformComponent(
box2, state
), state
),
1,
state
);
var point =
wd.getIntersectedPointWithMesh(
checkResult
);
// console.log(point);
return point;
};
function _getScreenSize() {
return [window.innerWidth, window.innerHeight];
};
function _isPointInScreenValid([pointInScreen, _lineType, _lineAlpha]) {
return pointInScreen !== undefined;
}
function initSample(state) {
var uiCanvas = document.querySelector("#ui-canvas");
uiCanvas.width = window.innerWidth;
uiCanvas.height = window.innerHeight;
uiCanvas.style.width = "100%";
uiCanvas.style.height = "100%";
var uiContext = uiCanvas.getContext("2d");
var [state, box1] = LightBoxesTool.createBox(state);
var transform = wd.unsafeGetGameObjectTransformComponent(box1, state);
var state = wd.setTransformLocalPosition(transform, [0, 0, -30], state);
var [state, box2] = BasicBoxesTool.createBox(state);
var transform = wd.unsafeGetGameObjectTransformComponent(box2, state);
var state = wd.setTransformLocalPosition(transform, [0, 0, 0], state);
var [state, box3] = LightBoxesTool.createBox(state);
var transform = wd.unsafeGetGameObjectTransformComponent(box3, state);
var state = wd.setTransformLocalScale(transform, [0.2, 0.2, 0.2], state);
var state = wd.setAmbientLightColor([0.2, 0.2, 0.2], state);
var [state, directionLightGameObject] = LightTool.createDirectionLight(state);
var transform = wd.unsafeGetGameObjectTransformComponent(directionLightGameObject, state);
var state = wd.setTransformLocalEulerAngles(transform, [0, 180, 0], state);
var [state, cameraGameObject] = LightBoxesTool.createCamera(state);
var [state, cameraController] = wd.createArcballCameraController(state);
var state =
wd.setArcballCameraControllerMinDistance(cameraController, 0.001, state);
var state =
wd.setArcballCameraControllerDistance(cameraController, 0.001, state);
var state =
wd.setArcballCameraControllerWheelSpeed(cameraController, 1, state);
var state = wd.addGameObjectArcballCameraControllerComponent(cameraGameObject, cameraController, state);
var state =
wd.bindArcballCameraControllerEvent(
cameraController, state
);
var isDrawing = false;
var needRestoreDrawForLineAlpha = false;
var SOLID = 0;
var DASH = 1;
var lineType = SOLID;
var lineAlpha = 1;
var totalDrawPointArr = [];
var oneDragDrawPointArr = [];
document.querySelector("#begin_draw_line").addEventListener("mousedown", function () {
var state = wd.unsafeGetState();
var state =
wd.unbindArcballCameraControllerEvent(
cameraController, state
);
wd.setState(state);
}, true);
document.querySelector("#begin_draw_line").addEventListener("click", function () {
var state = wd.unsafeGetState();
var state =
wd.unbindArcballCameraControllerEvent(
cameraController, state
);
wd.setState(state);
isDrawing = true;
}, true);
document.querySelector("#end_draw_line").addEventListener("click", function () {
var state = wd.unsafeGetState();
var state =
wd.bindArcballCameraControllerEvent(
cameraController, state
);
wd.setState(state);
isDrawing = false;
}, true)
document.querySelector("#clear_draw_line").addEventListener("mousedown", function () {
// isDrawing = false;
oneDragDrawPointArr = [];
totalDrawPointArr = [];
}, true)
document.querySelector("#line_type").addEventListener("mousedown", function () {
var state = wd.unsafeGetState();
var state =
wd.unbindArcballCameraControllerEvent(
cameraController, state
);
wd.setState(state);
}, true);
document.querySelector("#line_type").addEventListener("blur", function () {
if (isDrawing) {
return
};
var state = wd.unsafeGetState();
var state =
wd.bindArcballCameraControllerEvent(
cameraController, state
);
wd.setState(state);
}, true);
document.querySelector("#line_alpha").addEventListener("mousedown", function () {
if (isDrawing) {
isDrawing = false;
needRestoreDrawForLineAlpha = true;
return;
}
needRestoreDrawForLineAlpha = false;
var state = wd.unsafeGetState();
var state =
wd.unbindArcballCameraControllerEvent(
cameraController, state
);
wd.setState(state);
}, true);
document.querySelector("#line_alpha").addEventListener("mouseup", function () {
if (needRestoreDrawForLineAlpha) {
isDrawing = true;
needRestoreDrawForLineAlpha = false;
return;
}
var state = wd.unsafeGetState();
var state =
wd.bindArcballCameraControllerEvent(
cameraController, state
);
wd.setState(state);
}, true);
var state =
wd.onCustomGlobalEvent(
wd.getPointDragStartEventName(),
0,
(event, state) => {
if (!isDrawing) {
return [state, event];
}
var lineTypeSelectDom = document.querySelector("#line_type");
switch (lineTypeSelectDom.options[lineTypeSelectDom.selectedIndex].value) {
case "solid":
lineType = SOLID;
break;
case "dash":
lineType = DASH;
break
};
lineAlpha = Number(document.querySelector("#line_alpha").value);
oneDragDrawPointArr = [];
totalDrawPointArr.push(
oneDragDrawPointArr
);
return [state, event];
}, state
);
var state =
wd.onCustomGlobalEvent(
wd.getPointDragOverEventName(),
0,
(event, state) => {
if (!isDrawing) {
return [state, event];
}
oneDragDrawPointArr.push(
[
_getInterctedPoint(event, cameraGameObject, state, box2),
lineType,
lineAlpha,
]
);
return [state, event];
}, state
);
var state = wd.registerNoWorkerLoopJob("update_ui", (_, state) => {
uiContext.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
uiContext.lineWidth = 1;
// console.log("color: ", "rgba(255,0,255," + String(lineAlpha) + ")");
let pointInScreenDataArrArr =
totalDrawPointArr.map((oneDragDrawPointArr) => {
return oneDragDrawPointArr.map(([pointInWorld, lineType, lineAlpha]) => {
var [screenWidth, screenHeight] = _getScreenSize();
return [
wd.convertWorldToScreen(
wd.unsafeGetGameObjectBasicCameraViewComponent(
cameraGameObject, state
),
wd.unsafeGetGameObjectPerspectiveCameraProjectionComponent(
cameraGameObject, state
),
[
pointInWorld[0],
pointInWorld[1],
pointInWorld[2],
screenWidth, screenHeight
],
state
),
lineType,
lineAlpha
];
}).filter(_isPointInScreenValid)
});
pointInScreenDataArrArr.filter((pointInScreenDataArr) => {
return pointInScreenDataArr.length > 0;
}).forEach((pointInScreenDataArr) => {
uiContext.beginPath();
var firstPointInScreen = pointInScreenDataArrArr[0][0];
var _ =
pointInScreenDataArr.slice(1).reduce((lastPointInScreen,
[pointInScreen, lineType, lineAlpha]
) => {
uiContext.strokeStyle = "rgba(255,0,255," + String(lineAlpha) + ")";
if (lineType === DASH) {
uiContext.setLineDash([5, 20]);
}
else {
uiContext.setLineDash([]);
}
uiContext.moveTo(lastPointInScreen[0], lastPointInScreen[1]);
uiContext.lineTo(pointInScreen[0], pointInScreen[1]);
return pointInScreen;
}, firstPointInScreen);
uiContext.stroke();
})
// pointInScreenArr
// .forEach((pointInScreen) => {
// uiContext.fillStyle = "#0000ff";
// uiContext.fillRect(pointInScreen[0], pointInScreen[1], 50, 30);
// })
return state;
}, state);
wd.startDirector(state);
}
};
</script>
</body>
</html>