Vue项目中可以有两个方式引入threebox。
npm方式:
1.先安装three和threebox-map
1 npm install three --save 2 npm install threebox-map --save
引入
1 import * as THREE from 'three' 2 import { Threebox } from 'threebox-map'
2.初始化threebox前,设置window.THREE = THREE
1 let tb = null 2 window.THREE = THREE 3 map && map.addLayer({ 4 id: constConfig.layers.VEHICLE, 5 type: 'custom', 6 renderingMode: '3d', 7 onAdd: function (map, mbxContext) { 8 tb = new Threebox( 9 map, 10 mbxContext, 11 { defaultLights: true } 12 ) 13 that.threebox = tb 14 let options = { 15 obj: './static/models/Truck.obj', 16 mtl: './static/models/Truck.mtl', 17 scale: 0.1 18 } 19 tb.loadObj(options, function (model) { 20 let truck = model.setCoords(origin) 22 truck.scale.set(0.5, 0.5, 0.5) 23 tb.add(truck) 24 that.vehicle = truck 25 }) 26 }, 27 render: function (gl, matrix) { 28 tb.update() 29 } 30 })
本地文件引入:
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下
1 import '@static/libs/threebox.js'
这里构建的threebox已包含了THREE,不需要单独引入了。
使用window.Threebox,可以重新赋值为Threebox,其他无区别
1 let tb = null 2 let Threebox = window.Threebox 3 map && map.addLayer({ 4 id: constConfig.layers.VEHICLE, 5 type: 'custom', 6 renderingMode: '3d', 7 onAdd: function (map, mbxContext) { 8 tb = new Threebox( 9 map, 10 mbxContext, 11 { defaultLights: true } 12 ) 13 that.threebox = tb 14 let options = { 15 obj: './static/models/Truck.obj', 16 mtl: './static/models/Truck.mtl', 17 scale: 10 18 } 19 tb.loadObj(options, function (model) { 20 let truck = model.setCoords(origin) 22 truck.scale.set(0.5, 0.5, 0.5) 23 tb.add(truck) 24 that.vehicle = truck 25 }) 26 }, 27 render: function (gl, matrix) { 28 tb.update() 29 } 30 })
代码中的map为mapboxgl。