使用抽屉完成3D场景的抽屉内显示,但是还没有完成每次当数据不同需要重新打开的操作

明天要做的就是要和组件做交互
Signed-off-by: Nxiesi <305492881@qq.com>

src/components/LoadFBX.vue

@@ -16,112 +16,114 @@ export default {
     return {};
   },
   mounted() {
-    console.log(
-      "mounted" + document.getElementById("fbxdiv") + this.fbxfilepath
-    );
-
-    const container = document.getElementById("fbxdiv");
-    let camera, scene, renderer;
-    const clock = new THREE.Clock();
-    let mixer;
-
-    const init = () => {
-      camera = new THREE.PerspectiveCamera(
-        45,
-        container.clientWidth / container.clientHeight,
-        1,
-        2000
+    setTimeout(() => {
+      console.log(
+        "mounted" + document.getElementById("fbxdiv") + this.fbxfilepath
       );
-      camera.position.set(100, 200, 300);
-
-      scene = new THREE.Scene();
-      scene.background = new THREE.Color(0xa0a0a0);
-
-      const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
-      hemiLight.position.set(0, 200, 0);
-      scene.add(hemiLight);
-
-      const dirLight = new THREE.DirectionalLight(0xffffff);
-      dirLight.position.set(0, 200, 100);
-      dirLight.castShadow = true;
-      dirLight.shadow.camera.top = 180;
-      dirLight.shadow.camera.bottom = -100;
-      dirLight.shadow.camera.left = -120;
-      dirLight.shadow.camera.right = 120;
-      scene.add(dirLight);
-
-      // ground
-      const mesh = new THREE.Mesh(
-        new THREE.PlaneGeometry(2000, 2000),
-        new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false })
-      );
-      mesh.rotation.x = -Math.PI / 2;
-      mesh.receiveShadow = true;
-      scene.add(mesh);
-
-      const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
-      grid.material.opacity = 0.2;
-      grid.material.transparent = true;
-      scene.add(grid);
-
-      // model
-      const loader = new FBXLoader();
-      loader.load(
-        "http://localhost/myfbx.php?filepath=" + this.fbxfilepath,
-        function (object) {
-          mixer = new THREE.AnimationMixer(object);
-
-          if (object.animations[0] != null) {
-            const action = mixer.clipAction(object.animations[0]);
-            action.play();
-          }
 
-          object.traverse(function (child) {
-            if (child.isMesh) {
-              child.castShadow = true;
-              child.receiveShadow = true;
+      const container = document.getElementById("fbxdiv");
+      let camera, scene, renderer;
+      const clock = new THREE.Clock();
+      let mixer;
+
+      const init = () => {
+        camera = new THREE.PerspectiveCamera(
+          45,
+          container.clientWidth / container.clientHeight,
+          1,
+          2000
+        );
+        camera.position.set(100, 200, 300);
+
+        scene = new THREE.Scene();
+        scene.background = new THREE.Color(0xa0a0a0);
+
+        const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
+        hemiLight.position.set(0, 200, 0);
+        scene.add(hemiLight);
+
+        const dirLight = new THREE.DirectionalLight(0xffffff);
+        dirLight.position.set(0, 200, 100);
+        dirLight.castShadow = true;
+        dirLight.shadow.camera.top = 180;
+        dirLight.shadow.camera.bottom = -100;
+        dirLight.shadow.camera.left = -120;
+        dirLight.shadow.camera.right = 120;
+        scene.add(dirLight);
+
+        // ground
+        const mesh = new THREE.Mesh(
+          new THREE.PlaneGeometry(2000, 2000),
+          new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false })
+        );
+        mesh.rotation.x = -Math.PI / 2;
+        mesh.receiveShadow = true;
+        scene.add(mesh);
+
+        const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
+        grid.material.opacity = 0.2;
+        grid.material.transparent = true;
+        scene.add(grid);
+
+        // model
+        const loader = new FBXLoader();
+        loader.load(
+          "http://localhost/myfbx.php?filepath=" + this.fbxfilepath,
+          function (object) {
+            mixer = new THREE.AnimationMixer(object);
+
+            if (object.animations[0] != null) {
+              const action = mixer.clipAction(object.animations[0]);
+              action.play();
             }
-          });
 
-          scene.add(object);
-        }
-      );
+            object.traverse(function (child) {
+              if (child.isMesh) {
+                child.castShadow = true;
+                child.receiveShadow = true;
+              }
+            });
+
+            scene.add(object);
+          }
+        );
 
-      renderer = new THREE.WebGLRenderer({ antialias: true });
-      renderer.setPixelRatio(window.devicePixelRatio);
-      renderer.setSize(container.clientWidth, container.clientHeight);
+        renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setSize(container.clientWidth, container.clientHeight);
 
-      renderer.shadowMap.enabled = true;
-      container.appendChild(renderer.domElement);
+        renderer.shadowMap.enabled = true;
+        container.appendChild(renderer.domElement);
 
-      const controls = new OrbitControls(camera, renderer.domElement);
-      controls.target.set(0, 100, 0);
-      controls.update();
+        const controls = new OrbitControls(camera, renderer.domElement);
+        controls.target.set(0, 100, 0);
+        controls.update();
 
-      window.addEventListener("resize", onWindowResize);
+        window.addEventListener("resize", onWindowResize);
 
-      // stats
-      //stats = new Stats();
-      //container.appendChild(stats.dom);
-    };
+        // stats
+        //stats = new Stats();
+        //container.appendChild(stats.dom);
+      };
 
-    const onWindowResize = () => {
-      camera.aspect = container.clientWidth / container.clientHeight;
-      camera.updateProjectionMatrix();
+      const onWindowResize = () => {
+        camera.aspect = container.clientWidth / container.clientHeight;
+        camera.updateProjectionMatrix();
 
-      renderer.setSize(container.clientWidth, container.clientHeight);
-    };
+        renderer.setSize(container.clientWidth, container.clientHeight);
+      };
 
-    const animate = () => {
-      requestAnimationFrame(animate);
-      const delta = clock.getDelta();
-      if (mixer) mixer.update(delta);
-      renderer.render(scene, camera);
-      //stats.update();
-    };
+      const animate = () => {
+        requestAnimationFrame(animate);
+        const delta = clock.getDelta();
+        if (mixer) mixer.update(delta);
+        renderer.render(scene, camera);
+        //stats.update();
+      };
 
-    init();
-    animate();
+      init();
+      animate();
+    }, 1000);
   },
 };
 </script>
@@ -131,4 +133,9 @@ export default {
   width: 100%;
   height: 100%;
 }
+
+canvas {
+  height: 100%;
+  width: 100%;
+}
 </style>
\ No newline at end of file

src/views/Home.vue

@@ -26,14 +26,22 @@
 
     <el-container>
       <el-header style="text-align: center; font-size: 40px">
-        <span>可以添加属性,可以添加到项目,可以添加到打包集合</span>
+        <el-button
+          @click="drawer = true"
+          type="primary"
+          style="margin-left: 16px"
+        >
+          可以添加属性,可以添加到项目,可以添加到打包集合
+        </el-button>
       </el-header>
 
-      <el-main>
-        <LoadFBX fbxfilepath="a.fbx"> </LoadFBX>
-      </el-main>
+      <el-main> hello </el-main>
     </el-container>
   </el-container>
+
+  <el-drawer v-model="drawer" size="70%" :with-header="false">
+    <LoadFBX fbxfilepath="a.fbx"> </LoadFBX>
+  </el-drawer>
 </template>
 
 <script>
@@ -44,6 +52,11 @@ export default {
   components: {
     LoadFBX,
   },
+  data() {
+    return {
+      drawer: false,
+    };
+  },
 };
 </script>