@realsee/five 5.0.0-alpha.100

package/templates/quick-start/index.tsx

@@ -0,0 +1,123 @@
+// @ts-nocheck
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Five, Mode, State, Work, parseWork } from "@realsee/five";
+import {
+  createFiveProvider,
+  FiveCanvas,
+  useFiveCurrentState,
+  useFiveWork
+} from "@realsee/five/react";
+
+const FiveProvider = createFiveProvider({
+  imageOptions: { size: 1024 },
+  onlyRenderIfNeeds: true,
+});
+
+const Viewport: React.FC = () => {
+  return <div className="viewport">
+    <FiveCanvas width={512} height={512}></FiveCanvas>
+  </div>
+};
+
+const Controller: React.FC = () => {
+  return <div className="controller">
+    <h1>Five Quick Start</h1>
+    <ModeChangePanel/>
+    <CameraPanel/>
+    <PanoPanel/>
+  </div>
+};
+
+const MODE_LABELS: Partial<Record<Mode, string>> = {
+  [Five.Mode.Panorama]: "全景游走模式",
+  [Five.Mode.Floorplan]: "模型总览模式",
+  [Five.Mode.Topview]: "户型图模式",
+  [Five.Mode.Model]: "模型游走模式",
+}
+
+const ModeChangePanel: React.FC = () => {
+
+  const [state, setState] = useFiveCurrentState();
+
+  const changeMode = React.useCallback((mode: Mode) => setState({ mode }), []);
+  return <div className="panel">
+    <div className="label">模态切换:</div>
+    <div className="content">
+      <div>{MODE_LABELS[state.mode]}</div>
+      <div>
+        <button onClick={() => changeMode(Five.Mode.Panorama)}>{MODE_LABELS[Five.Mode.Panorama]}</button>
+        <button onClick={() => changeMode(Five.Mode.Floorplan)}>{MODE_LABELS[Five.Mode.Floorplan]}</button>
+        <button onClick={() => changeMode(Five.Mode.Topview)}>{MODE_LABELS[Five.Mode.Topview]}</button>
+        <button onClick={() => changeMode(Five.Mode.Model)}>{MODE_LABELS[Five.Mode.Model]}</button>
+      </div>
+    </div>
+  </div>
+}
+
+const CameraPanel: React.FC = () => {
+  const [state, setState] = useFiveCurrentState();
+  return <div className="panel">
+    <div className="label">相机控制:</div>
+    <div className="content">
+      <div>
+        水平角: {state.longitude.toFixed(2)}（弧度）
+      </div>
+      <div>
+        俯仰角: {state.latitude.toFixed(2)}（弧度）
+      </div>
+      <div>
+        可视角度: {state.fov.toFixed(0)}（角度）
+      </div>
+      <div>
+        <button onMouseDown={() => setState({ longitude: state.longitude + 0.01 })}>向左</button>
+        <button onMouseDown={() => setState({ latitude: state.latitude - 0.01 })}>向上</button>
+        <button onMouseDown={() => setState({ latitude: state.latitude + 0.01 })}>向下</button>
+        <button onMouseDown={() => setState({ longitude: state.longitude - 0.01 })}>向右</button>
+        <button onMouseDown={() => setState({ fov: state.fov + 1 })}>可视角度+</button>
+        <button onMouseDown={() => setState({ fov: state.fov - 1 })}>可视角度-</button>
+      </div>
+    </div>
+  </div>
+};
+
+const PanoPanel: React.FC = () => {
+  const [ work ] = useFiveWork();
+  const [currentState, setState] = useFiveCurrentState();
+  const [panos, setPanos] = React.useState<State[]>(() => [currentState]);
+  return <div className="panel">
+    <div className="label">存储快照:</div>
+    <div className="content">
+      {panos.map((state, index) => {
+        return <button key={index} onClick={() => setState(state)}>快照{index + 1}</button>
+      })}
+      <button onClick={() => setPanos(panos.concat(currentState))}>+</button>
+    </div>
+  </div>
+};
+
+const App: React.FC = () => {
+
+  const [work, setWork] = React.useState<Work>();
+
+  const loadWork = React.useCallback((url: string) => {
+    fetch(url)
+      .then(res => res.json())
+      .then(data => setWork(parseWork(data)));
+  }, []);
+
+  React.useEffect(() => {
+    loadWork("./assets/work.json");
+  }, []);
+
+  if (work) {
+    return <FiveProvider initialWork={work} ref={ref => Object.assign(window, { five: ref?.five })}>
+        <div className="layout">
+          <Viewport/><Controller/>
+        </div>
+      </FiveProvider>
+  }
+  return null;
+}
+
+ReactDOM.render(<App></App>, document.getElementById("app"));

