threejs加载gltf模型

项目需要threejs加载gltf模型，查阅网上资料很多，但都为实现，查看例子的源码终于实现出来

gltfLoader (url) {
      let self = this
      // 获取threejs的渲染div
      let container = document.getElementById("ThreeContainer")
      // 内容渲染
      this.renderer = new THREE.WebGLRenderer( { antialias: true } );
      this.renderer.setSize( container.clientWidth, container.clientHeight );
      container.appendChild( this.renderer.domElement );
      // 创建摄像机
      this.camera = new THREE.PerspectiveCamera( 45, container.clientWidth / container.clientHeight, 0.1, 1000 );
			this.camera.position.set( 0, 100, 50 )
      // 创建室内环境
      const environment = new RoomEnvironment();
      const pmremGenerator = new THREE.PMREMGenerator( self.renderer );
      // 创建创景
      this.scene = new THREE.Scene();
      this.scene.environment = pmremGenerator.fromScene( environment ).texture;
      // 加载gltf格式
      const loader = new GLTFLoader()
				loader.load( url, function ( gltf ) {
        gltf.scene.position.y = 8;
        self.scene.add( gltf.scene );
        self.render()
      })
      // 设置缩放旋转控制
      const controls = new OrbitControls( self.camera, self.renderer.domElement );
      controls.addEventListener( 'change', self.render )
      controls.minDistance = 400;
      controls.maxDistance = 1000;
      controls.target.set( 10, 90, - 16 );
      controls.update();
      // 屏幕自适应
      window.addEventListener( 'resize', this.onWindowResize, false )
    },
    onWindowResize() {
      let container = document.getElementById("ThreeContainer")
      this.camera.aspect = container.clientWidth / container.clientHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize( container.clientWidth, container.clientHeight );
      this.render();
    },
    render () {
      this.renderer.render( this.scene, this.camera );
    }