adding docs in README; alpha release

README.md

@@ -2,7 +2,64 @@
 
 > threejs based on 3D model component used in JimengIO
 
-### Usage
+### Usages
+
+![](https://img.shields.io/npm/v/@jimengio/3d-model-viewer.svg?style=flat-square)
+
+```bash
+yarn add @jimengio/3d-model-viewer
+```
+
+```ts
+import { ThreeDViewer, Old3dModelViewer } from "@jimengio/3d-model-viewer";
+```
+
+- `ThreeDViewer` 支持多种个格式的组件(TODO)
+- `Old3dModelViewer` 老版本显示 GLTF 格式的组件, 使用的是极坐标.
+
+#### `ThreeDViewer`
+
+_TODO_
+
+```jsx
+<ThreeDViewer
+  url={gltfDemo}
+  isDragging
+  renderSize={{
+    width: 500,
+    height: 500,
+  }}
+/>
+```
+
+#### `Old3dModelViewer`
+
+```jsx
+let [radius, setRadius] = useState(2.4);
+let [polarAngle, setPolarAngle] = useState(90);
+let [equatorAngle, setEquatorAngle] = useState(90);
+
+<ThreeModelViewer
+  url={gltfDemo}
+  radius={radius}
+  minRadius={0.01}
+  maxRadius={20}
+  backgroundColor={"black"}
+  polarAngle={polarAngle}
+  equatorAngle={equatorAngle}
+  key={gltfDemo}
+  size={{ width: 800, height: 800 }}
+  onRadiusChange={(z) => {
+    setRadius(z);
+  }}
+  onAnglesChange={(polarAngle, equatorAngle) => {
+    setPolarAngle(polarAngle);
+    setEquatorAngle(equatorAngle);
+  }}
+/>;
+```
+
+### Building
 
 Dev:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimengio/3d-model-viewer",
-  "version": "0.2.0-a1",
+  "version": "0.2.0-a2",
   "description": "threejs-based 3D model viewer used in JimengIO",
   "main": "./lib/index.js",
   "scripts": {
@@ -24,22 +24,29 @@
     "@jimengio/doc-frame": "^0.1.11",
     "@jimengio/flex-styles": "^0.1.6",
     "@jimengio/router-code-generator": "^0.2.5",
+    "@jimengio/ruled-router": "^0.2.23",
     "@jimengio/shared-utils": "^0.1.5",
     "@types/node": "^13.7.0",
     "@types/prettier": "^1.19.0",
-    "@types/query-string": "^6.3.0",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
     "cache-loader": "^4.1.0",
     "css-loader": "^3.4.2",
+    "dayjs": "^1.8.19",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
+    "emotion": "^10.0.27",
     "file-loader": "^5.0.2",
+    "font-awesome": "^4.7.0",
     "fork-ts-checker-webpack-plugin": "^4.0.3",
     "html-webpack-plugin": "^3.2.0",
     "html-webpack-tags-plugin": "^2.0.17",
     "http-server": "^0.12.1",
+    "immer": "^5.3.2",
     "mini-css-extract-plugin": "^0.9.0",
     "prettier": "^1.19.1",
+    "query-string": "^6.10.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "style-loader": "^1.1.3",
     "thread-loader": "^2.1.3",
     "ts-loader": "^6.2.1",
@@ -53,14 +60,6 @@
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.10.2",
-    "dayjs": "^1.8.19",
-    "@jimengio/ruled-router": "^0.2.23",
-    "emotion": "^10.0.27",
-    "font-awesome": "^4.7.0",
-    "immer": "^5.3.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "query-string": "^6.10.1",
     "webpack-hud": "^0.1.2"
   },
   "peerDependencies": {

src/index.tsx

@@ -1,2 +1,2 @@
 export { default as ThreeDViewer } from "./3d-viewer";
-export { default as Old3dModel } from "./old-3d-model-viewer";
+export { default as Old3dModelViewer } from "./old-3d-model-viewer";