vue 使用Three.js 加载第三方模型

环境：vue2.6 + three.js

1.创建rangmodel.vue 

<template>
  <div>
    <div id="rangeThree_wrap">

      <div class="rangeThree_scene_box">
        <sims />
      </div>

    </div>
  </div>
</template>
<script>
import sims from "@/components/simulation/index";

export default {
  data() {
    return {

    };
  },
  components: {
    sims,
  },
  methods: {



  },
  created() {

  },
};
</script>
<style scoped>

#rangeThree_wrap {
  width: 100%;

  height: 100%;
  position: absolute;
  background: gray;

}
</style>

2.在src/components下创建文件夹simulation，并创建vue文件index.vue

<template>
    <div id="simulation_wrap">
      <!-- <div
        class="contorlBtn"
        @click="handleSimsBtn()"
  
      >
        {{ btnValue }}
      </div> -->
      <div id="canvasBox" />
    </div>
  </template>

<script>

import * as Three from "three";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
// import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
export default {
    name: "sims",
  data() {
    return {
    loading: true,
    scene: new Three.Scene(),
    };
  },

  mounted(){
    this.threeInit();

  },

  methods: {
    threeInit() {
        // 获取canvasBox元素
        const threeBox = document.getElementById("canvasBox");
        // 创建渲染器
        const renderer = new Three.WebGLRenderer({
        antialias: true,
        alpha: true,
      });


    // renderer.setClearColor(new Three.Color(0x515145));
    renderer.setSize(1210, 850);
     // 设置像素比
    renderer.setPixelRatio(window.devicePixelRatio);

    // 创建相机
    const camera = new Three.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000);
    camera.position.x = 0;
    camera.position.y = 300;
    camera.position.z = 390;
    camera.lookAt(this.scene.position);


    window.addEventListener('resize', () => {
    // 更新宽高比
    camera.aspect = window.innerWidth / window.innerHeight
    // 更新相机的投影矩阵
    camera.updateProjectionMatrix()

    renderer.setSize(window.innerWidth, window.innerHeight)
    // 设置像素比
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  })


    //   创建光源
    const hlight = new Three.HemisphereLight(0xffffff);
      hlight.position.set(10, 100, 0);
      this.scene.add(hlight);

      const dlight = new Three.DirectionalLight(0xffffff);
      dlight.position.set(100, 100, 0);
      dlight.castShadow = true;
      this.scene.add(dlight);
      // 实例化一个FBXLoader对象
      const loader = new FBXLoader();
      // 实例化一个FBXLoader对象


// 加载fbx文件
loader.load('/models/beijing.fbx', (model) => {

  // 将模型添加到场景中
  this.scene.add(model);

}, (event) => {

  // 控制台打印加载进度
  console.log((event.loaded / event.total * 100) + '% loaded');

}, (error) => {

  // 控制台打印加载失败
  console.error(error);

});

    //   var url = "/models/beijing.fbx";
    //   loader.load(
    //     url,
    //     (fbx) => {
    //     fbx.scene.scale.set(1600, 1600, 1600); //  设置模型大小缩放

    //       this.scene.add(fbx.scene);

    //       this.loading = false;
    //     },
    //     (xhr) => {
    //       console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
    //     },
    //     (error) => {
    //       console.error(error);
    //     }
    //   );
      
      threeBox.appendChild(renderer.domElement);
      renderer.render(this.scene, camera);

      const controls = new OrbitControls(camera, renderer.domElement);
      const render = () => {
        controls.update();
        requestAnimationFrame(render);
        this.scene.rotateY(0.001);
        renderer.render(this.scene, camera);
      };

      controls.addEventListener("change", () => {
        renderer.render(this.scene, camera);
      });
      render();
    }


  },
  created() {
 
  },
};
</script>



<style scoped>
.loading_wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  background-color: #515151;
  color: #ffffff;
}
</style>

3.模型存放路径：我使用的FBX格式的文件，要在public下创建models，里面放你要使用的模型。不然会报错。