package/templates/quick-start/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "five-quick-start",
+  "version": "1.0.0",
+  "description": "five quick start",
+  "scripts": {
+    "dev": "webpack serve",
+    "build": "webpack --config ./webpack.production.js"
+  },
+  "private": true,
+  "devDependencies": {
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "copy-webpack-plugin": "^9.0.1",
+    "html-webpack-plugin": "^5.3.2",
+    "http-server": "^0.12.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "three": "^0.117.1",
+    "ts-loader": "^9.1.1",
+    "typescript": "^4.4.2",
+    "webpack": "^5.35.1",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
+  }
+}

package/templates/quick-start/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "jsx": "react",
+    "target": "ES5",
+    "lib": ["ES5", "DOM"],
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./",
+
+    /* Strict Type-Checking Options */
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "declarationMap": false,
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "esModuleInterop": true,
+    "preserveSymlinks": true,
+
+    /* Experimental Options */
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  }
+}

package/templates/quick-start/webpack.config.js

@@ -0,0 +1,45 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const express = require('express');
+
+module.exports = {
+  context: __dirname,
+  entry: "./index.tsx",
+  output: {
+    path: path.resolve(__dirname, "../dist"),
+    filename: "index.bundle.js"
+  },
+  mode: "development",
+  devtool: "eval-cheap-source-map",
+  devServer: {
+    port: 3000,
+    contentBase: path.resolve(__dirname, "../dist"),
+    before(app) {
+      app.use('/assets/', express.static(path.resolve(__dirname, 'assets')));
+    }
+  },
+  module: {
+    rules: [{
+      test: /\.tsx?$/i,
+      exclude: /node_modules/,
+      use: [{
+        loader: "ts-loader",
+        options: {
+          compilerOptions: {
+            "declaration": false,
+            "sourceMap": true,
+          }
+        },
+      }]
+    }]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, 'index.html'),
+      filename: "index.html",
+    }),
+  ],
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx", ".json"],
+  }
+};

package/templates/quick-start/webpack.production.js

@@ -0,0 +1,42 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+
+module.exports = {
+  context: __dirname,
+  entry: "./index.tsx",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "index.bundle.js"
+  },
+  mode: "production",
+  module: {
+    rules: [{
+      test: /\.tsx?$/i,
+      exclude: /node_modules/,
+      use: [{
+        loader: "ts-loader",
+        options: {
+          compilerOptions: {
+            "declaration": false,
+            "sourceMap": true,
+          }
+        },
+      }]
+    }]
+  },
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: "assets", to: "assets" }
+      ]
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "index.html"),
+      filename: "index.html",
+    })
+  ],
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx", ".json"]
+  }
+};

package/templates/react-component/README.md

@@ -0,0 +1,32 @@
+# Five 插件: a-five-react-component
+
+> 这是一个 Five 的 React 组件。
+> 这个组件的用途是什么。
+> 能干什么。为什么要使用这组件。
+
+## 参数
+
+```typescript
+type PropTypes = {
+  parameter1: number,
+  parameter2: string,
+  children: JSX.Element,
+};
+```
+
+## 如何使用
+
+```typescript
+import { AFiveReactComponent } from "a-five-react-component";
+
+<FiveProvider>
+  <FiveCanvas width={512} height={512}></FiveCanvas>
+
+  {/* 使用 AFiveReactComponent */}
+  <AFiveReactComponent parameter1={123} parameter2={"abc"}>
+    <div>Hello World!</div>
+  </AFiveReactComponent>
+
+</StoreProvider>;
+
+```

