• Vue项目引入Threebox


    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。

  • 相关阅读:
    C#解决界面不响应
    C#调用SendMessage 用法
    C#开机自动启动程序代码
    C# WinForm使用乐器数字接口
    以下C#程序的输出结果是( )。
    C# 关键字extern用法
    C#循环测试题
    C#播放wav文件
    Matches正则使用提取内容
    C#测试题若干,都是基础阿
  • 原文地址:https://www.cnblogs.com/jyughynj/p/12190867.html
Copyright © 2020-2023  润新知