MapBox和amp;ThreeJS加载FBX动态模型

1、Dom元素：

 2、import引入：

3、data（定义map，camera（镜头），scene（场景），stats（），mixer（），clock（时钟），customLayer（MapBox自定义图层））：

 4、methods（定位模型位置，创建自定义图层，加载模型，设置场景，设置镜头，设置光照，地图重新渲染将自定义层的模型加载到地图上，解析fbx模型骨骼动画，通过threejs的clock控件获得两帧之间的时间间隔，执行再次渲染函数render，渲染下一帧。）：

1.  
   methods: {
2.  
   initFBX() {
3.  
   var mapSecond = this.map
4.  
   // 用于确保模型在地图上正确地理参照的参数
5.  
   var modelOrigin = [148.9818395, -35.3985293]
6.  
   var modelAltitude = 0
7.  
   var modelRotate = [Math.PI / 2, 0, 0]
8.  
    
9.  
   var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude)
10.  
     
11.  
    // 将三维模型定位、旋转和缩放到地图上的变换参数
12.  
    var modelTransform = {
13.  
    translateX: modelAsMercatorCoordinate.x,
14.  
    translateY: modelAsMercatorCoordinate.y,
15.  
    translateZ: modelAsMercatorCoordinate.z,
16.  
    rotateX: modelRotate[0],
17.  
    rotateY: modelRotate[1],
18.  
    rotateZ: modelRotate[2],
19.  
    /* Since our 3D model is in real world meters, a scale transform needs to be
20.  
    * applied since the CustomLayerInterface expects units in MercatorCoordinates.
21.  
    * 坐标转换，转为WebMercator
22.  
    */
23.  
    scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits(),
24.  
    }
25.  
     
26.  
    var that = this
27.  
    // 为三维模型配置自定义图层
28.  
    this.customLayer = {
29.  
    id: '3d-model',
30.  
    type: 'custom',
31.  
    source: 'radar',
32.  
    renderingMode: '3d',
33.  
     
34.  
    onAdd: function (map, gl) {
35.  
    that.camera = new THREE.Camera()
36.  
    that.scene = new THREE.Scene()
37.  
    that.clock = new THREE.Clock()
38.  
     
39.  
    // 创建光源
40.  
    //环境光，无光照角度变化效果
41.  
    var ambient = new THREE.AmbientLight(0xffffff)
42.  
    that.scene.add(ambient)
43.  
    //平行光，比如太阳光
44.  
    // var directionalLight = new THREE.DirectionalLight(0xffffff)
45.  
    // directionalLight.position.set(0, -70, 100).normalize()
46.  
    // this.scene.add(directionalLight)
47.  
     
48.  
    // var directionalLight2 = new THREE.DirectionalLight(0xffffff)
49.  
    // directionalLight2.position.set(0, 70, 100).normalize()
50.  
    // this.scene.add(directionalLight2)
51.  
     
52.  
    // use the three.js GLTF loader to add the 3D model to the three.js scene
53.  
    var loader = new FBXLoader()
54.  
    loader.load(
55.  
    'http://219.146.77.222:18024/gis/Map/JumpingDown.fbx',
56.  
    function (fbx) {
57.  
    console.log(fbx.animations)
58.  
    that.scene.add(fbx)
59.  
    fbx.translateY(-80)
60.  
    that.mixer = new THREE.AnimationMixer(fbx)
61.  
    var AnimationAction = that.mixer.clipAction(fbx.animations[0])
62.  
    AnimationAction.play() //播放动画
63.  
    }.bind(that)
64.  
    )
65.  
     
66.  
    // use the Mapbox GL JS map canvas for three.js
67.  
    that.renderer = new THREE.WebGLRenderer({
68.  
    canvas: map.getCanvas(),
69.  
    context: gl,
70.  
    antialias: true,
71.  
    })
72.  
    that.renderer.autoClear = false
73.  
    that.clock = new THREE.Clock()
74.  
    },
75.  
    render: function (gl, matrix) {
76.  
    var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX)
77.  
    var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY)
78.  
    var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ)
79.  
     
80.  
    var m = new THREE.Matrix4().fromArray(matrix)
81.  
    var l = new THREE.Matrix4()
82.  
    .makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ)
83.  
    .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
84.  
    .multiply(rotationX)
85.  
    .multiply(rotationY)
86.  
    .multiply(rotationZ)
87.  
     
88.  
    that.camera.projectionMatrix = m.multiply(l)
89.  
     
90.  
    that.renderer.state.reset()
91.  
     
92.  
    that.renderer.render(that.scene, that.camera)
93.  
     
94.  
    if (that.mixer !== null) {
95.  
    //clock.getDelta()方法获得两帧的时间间隔
96.  
    // 更新混合器相关的时间
97.  
     
98.  
    that.mixer.update(that.clock.getDelta())
99.  
    }
100.  
     },
101.  
     }
102.  
     //重新渲染地图
103.  
     mapSecond.on('style.load', () => {
104.  
     mapSecond.addLayer(this.customLayer, 'waterway-label')
105.  
     window.requestAnimationFrame(this.render)
106.  
     })
107.  
     },
108.  
     render(gl, matrix) {
109.  
     this.map.setFeatureState(
110.  
     {
111.  
     source: 'radar',
112.  
     sourceLayer: 'my-source-layer',
113.  
     id: '3d-model',
114.  
     },
115.  
     {
116.  
     hover: true,
117.  
     }
118.  
     )
119.  
     try {
120.  
     } catch {}
121.  
     window.requestAnimationFrame(this.render)
122.  
     },
123.  
     },

 5、mounted（加载地图，执行initFBX方法）：

1.  
   mounted() {
2.  
   mapboxgl.accessToken ='输入自己的token'
3.  
   this.map = new mapboxgl.Map({
4.  
   container: 'map', // container id
5.  
   style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
6.  
   center: [148.9819, -35.39847], // starting position [lng, lat]
7.  
   zoom: 18, // starting zoom
8.  
   pitch: 60,
9.  
   antialias: true, // create the gl context with MSAA antialiasing, so custom layers are antialiased
10.  
    })
11.  
    this.initFBX()
12.  
    }

6、style（定义地图样式）：

这篇好文章是转载于：学新通技术网