@realsee/five 6.0.0-alpha.9 → 6.0.0-alpha.91

package/templates/quick-start/index.tsx

@@ -1,123 +0,0 @@
-// @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

@@ -1,25 +0,0 @@
-{
-  "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

@@ -1,27 +0,0 @@
-{
-  "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

@@ -1,45 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,32 +0,0 @@
-# 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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,19 +0,0 @@
-{
-  "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

@@ -1,44 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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"],
-  }
-};