vue 加载 three.js 模型（fbx,json）

今天我需要在我的项目中引入three.js，并且使用three.js加载fbx模型跟json模型这两种类型的模型。其中遇到了蛮多的问题的，再次跟大家分享一下。

首先在我们的项目中引入相关插件

npm install three --save

接下来我们把需要加载的模型放到static下面，

注意，必须放入static文件夹下，否则可能出现无法访问的情况。

 

 加载fbx模型代码

<template>
  <div id="app">demo</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 {
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      controls: null,
      modelPath: "static/model/SambaDancing.fbx"
    };
  },
  methods: {
    init() {
      let self = this;

      let container = document.getElementById("app");
      let mouse = new THREE.Vector2();
      self.camera = new THREE.PerspectiveCamera(
        45,
        container.clientWidth / container.clientHeight,
        0.01,
        2000
      );
      self.camera.position.set(100, 200, 300);
      self.scene = new THREE.Scene();
      // ground
      var mesh = new THREE.Mesh(
        new THREE.PlaneBufferGeometry(2000, 2000),
        new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false })
      );
      mesh.rotation.x = -Math.PI / 2;
      mesh.receiveShadow = true;
      self.scene.add(mesh);

      var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
      grid.material.opacity = 0.2;
      grid.material.transparent = true;
      self.scene.add(grid);

      self.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        precision: "highp"
      });
      self.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(self.renderer.domElement)

      self.controls = new OrbitControls(self.camera, self.renderer.domElement);
      self.controls.target.set(0, 100, 0);
      self.controls.update();
      var light = new THREE.HemisphereLight(0xffffff, 0x444444);
      light.position.set(0, 200, 0);
     self. scene.add(light);

      light = new THREE.DirectionalLight(0xffffff);
      light.position.set(0, 200, 100);
      light.castShadow = true;
      light.shadow.camera.top = 180;
      light.shadow.camera.bottom = -100;
      light.shadow.camera.left = -120;
      light.shadow.camera.right = 120;
      self.scene.add(light);
      let fbxLoader = new FBXLoader();
      fbxLoader.load(self.modelPath, function(object) {
        self.scene.add(object);
      });
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.clear();
      this.renderer.render(this.scene, this.camera);
      this.renderer.clearDepth();
    }
  },
  mounted() {
    this.init();
    this.animate();
  }
};
</script>
<style lang="less" scoped>
#app {
  height: 100%;
  width: 100%;
}
</style>

效果如下：

 

记下来，先去获得一个json格式的模型，官网下载一个three.js的项目，然后打开three.js编辑器，然后把fbx模型导入

导入json模型的代码只要在之前代码的基础上，修改掉模型导入的路径

跟加载模型的方式就可以了

1.可能会遇到模型加载不出来的问题

a.确保把模型放在了static文件夹下面

b.是否导入的模型太大或者太小了，调整一下模型的大小

c.是否没有添加灯光之类的，如果场景一片漆黑的情况

 

点击下载