wonder.js
Version:
659 lines (445 loc) • 20.4 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/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>
<script>
function _convertBase64ToBinary(dataURI) {
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for (var i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
};
function _convertImageToBase64(image, mimeType) {
var width = image.width;
var height = image.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var dataURL = null;
canvas.height = width;
canvas.width = height;
ctx.drawImage(image, 0, 0);
return canvas.toDataURL(mimeType);
};
function _convertImageToUint8Array(image, mimeType) {
var base64 =
_convertImageToBase64(image, mimeType);
return _convertBase64ToBinary(base64);
};
window.onload = function () {
return AssetTool.loadConfig(["../config/setting.json", "../config/"], null, function () {
var image1 = new Image();
image1.src = "../asset/image/1.jpg";
image1.onload = function () {
var image1Name = "image_1";
var mimeType1 = "image/jpg";
image1.name = image1Name;
var image2 = new Image();
image2.src = "../asset/image/2.png";
image2.onload = function () {
var image2Name = "image_2";
var mimeType2 = "image/png";
image2.name = image2Name;
return initSample(
[
image1,
image1Name,
_convertImageToUint8Array(image1, mimeType1),
mimeType1,
],
[
image2,
image2Name,
_convertImageToUint8Array(image2, mimeType2),
mimeType2,
],
wd.unsafeGetState()
);
};
};
});
function createBox(material, state) {
// var record = wd.createLightMaterial(state);
// var state = record[0];
// var material = record[1];
// state = wd.setLightMaterialDiffuseColor(material, [1.0, 0.5, 0.2], state);
// state = wd.setLightMaterialSpecularColor(material, [0.3, 0.1, 0.6], state);
// state = wd.setLightMaterialDiffuseMap(material, texture1, state);
var record = wd.createMeshRenderer(state);
var state = record[0];
var meshRenderer = record[1];
var record = wd.createGameObject(state);
var state = record[0];
var obj = record[1];
state = wd.addGameObjectLightMaterialComponent(obj, material, state);
state = wd.addGameObjectMeshRendererComponent(obj, meshRenderer, state);
var record = wd.createBoxGeometry(state);
var state = record[0];
var geometry = record[1];
var geometryName = "boxGeometry";
var state =
wd.setGeometryName(
geometry, geometryName, state
);
state = wd.addGameObjectGeometryComponent(obj, geometry, state);
// var transform = wd.unsafeGetGameObjectTransformComponent(obj, state);
// state = wd.setTransformLocalPosition(transform, [0, 20, 0], state);
return [state, obj];
}
function createSphere(texture1, state) {
var record = wd.createLightMaterial(state);
var state = record[0];
var material = record[1];
state = wd.setLightMaterialDiffuseColor(material, [1.0, 0.5, 0.2], state);
state = wd.setLightMaterialSpecularColor(material, [0.3, 0.1, 0.6], state);
state = wd.setLightMaterialDiffuseMap(material, texture1, state);
var record = wd.createMeshRenderer(state);
var state = record[0];
var meshRenderer = record[1];
var record = wd.createGameObject(state);
var state = record[0];
var obj = record[1];
state = wd.addGameObjectLightMaterialComponent(obj, material, state);
state = wd.addGameObjectMeshRendererComponent(obj, meshRenderer, state);
var record = wd.createSphereGeometry(5.0, 100, state);
var state = record[0];
var geometry = record[1];
var geometryName = "sphereGeometry";
var state =
wd.setGeometryName(
geometry, geometryName, state
);
state = wd.addGameObjectGeometryComponent(obj, geometry, state);
var transform = wd.unsafeGetGameObjectTransformComponent(obj, state);
state = wd.setTransformLocalPosition(transform, [0, 20, 0], state);
return [state, obj, geometry];
}
function initSample(
[image1,
image1Name,
image1Uint8Array,
mimeType1],
[image2,
image2Name,
image2Uint8Array,
mimeType2],
state) {
var [state, texture1] = wd.createBasicSourceTexture(state)
var texture1Name = "texture1";
var state =
wd.setBasicSourceTextureName(
texture1, texture1Name, state
);
var state = wd.setBasicSourceTextureSource(texture1, image1, state);
var [state, texture2] = wd.createBasicSourceTexture(state)
var texture2Name = "texture2";
var state =
wd.setBasicSourceTextureName(
texture2, texture2Name, state
);
var state = wd.setBasicSourceTextureSource(texture2, image2, state);
var [state, lightMaterial1] = wd.createLightMaterial(state);
var state =
wd.setLightMaterialDiffuseMap(
lightMaterial1, texture2, state
);
var lightMaterial1Name = "lightMaterial1";
var state =
wd.setLightMaterialName(
lightMaterial1, lightMaterial1Name, state
);
var state = wd.setLightMaterialDiffuseColor(lightMaterial1, [1.0, 0.5, 0.2], state);
// state = wd.setLightMaterialSpecularColor(material, [0.3, 0.1, 0.6], state);
var scriptEventFunctionData1Name = "scriptEventFunctionData1";
var scriptEventFunctionData1 =
wd.createScriptEventFunctionData(
{
// "init": (script, api, state) => {
// return _init1(script, api, state);
// },
"update": (script, api, state) => {
function _update1(script, api, state) {
var scriptAttribute1 =
api.unsafeGetScriptAttribute(
script,
"scriptAttribute1",
state
);
var a = api.unsafeGetScriptAttributeFieldValue(
"a",
scriptAttribute1
);
console.log("a: ", a)
var state =
api.setScriptAttributeFieldValue(
script,
[
"scriptAttribute1",
"a",
a + 1
],
state
);
return state;
};
return _update1(script, api, state);
},
// "dispose": (script, api, state) => {
// return _dispose1(script, api, state);
// }
}
);
var scriptAttribute1Name = "scriptAttribute1";
var scriptAttribute1 =
wd.createScriptAttribute(
);
var scriptAttribute1 =
wd.addScriptAttributeFieldJsObj(
"a", {
"type": "int",
"defaultValue": 0
},
scriptAttribute1
);
var scriptAttribute1 =
wd.addScriptAttributeFieldJsObj(
"b", {
"type": "float",
"defaultValue": 0.1
},
scriptAttribute1
);
var [state, sphere, sphereGeometry] = createSphere(texture1, state);
var [state, box] = createBox(lightMaterial1, 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.setArcballCameraControllerDistance(cameraController, 50, state);
var state =
wd.setArcballCameraControllerWheelSpeed(cameraController, 1, state);
var state = wd.addGameObjectArcballCameraControllerComponent(cameraGameObject, cameraController, state);
var state =
wd.bindArcballCameraControllerEvent(
cameraController, state
);
var state = wd.addSceneChildren(
[
sphere,
box,
cameraGameObject,
directionLightGameObject
],
state
);
wd.startDirector(state);
setTimeout(() => {
var state = wd.unsafeGetState();
var rab1 =
wd.generateSingleRAB(
wd.buildResourceData(
[],
[],
[
[
texture1,
0
]
],
[],
[
sphereGeometry
],
[
[
scriptEventFunctionData1Name,
scriptEventFunctionData1
]
],
[
[
scriptAttribute1Name,
scriptAttribute1
]
],
[
[
image1Uint8Array,
image1Name,
mimeType1
]
],
[]
),
state
);
var rab2 =
wd.generateSingleRAB(
wd.buildResourceData(
[],
[
lightMaterial1
],
[
[
texture2,
0
]
],
[],
[
sphereGeometry
],
[
],
[
],
[
[
image2Uint8Array,
image2Name,
mimeType2
]
],
[]
),
state
);
var rab3 =
wd.generateSingleRAB(
wd.buildResourceData(
[],
[
],
[
],
[],
[
sphereGeometry
],
[
],
[
],
[],
[
]
),
state
);
var sab1 =
wd.generateSingleSAB(
wd.getSceneGameObject(state),
[],
true,
state
);
var rab1RelativePath = "rab1.rab";
var rab2RelativePath = "rab2.rab";
var rab3RelativePath = "rab3.rab";
var sab1RelativePath = "sab1.sab";
wd.setState(state);
wd.generateAllABs(
wd.buildDependencyRelation(
[
[
sab1RelativePath,
rab1RelativePath,
rab2RelativePath
],
[
rab1RelativePath,
rab3RelativePath
],
[
rab2RelativePath,
rab3RelativePath
]
]
),
[
[
[
sab1RelativePath, sab1
]
],
[
[
rab1RelativePath, rab1
],
[
rab2RelativePath, rab2
],
[
rab3RelativePath, rab3
]
]
]
)
.subscribe(
{
"next": (
[
wab,
newRabDataArr,
newSabDataArr
]
) => {
console.log("next",
wab,
newRabDataArr,
newSabDataArr
);
AssetTool.download(
wab,
"wab1.wab",
);
AssetTool.download(
newRabDataArr[0][1],
"rab1.rab",
);
AssetTool.download(
newRabDataArr[1][1],
"rab2.rab",
);
AssetTool.download(
newRabDataArr[2][1],
"rab3.rab",
);
AssetTool.download(
newSabDataArr[0][1],
"sab1.sab",
);
},
"error": e => {
console.log("error", e);
},
"complete": () => {
console.log("complete");
},
}
)
}, 500)
}
};
</script>
</body>
</html>