feat: 新增360全景(#0)

client/constants/route.ts

@@ -16,8 +16,7 @@ export enum ROUTE_NAME {
 
   // threejs
   threejsBase = "threejsBase",
-  threejsLine = "threejsLine",
-  threejsText = "threejsText",
+  threejsExample360 = "threejs-example-360",
 
   // 其他
   redirect = "redirect",

client/constants/seo.ts

@@ -115,15 +115,8 @@ export const SEO_META: ISEO_META[] = setMetaWhenDifferentENV([
     route: ROUTE_NAME.threejsBase,
   },
   {
-    title: "ThreeJS练习 —— 画线",
-    keywords: ["three.js", "threejs", "3d"],
-    route: ROUTE_NAME.threejsLine,
-    hidden: true,
-  },
-  {
-    title: "ThreeJS练习 —— 文字",
-    keywords: ["three.js", "threejs", "3d"],
-    route: ROUTE_NAME.threejsText,
-    hidden: true,
+    title: "ThreeJS案例 —— 360全景",
+    keywords: ["three.js", "threejs", "3d", "全景", "360全景", "360图片", "vr展示", "360展示"],
+    route: ROUTE_NAME.threejsExample360,
   },
 ]);

client/router/index.ts

@@ -67,16 +67,10 @@ const routes: RouteRecordRaw[] = [
         meta: { pageTitle: "Three.js基础练习" },
       },
       {
-        path: "threejs-line",
-        name: ROUTE_NAME.threejsLine,
-        component: LazyComponent(() => import("@/views/threejs/base/line")),
-        meta: { pageTitle: "Three.js线条练习" },
-      },
-      {
-        path: "threejs-text",
-        name: ROUTE_NAME.threejsText,
-        component: LazyComponent(() => import("@/views/threejs/base/text")),
-        meta: { pageTitle: "Three.js文字练习" },
+        path: "threejs-360-view",
+        name: ROUTE_NAME.threejsExample360,
+        component: LazyComponent(() => import("@/views/threejs/example/360-view")),
+        meta: { pageTitle: "Three.js - 360全景" },
       },
     ],
   },

client/views/threejs/base/index.tsx

@@ -24,8 +24,6 @@ const ThreeJSBase = defineComponent({
 
     function launch() {
       // 场景、相机、渲染器
-      scene.background = new Three.Color(0x000000);
-
       // 设置场景背景
       scene.background = new Three.Color(0x000000);
       // 天空背景
@@ -97,7 +95,7 @@ const ThreeJSBase = defineComponent({
       // =========  辅助器  =========
 
       // 添加世界坐标系
-      const axesHelper = new Three.AxesHelper(5);
+      const axesHelper = new Three.AxesHelper(1000);
       scene.add(axesHelper);
 
       // 控制器

client/views/threejs/example/360-view.tsx

@@ -0,0 +1,76 @@
+import IPanel from "@/components/common/panel";
+import { defineComponent, onMounted } from "vue";
+import * as Three from "three";
+import "@/views/threejs/base/style.less";
+import { launchResize, launchThreeJS } from "@/views/threejs/helper";
+import { getAssetss } from "@/util";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+
+const View360Page = defineComponent({
+  name: "View360Page",
+  setup() {
+    let wrapper: HTMLBodyElement;
+    const scene = new Three.Scene();
+
+    function launch() {
+      renderCubeSkyBg();
+
+      const camera = new Three.PerspectiveCamera(90, wrapper.offsetWidth / wrapper.offsetHeight, 0.1, 1000);
+      camera.position.set(30, 3, 7);
+
+      const renderer = new Three.WebGLRenderer({ antialias: true });
+      renderer.setSize(wrapper.offsetWidth, wrapper.offsetHeight);
+      wrapper.appendChild(renderer.domElement);
+      renderer.setPixelRatio(window.devicePixelRatio);
+
+      const controls = new OrbitControls(camera, renderer.domElement);
+      controls.enableDamping = true;
+
+      function render() {
+        requestAnimationFrame(render);
+        renderer.render(scene, camera);
+        controls.update();
+      }
+
+      launchThreeJS(render);
+      launchResize(renderer, camera);
+    }
+
+    function renderCubeSkyBg() {
+      const cubeLoader = new Three.CubeTextureLoader();
+      cubeLoader.load(
+        [
+          getAssetss("texture/pos-x.jpg"),
+          getAssetss("texture/neg-x.jpg"),
+          getAssetss("texture/pos-y.jpg"),
+          getAssetss("texture/neg-y.jpg"),
+          getAssetss("texture/pos-z.jpg"),
+          getAssetss("texture/neg-z.jpg"),
+        ],
+        texture => {
+          scene.background = texture;
+        }
+      );
+    }
+
+    onMounted(() => {
+      wrapper = document.querySelector<HTMLBodyElement>("#wrapper")!;
+      launch();
+    });
+
+    return () => (
+      <IPanel
+        withMargin={false}
+        solid
+        top
+      >
+        <div
+          id="wrapper"
+          class="threejs-page"
+        />
+      </IPanel>
+    );
+  },
+});
+
+export default View360Page;