A simple demo to use Altizure offline without the online services.
-
set up a local host at the root of the folder.
cd <path>/altizure-sdk-offline/ python -m SimpleHTTPSERVER 8000
- More information about hosting can be found on 3D SDK Quick Start
-
visit
http://localhost:8000/index.html
through browser.
We have provided an example data for your testing, you can download from pan.baidu.
Link: https://pan.baidu.com/s/1tEEbjO2aC2OviDCV5_fdhQ Password: sjhw
You can view the data directly or change to your own data. Please follow the original folder structure if you use your own data.
project
│ README.md
│ index.html
│ crop_and_water.html
│
└───public
│ └───data
│ └───<PID_1>
│ │ │ apiinfo-<PID_1>.json
│ │ └───web
│ │ │ *.ab
│ │ │ *.ab
│ │ │ ...
│ │ │ info.txt
│ └───<PID_2>
│ │ │ apiinfo-<PID_2>.json
│ │ │ crop_mask_<PID_2>.json (if it has)
│ │ │ water_mask_<PID_2>.json (if it has)
│ │ └───web
│ │ │ *.ab
│ │ │ *.ab
│ │ │ ...
│ │ │ info.txt
│ │ ...
│
└───assets
│ └───img
│ └───waternormals.jpg
│
└───js
│ altizure-all.min.js
│ altizure.min.js
index.html
is the landing webpage.public\data\<PID>\web
stores the altizure binary data of the 3D model. That's composed by a lot of.ab
files and ainfo.txt
public\data\<PID>\apiinfo-<PID>.json
stores the altizure graphql apiproject(<PID>)
data.public\data\<PID>\crop_mask_<PID>.json
stores the altizure project crop data.public\data\<PID>\water_mask_<PID>.json
stores the altizure project water data.public\js\altizure.min.js
is the basic SDK,public\js\altizure-all.min.js
is the SDK with all plugins.
- Store your
.ab
data files andinfo.txt
in the pathpublic\data\<PID>\web\
. - In
public\data\<PID>\apiinfo-<PID>.json
, change<REPLACE_WITH_YOUR_HOSTNAME_PORT>
indataUrl
to your own hostname and port, likelocalhost:8000
. - The
apiinfo-<PID>.json
file can be downloaded from project overview page: https://www.altizure.cn/overview?pid=PID - In
index.html
change yourapiinfo-<PID>.json
request path. If you totally follow the folder structure before, you will only need to change PID to your own. - If you want to do crop or add water to project, please refer to
crop_and_water.html
demo. You need to downloadcrop_mask_<PID>.json
andwater_mask_<PID>.json
from project overview page, place them indata\<PID>
and change<PID>
incrop_and_water.html
to your own.
- If you need to add multiple projects to your scene, you need to use different
apiinfo
for each project. Just request differentapiinfo-<PID>.json
files then add them to scene following the method inindex.html
.
- If you host your ab files on nginx server, you may need to set
Allow-Cross-Origin
to enable visiting the data from different origins. Additionally, a correct error message404
is required for ab files loading in sdk. - If you use host methods other than nginx, please make sure the two conditions are met:
enable cors
,return 404 correctly
. - You can refer to this article for configure nginx rightly.
- Here is a demo nginx config to allow cors and return
404
properly.
server {
listen 8000;
server_name 127.0.0.1:8000;
location / {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE' always;
add_header 'Access-Control-Allow-Header' 'Content-Type,*' always;
root /home/altizure/demo/data;
index index.html index.htm;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}