修改延时问题

Signed-off-by: Nxiesi <305492881@qq.com>

src/components/LoadFBX.vue

@@ -16,113 +16,111 @@ export default {
     return {};
   },
   mounted() {
-    setTimeout(() => {
-      console.log(
-        "mounted" + document.getElementById("fbxdiv") + this.fbxfilepath
+    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 mw = document.documentElement.clientWidth * 0.7;
+    const mh = document.documentElement.clientHeight;
+    console.log(mw + "," + mh);
+
+    const init = () => {
+      camera = new THREE.PerspectiveCamera(45, mw / mh, 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();
+          }
 
-      const container = document.getElementById("fbxdiv");
-      let camera, scene, renderer;
-      const clock = new THREE.Clock();
-      let mixer;
-
-      const mw = document.documentElement.clientWidth * 0.7;
-      const mh = document.documentElement.clientHeight;
-      console.log(mw + "," + mh);
-
-      const init = () => {
-        camera = new THREE.PerspectiveCamera(45, mw / mh, 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();
+          object.traverse(function (child) {
+            if (child.isMesh) {
+              child.castShadow = true;
+              child.receiveShadow = true;
             }
+          });
 
-            object.traverse(function (child) {
-              if (child.isMesh) {
-                child.castShadow = true;
-                child.receiveShadow = true;
-              }
-            });
-
-            scene.add(object);
-          }
-        );
+          scene.add(object);
+        }
+      );
 
-        renderer = new THREE.WebGLRenderer({ antialias: true });
-        renderer.setPixelRatio(window.devicePixelRatio);
-        renderer.setSize(mw, mh);
+      renderer = new THREE.WebGLRenderer({ antialias: true });
+      renderer.setPixelRatio(window.devicePixelRatio);
+      renderer.setSize(mw, mh);
 
-        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();
-    }, 1000);
+    init();
+    animate();
   },
   methods: {
     hello() {