- TwinMaker\u4e0a\u3067\u3001\u30ed\u30b0\u30a4\u30f3\u30e6\u30fc\u30b6\u30fc\u3054\u3068\u306b\u9055\u3046\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8868\u793a\u3059\u308b\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059<\/ul>\n<\/li>\n<\/ul>\n
- \n
- A\u3055\u3093\u304c\u30ed\u30b0\u30a4\u30f3\u3059\u308b\u3068\u3001A\u3055\u3093\u306e\u90e8\u5c4b\u306e\u30eb\u30f3\u30d0\u306e\u4f4d\u7f6e\u306b\u3001\u30eb\u30f3\u30d0\u306e3D\u30e2\u30c7\u30eb\u304c\u8868\u793a\u3055\u308c\u307e\u3059<\/ul>\n<\/li>\n<\/ul>\n
- \n
- B\u3055\u3093\u304c\u30ed\u30b0\u30a4\u30f3\u3059\u308b\u3068\u3001B\u3055\u3093\u306e\u90e8\u5c4b\u306e\u30eb\u30f3\u30d0\u306e\u4f4d\u7f6e\u306b\u3001\u30eb\u30f3\u30d0\u306e3D\u30e2\u30c7\u30eb\u304c\u8868\u793a\u3055\u308c\u307e\u3059<\/ul>\n<\/li>\n<\/ul>\n
- \n
- Python\u306e\u5b9a\u671f\u5b9f\u884c\u3067\u3001\u52d5\u7684\u306bTwinMaker\u306e\u30b7\u30fc\u30f3\u3092\u30b3\u30d4\u30fc\u3057\u307e\u3059<\/ul>\n<\/li>\n<\/ul>\n
- \n
- AWS\u30a2\u30ab\u30a6\u30f3\u30c8<\/ul>\n<\/li>\n<\/ul>\n
- \n
- Python3.10<\/ul>\n<\/li>\n<\/ul>\n
- \n
- VSCode<\/ul>\n<\/li>\n<\/ul>\n
<\/p>\n
- Node.js\uff08\u8a18\u4e8b\u306fv14.15.1\u3067\u691c\u8a3c\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u65b0\u3057\u3044\u307b\u3046\u304c\u3044\u3044\u3067\u3059\uff09<\/ul>\n
\u9996\u5148\u662f\u51c6\u5907\u5de5\u4f5c\uff1a\u5f15\u5165IoT\u5e94\u7528\u5f00\u53d1\u5de5\u5177\u5305\u3002<\/h1>\n
\u7531\u4e8eTwinMaker\u53ea\u80fd\u88ab\u62e5\u6709AWS\u8d26\u6237\u7684\u5f00\u53d1\u8005\u5728AWS\u7ba1\u7406\u63a7\u5236\u53f0\u4e0a\u67e5\u770b\uff0c\u56e0\u6b64\u5b83\u4e0d\u9002\u5408\u6839\u636e\u767b\u5f55\u7528\u6237\u7684\u4e0d\u540c\u52a8\u6001\u53d8\u5316\u3002\u6211\u4eec\u5c06\u4f7f\u7528iot-app-kit\u6765\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u3002<\/p>\n
\u7269\u8054\u7f51\u5e94\u7528\u5957\u4ef6\u662f\u7531AWS\u53d1\u5e03\u7684\u4e00\u4e2a\u5e93\u3002\u53ef\u4ee5\u5c06TwinMaker\u76843D\u573a\u666f\u3001\u56fe\u8868\u7b49\u4f5c\u4e3aReact\u7684Web\u5e94\u7528\u7a0b\u5e8f\u8fdb\u884c\u6784\u5efa\u3002\u53ef\u4ee5\u521b\u5efa\u4e13\u95e8\u4f9b\u7528\u6237\u6d4f\u89c8\u7684Web\u9875\u9762\u3002<\/p>\n
<\/p>\n
\u7531\u4e8e\u7269\u8054\u7f51\u5e94\u7528\u5957\u4ef6\u5e93\u4ecd\u7136\u662f\u4e00\u4e2a\u76f8\u5bf9\u65b0\u7684\u5e93\uff0c\u56e0\u6b64\u6784\u5efa\u8fc7\u7a0b\u4f1a\u6709\u4e00\u4e9b\u56f0\u96be\u3002\u5373\u4f7f\u6309\u7167README\u4e2d\u7684\u6307\u793a\u64cd\u4f5c\uff0c\u6709\u65f6\u4ecd\u65e0\u6cd5\u8fd0\u884c\u3002\u8bf7\u53c2\u8003\u4ee5\u4e0b\u6b65\u9aa4\u5f00\u59cb\u6784\u5efa\u3002<\/p>\n
\u6b65\u9aa41\uff1a\u521b\u5efa\u4e00\u4e2aReact\u9879\u76ee<\/p>\n
# \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u308a\u305f\u3044\u30d5\u30a9\u30eb\u30c0\u3067\u3001react\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059<\/span>\r\nnpx create-react-app app --template<\/span> typescript \r\n\r\n# \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u3067\u304d\u305f\u3089\u3001\u4f5c\u6210\u3057\u305f\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u307e\u3059<\/span>\r\ncd <\/span>app\r\n\r\n# \u5fc5\u8981\u306a\u4f9d\u5b58\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059<\/span>\r\nnpm install<\/span>\r\n<\/code><\/pre>\n\u6b65\u9aa42\uff1a\u5b89\u88c5IoT\u5e94\u7528\u5957\u4ef6\u3002<\/p>\n
# app-kit\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\uff08\u203bREADME\u306b\u51fa\u3066\u3044\u308b\u624b\u9806\u306f\u3053\u3053\u307e\u3067\u3067\u3059\uff09<\/span>\r\nnpm install<\/span> @iot-app-kit\/components \r\nnpm install<\/span> @iot-app-kit\/react-components \r\nnpm install<\/span> @iot-app-kit\/source-iottwinmaker \r\nnpm install<\/span> @iot-app-kit\/scene-composer\r\n\r\n# \u3068\u308a\u3042\u3048\u305a\u30a8\u30e9\u30fc\u304c\u51fa\u308b\u306e\u3067\u3001babel\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059<\/span>\r\nnpm install<\/span> @babel\/plugin-proposal-private-property-in-object\r\n\r\n# sass\u304c\u306a\u3044\u306e\u3067\u3001sass\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059<\/span>\r\nnpm install <\/span>sass\r\n\r\n# \u30dd\u30ea\u30d5\u30a3\u30eb\u304c\u5fc5\u8981\u306a\u306e\u3067\u3001react-app-rewired\u3068\u30dd\u30ea\u30d5\u30a3\u30eb\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059<\/span>\r\nnpm install <\/span>react-app-rewired --save-dev<\/span>\r\nnpm install <\/span>node-polyfill-webpack-plugin\r\n<\/code><\/pre>\n\u7b2c\u4e09\u6b65\uff1a\u5728\u9879\u76ee\u7684\u6839\u76ee\u5f55\u4e0b\uff0c\u653e\u7f6e\u9002\u7528\u4e8ereact-app-wired\u7684\u914d\u7f6e\u6587\u4ef6\u3002<\/p>\n
const<\/span> NodePolyfillPlugin<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>node-polyfill-webpack-plugin<\/span>\"<\/span>);<\/span>\r\n\r\nmodule<\/span>.<\/span>exports<\/span> =<\/span> function<\/span> override<\/span>(<\/span>config<\/span>,<\/span> env<\/span>)<\/span> {<\/span>\r\n if <\/span>(<\/span>!<\/span>config<\/span>.<\/span>plugins<\/span>)<\/span> {<\/span>\r\n config<\/span>.<\/span>plugins<\/span> =<\/span> [];<\/span>\r\n }<\/span>\r\n config<\/span>.<\/span>plugins<\/span>.<\/span>push<\/span>(<\/span>\r\n new<\/span> NodePolyfillPlugin<\/span>({<\/span>\r\n excludeAliases<\/span>:<\/span> [<\/span>\"<\/span>console<\/span>\"<\/span>],<\/span>\r\n })<\/span>\r\n );<\/span>\r\n config<\/span>.<\/span>resolve<\/span>.<\/span>alias<\/span> =<\/span> {<\/span>\r\n \"<\/span>react\/jsx-runtime.js<\/span>\"<\/span>:<\/span> \"<\/span>react\/jsx-runtime<\/span>\"<\/span>,<\/span>\r\n \"<\/span>react\/jsx-dev-runtime.js<\/span>\"<\/span>:<\/span> \"<\/span>react\/jsx-dev-runtime<\/span>\"<\/span>,<\/span>\r\n };<\/span>\r\n return<\/span> config<\/span>;<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n\u7b2c\u56db\u6b65\uff1a\u4fee\u6539package.json\u6587\u4ef6\u4e2d\u7684scripts\uff0c\u4ee5\u4fbf\u80fd\u591f\u4f7f\u7528react-app-rewired\u3002<\/p>\n
\"scripts\"<\/span>:<\/span> {<\/span>\r\n \"start\"<\/span>:<\/span> \"react-app-rewired start\"<\/span>,<\/span>\r\n \"build\"<\/span>:<\/span> \"react-app-rewired build\"<\/span>,<\/span>\r\n \"test\"<\/span>:<\/span> \"react-app-rewired test\"<\/span>,<\/span>\r\n \"eject\"<\/span>:<\/span> \"react-app-rewired eject\"<\/span>\r\n }<\/span>,<\/span>\r\n<\/code><\/pre>\n\u6b65\u9aa45\uff1a\u7531\u4e8ethree.js\u7248\u672c\u4e0d\u517c\u5bb9\uff0c\u60a8\u9700\u8981\u83b7\u53d6\u6700\u65b0\u7248\u672c\u3002<\/p>\n
npm install <\/span>three\r\nnpm install<\/span> @react-three\/fiber\r\nnpm install<\/span> @react-three\/drei\r\nnpm install <\/span>three-stdlib\r\n<\/code><\/pre>\n\u7b2c\u516d\u6b65\uff1a\u51c6\u5907\u5c31\u7eea\u540e\uff0c\u542f\u52a8React\u3002<\/p>\n
npm run start\r\n<\/code><\/pre>\n\u76ee\u524d\u6765\u770b\uff0c\u591a\u534a\u8fd9\u6837\u5c31\u53ef\u4ee5\u4e86\uff08\u203b\u622a\u81f32023\u5e746\u670811\u65e5\uff09\u3002<\/p>\n
6\u670811\u65e5\u65f6\u7684\u7248\u672c\u4fe1\u606f\uff1apackage.jsonpackage.json
\n{
\n“name”: “app”,
\n“version”: “0.1.0”,
\n“private”: true,
\n“dependencies”: {
\n“@babel\/plugin-proposal-private-property-in-object”: “^7.21.11”,
\n“@iot-app-kit\/components”: “^6.2.0”,
\n“@iot-app-kit\/react-components”: “^6.2.0”,
\n“@iot-app-kit\/scene-composer”: “^3.3.0”,
\n“@iot-app-kit\/source-iottwinmaker”: “^6.2.0”,
\n“@react-three\/drei”: “^9.74.8”,
\n“@react-three\/fiber”: “^8.13.1”,
\n“@testing-library\/jest-dom”: “^5.16.5”,
\n“@testing-library\/react”: “^13.4.0”,
\n“@testing-library\/user-event”: “^13.5.0”,
\n“@types\/jest”: “^27.5.2”,
\n“@types\/node”: “^16.18.35”,
\n“@types\/react”: “^18.2.11”,
\n“@types\/react-dom”: “^18.2.4”,
\n“jsx-runtime”: “^1.2.0”,
\n“node-polyfill-webpack-plugin”: “^2.0.1”,
\n“path-browserify”: “^1.0.1”,
\n“react”: “^18.2.0”,
\n“react-dom”: “^18.2.0”,
\n“react-scripts”: “5.0.1”,
\n“sass”: “^1.63.3”,
\n“three”: “^0.153.0”,
\n“three-stdlib”: “^2.23.9”,
\n“typescript”: “^4.9.5”,
\n“web-vitals”: “^2.1.4”
\n},
\n“scripts”: {
\n“start”: “react-app-rewired start”,
\n“build”: “react-app-rewired build”,
\n“test”: “react-app-rewired test”,
\n“eject”: “react-app-rewired eject”
\n},
\n“eslintConfig”: {
\n“extends”: [
\n“react-app”,
\n“react-app\/jest”
\n]
\n},
\n“browserslist”: {
\n“production”: [
\n“last 1 chrome version”
\n],
\n“development”: [
\n“last 1 chrome version”
\n]
\n},
\n“devDependencies”: {
\n“react-app-rewired”: “^2.2.1”
\n}
\n}<\/p>\n<\/details>\n\u5efa\u8bbe\u4efb\u52a11\uff1a\u521b\u5efa\u6210\u4e3a\u6a21\u677f\u7684TwinMaker\u573a\u666f\u3002<\/h1>\n
\u8fdb\u884c\u5de5\u4f5c<\/h2>\n
\u9996\u5148\uff0c\u4f7f\u7528\u6a21\u677f\u7684\u540d\u79f0\u521b\u5efa\u4e00\u4e2a TwinMaker \u573a\u666f
\n\u5177\u4f53\u64cd\u4f5c\u5982\u4e0b\u4e24\u70b9\uff1a<\/p>\n- \n
- \n
- \u90e8\u5c4b\u306e3D\u30e2\u30c7\u30eb\u3092\u4e2d\u592e\u306b\u914d\u7f6e\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n
- \n
- shotaoki_mail_com<\/ul>\n<\/li>\n<\/ul>\n
- \n
- \u7528Python\u811a\u672c\u4eceS3\u4e2d\u83b7\u53d6\u4e00\u4e2a\u6a21\u677f\u7684JSON\u6587\u4ef6\uff0c<\/ol>\n<\/li>\n<\/ol>\n
- \n
- \u66f4\u6539\u5bf9\u8c61\u7684\u914d\u7f6e\u4fe1\u606f\uff0c\u8986\u76d6\u73b0\u6709\u7684\u9488\u5bf9\u7528\u6237A\u7684JSON\u6587\u4ef6\uff0c<\/ol>\n<\/li>\n<\/ol>\n
<\/p>\n
- \u66f4\u6539\u5bf9\u8c61\u7684\u914d\u7f6e\u4fe1\u606f\uff0c\u8986\u76d6\u73b0\u6709\u7684\u9488\u5bf9\u7528\u6237B\u7684JSON\u6587\u4ef6\u3002<\/ol>\n
\u8fd9\u6837\u505a\u53ef\u4ee5\u521b\u5efa\u9002\u5408\u7528\u6237A\u548c\u7528\u6237B\u7684\u573a\u666f\u3002<\/p>\n
\u6211\u4e5f\u4eceSketchfab\u501f\u7528\u4e86Roomba\u7684\u6570\u636e\uff0c\u8be5\u6a21\u578b\u4e5f\u662fCC 4.0\u8bb8\u53ef\u8bc1\u3002\u94fe\u63a5\u5728\u8fd9\u91cc\uff1a
\n
<\/p>\n
- \n
- \n
<\/p>\n
- other_user_mail_com<\/ul>\n
\u7531\u4e8e\u547d\u540d\u89c4\u5219\u7684\u9650\u5236\uff0c\u65e0\u6cd5\u4f7f\u7528@\u7b49\u7b26\u53f7\uff0c\u56e0\u6b64\u6211\u4eec\u4f7f\u7528\u4e0b\u5212\u7ebf\u66ff\u4ee3\u7535\u5b50\u90ae\u4ef6\u5730\u5740\u7684\u7b26\u53f7\u90e8\u5206\u3002<\/p>\n
![\"3-scenes.png\"](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d353e37434c4406c6bbdc\/48-0.png\" "\\"\\"")
<\/div>\n\u6839\u636e\u914d\u989d\u89c4\u5b9a\uff0c\u60a8\u53ef\u4ee5\u5728\u4e00\u4e2a\u5de5\u4f5c\u533a\u521b\u5efa100\u4e2a\u573a\u666f\uff0c\u6240\u4ee5\u5373\u4f7f\u518d\u589e\u52a097\u4e2a\u4eba\u4e5f\u6ca1\u6709\u95ee\u9898\u3002<\/p>\n
\u6784\u5efa\u4efb\u52a13\uff1a\u4f7f\u7528Python\u7f16\u5199\u811a\u672c\uff0c\u5b9e\u73b0\u590d\u5236\u6a21\u677f\u7684\u5904\u7406\u3002<\/h1>\n
![\"structure.png\"](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d353e37434c4406c6bbdc\/51-0.png\" "\\"\\"")
<\/div>\n\u8fdb\u884c<\/h2>\n
- \n
- \n
<\/p>\n
- \u30ab\u30e1\u30e9\u3092Camera1\u306e\u540d\u524d\u3067\u4f5c\u6210\u3059\u308b<\/ul>\n
![\"scene-template.png\"](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d353e37434c4406c6bbdc\/37-0.png\" "\\"\\"")
<\/div>\n\u6211\u4eceSketchfab\u501f\u7528\u4e86\u8fd9\u4e2a\u6a21\u62df\u623f\u95f4\u7684GLB\u6a21\u578b\uff08\u5176\u6388\u6743\u4e3aCC4.0\uff09\u3002
\n\u94fe\u63a5\uff1ahttps:\/\/sketchfab.com\/3d-models\/studio-apartment-vray-baked-textures-included-cae2d96ede1d4112b1fd391099a43f77<\/p>\n\u5b8c\u6210\u8fd9\u4e2a\u4efb\u52a1\u540e\uff0c\u5c31\u4f1a\u53d8\u6210\u8fd9\u6837<\/h2>\n
\u4f7f\u7528\u6a21\u677f\u7684\u540d\u79f0\u521b\u5efa\u573a\u666f\u65f6\uff0c\u5c06\u5728\u4e0eS3\u4e2d\u5bf9\u5e94\u7684\u5b58\u50a8\u6876\uff08\u5b58\u50a8\u6876\u7ed3\u5c3e\u4e3a-iad\uff09\u4e2d\u521b\u5efatemplate.json\u7684JSON\u6587\u4ef6\u3002<\/p>\n
![\"template-s3.png\"](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d353e37434c4406c6bbdc\/41-0.png\" "\\"\\"")
<\/div>\nTwinMaker\u7684\u573a\u666f\u5c06\u901a\u8fc7\u4e0e\u573a\u666f\u540d\u79f0\u76f8\u540c\u7684JSON\u6587\u4ef6\u5728S3\u4e0a\u8fdb\u884c\u7edf\u4e00\u7ba1\u7406\u3002<\/p>\n
\u6784\u5efa\u4f5c\u4e1a2\uff1a\u521b\u5efa\u4e0e\u7528\u6237\u6570\u91cf\u76f8\u540c\u7684\u7a7a\u573a\u666f\u3002<\/h1>\n
\u8fdb\u884c<\/h2>\n
\u7531\u4e8e\u672c\u6b21\u8ba1\u5212\u662f\u8ba9\u4e24\u4e2a\u7528\u6237\u540c\u65f6\u767b\u5f55\uff0c\u6240\u4ee5\u6211\u521b\u5efa\u4e86\u4e24\u4e2a\u7a7a\u573a\u666f\u3002<\/p>\n
- \n
- \n
- \n
<\/p>\n
- \n
- \n
<\/p>\n
- \n
- \n
<\/p>\n
- \u30ed\u30b0\u30a4\u30f3\u30e6\u30fc\u30b6\u30fc\u306e\u60c5\u5831\u304c\u5fc5\u8981\u306b\u306a\u308b\u306e\u3067\u3001iot-app-kit\u3067Web\u30a2\u30d7\u30ea\u5316\u3057\u307e\u3059<\/ul>\n
\u4f60\u4e3a\u4ec0\u4e48\u5f00\u5fc3\uff1f<\/p>\n
- \u30e6\u30fc\u30b6\u30fcA\u3055\u3093\u306b\u306fA\u3055\u3093\u5411\u3051\u306e3D\u3092\u3001B\u3055\u3093\u306b\u306fB\u3055\u3093\u5411\u3051\u306e3D\u3060\u3051\u3092\u898b\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059<\/ul>\n
\u6240\u9700\u4e4b\u7269<\/p>\n
- \n
- \n
<\/p>\n
- \u307e\u305f\u3001\u6ce8\u91c8\u306b\u8868\u793a\u3055\u308c\u308b\u753b\u50cf\u3068\u6587\u8a00\u304c\u5909\u308f\u308a\u307e\u3059<\/ul>\n
![\"undefined\"](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d353e37434c4406c6bbdc\/6-1.png\" "\\"\\"")
<\/div>\n\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u4eec\u4e0d\u4f1a\u6d89\u53ca\u5230\u83b7\u53d6\u4f4d\u7f6e\u4fe1\u606f\u7684\u95ee\u9898\uff0c\u53ea\u662f\u7b80\u5355\u5730\u8bf4\u660e\u4e00\u4e0b\u57283D\u7a7a\u95f4\u4e2dRoomba\u7684\u4f4d\u7f6e\u4f1a\u53d1\u751f\u53d8\u5316\u3002<\/p>\n
\u600e\u4e48\u5b9e\u73b0\u5462\uff1f<\/p>\n
- \n
- \n
<\/p>\n
- \n
- \n
<\/p>\n
- TwinMaker\u4e0a\u3067\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306a\u4f4d\u7f6e\u60c5\u5831\u3092\u30013D\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u4f4d\u7f6e\u306b\u53cd\u6620\u3055\u305b\u308b\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059<\/ul>\n
\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\u8981\u5236\u4f5c\u7684\u4e1c\u897f<\/p>\n
\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4ee5\u4e0b\u7c7b\u4f3cTwinMaker\u7684\u573a\u666f\u3002<\/p>\n
- \n