package/templates/react-component/devtools/external-five.js

@@ -0,0 +1,5 @@
+if (!('Five' in window)) {
+  throw new Error( '"Five" is not available. Please include "five.js" into your HTML.' );
+}
+
+module.exports = window.Five;

package/templates/react-component/devtools/external-react.js

@@ -0,0 +1,5 @@
+if (!('React' in window)) {
+  throw new Error( '"React" is not available. Please include "React/ReactDOM" into your HTML.' );
+}
+
+module.exports = window.React;

package/templates/react-component/devtools/external-three.js

@@ -0,0 +1,5 @@
+if (!('THREE' in window)) {
+  throw new Error( '"THREE" is not available. "Five" requires it. Please include "THREE.js" into your HTML.' );
+}
+
+module.exports = window.THREE;

package/templates/react-component/devtools/tsconfig.build.json

@@ -0,0 +1,19 @@
+{
+  "include": [
+    "../lib/**/*.ts"
+  ],
+  "compilerOptions": {
+    "jsx": "react",
+    "target": "ES5",
+    "module": "CommonJS",
+    "declaration": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "../lib",
+    "outDir": "../build",
+    "skipLibCheck": true
+  }
+}

package/templates/react-component/devtools/webpack.bundle.js

@@ -0,0 +1,44 @@
+const path = require("path");
+const { NormalModuleReplacementPlugin } = require("webpack");
+
+const name = require("../package.json").name.split("/").pop();
+const libraryName = name.replace(/(^|\-)\w/g, char => char[char.length - 1].toUpperCase());
+
+module.exports = {
+  context: path.join(__dirname, "lib"),
+  entry: {
+    [name]: path.join(__dirname, '../lib/index.tsx'),
+  },
+  output: {
+    path: path.join(__dirname, "../bundles"),
+    filename: "[name].js",
+    library: libraryName,
+    libraryTarget: "umd",
+    libraryExport: libraryName
+  },
+  mode: "production",
+  devtool: "source-map",
+  module: {
+    rules: [{
+      test: /\.tsx?$/i,
+      exclude: /node_modules/,
+      use: [{
+        loader: "ts-loader",
+        options: {
+          configFile: path.join(__dirname, "tsconfig.build.json"),
+          compilerOptions: {
+            "declaration": false,
+            "sourceMap": true,
+          }
+        },
+      }]
+    }],
+  },
+  plugins: [
+    new NormalModuleReplacementPlugin(/^three$/, path.join(__dirname, 'external-three.js')),
+    new NormalModuleReplacementPlugin(/^\@realsee\/five$/, path.join(__dirname, 'external-five.js')),
+  ],
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx", ".json"],
+  }
+}

package/templates/react-component/devtools/webpack.example.js

@@ -0,0 +1,39 @@
+const path = require("path");
+const glob = require("glob");
+
+module.exports = {
+  context: path.join(__dirname, "../examples"),
+  entry: () => {
+    const list = glob.sync("**/index.ts?(x)", { cwd: path.join(__dirname, "../examples") });
+    const entry = {}
+    list.map(filename => {
+      const name = filename.replace(/\.tsx?$/i, '');
+      entry[name] = './' + filename;
+    })
+    return entry;
+  },
+  output: {
+    path: path.join(__dirname, "../examples"),
+    filename: "[name].bundle.js"
+  },
+  mode: "development",
+  devtool: "eval-cheap-source-map",
+  module: {
+    rules: [{
+      test: /\.tsx?$/i,
+      exclude: /node_modules/,
+      use: [{
+        loader: "ts-loader",
+        options: {
+          compilerOptions: {
+            "declaration": false,
+            "sourceMap": true,
+          }
+        },
+      }]
+    }]
+  },
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx", ".json"],
+  }
+};