LoadFBX.vue

<template>
  <div id="fbxdiv" class="LoadFBX"></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";

export default {
  name: "LoadFBX",
  props: {
    fbxfilepath: String,
  },
  data() {
    return {};
  },
  mounted() {
    setTimeout(() => {
      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();
            }

            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(mw, mh);

        renderer.shadowMap.enabled = true;
        container.appendChild(renderer.domElement);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 100, 0);
        controls.update();

        window.addEventListener("resize", onWindowResize);

        // stats
        //stats = new Stats();
        //container.appendChild(stats.dom);
      };

      const onWindowResize = () => {
        camera.aspect = container.clientWidth / container.clientHeight;
        camera.updateProjectionMatrix();

        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();
      };

      init();
      animate();
    }, 1000);
  },
  methods: {
    hello() {
      console.log("hello");
    },
  },
};
</script>

<style lang="scss" scoped>
#fbxdiv {
  width: 100%;
  height: 100%;
}

canvas {
  height: 100%;
  width: 100%;
}
</style>