Vue項目引入Threebox

Vue項目中可以有兩個方式引入threebox。

npm方式：

1.先安裝three和threebox-map

npm install three --save
npm install threebox-map --save

引入

import * as THREE from 'three'
import { Threebox } from 'threebox-map'

2.初始化threebox前，設置window.THREE = THREE

let tb = null
    window.THREE = THREE
    map && map.addLayer({
      id: constConfig.layers.VEHICLE,
      type: 'custom',
      renderingMode: '3d',
      onAdd: function (map, mbxContext) {
        tb = new Threebox(
          map,
          mbxContext,
          { defaultLights: true }
        )
        that.threebox = tb
        let options = {
          obj: './static/models/Truck.obj',
          mtl: './static/models/Truck.mtl',
          scale: 0.1
        }
        tb.loadObj(options, function (model) {
          let truck = model.setCoords(origin)
          truck.scale.set(0.5, 0.5, 0.5)
          tb.add(truck)
          that.vehicle = truck
        })
      },
      render: function (gl, matrix) {
        tb.update()
      }
    })

 

本地文件引入：

 1.從github上克隆 https://github.com/shiyuan598/threebox.git，build后得到dist/threebox.js

或直接下載https://raw.githubusercontent.com/shiyuan598/threebox/master/dist/threebox.js

2.把threebox.js 放入項目的static/libs下

import '@static/libs/threebox.js'

這里構建的threebox已包含了THREE，不需要單獨引入了。

使用window.Threebox，可以重新賦值為Threebox，其他無區別

let tb = null
    let Threebox = window.Threebox
    map && map.addLayer({
      id: constConfig.layers.VEHICLE,
      type: 'custom',
      renderingMode: '3d',
      onAdd: function (map, mbxContext) {
        tb = new Threebox(
          map,
          mbxContext,
          { defaultLights: true }
        )
        that.threebox = tb
        let options = {
          obj: './static/models/Truck.obj',
          mtl: './static/models/Truck.mtl',
          scale: 10
        }
        tb.loadObj(options, function (model) {
          let truck = model.setCoords(origin)
          truck.scale.set(0.5, 0.5, 0.5)
          tb.add(truck)
          that.vehicle = truck
        })
      },
      render: function (gl, matrix) {
        tb.update()
      }
    })

代碼中的map為mapboxgl。