maptalks+three.js+vue webpack 2 차원 지도 에 3 차원 모델 을 붙 이 는 작업 을 실현 합 니 다.

10890 단어 maptalksthree.jsvuewebpack2 차원 지도3 차원 모델
우 리 는 구덩이 안 을 걷 는 것 이 아니 라 구덩이 로 가 는 길 을 걷 는 것 이다 (:зf∠)_
최종 효 과 는 그림 과 같다.(지도 에'3 차원 지도'의 toolbar 단 추 를 추가 하고 클릭 한 후 2 차원 지도 에 건 설 된 3 차원 모델 을 붙 이 고 탄 상 자 를 표시 하려 면 클릭 하 십시오)

다음은 모두 maptalks 지 도 를 도입 하고 초기 화 한 토대 에서 maptalks 를 어떻게 도입 하 는 지 아래 글 을 볼 수 있 습 니 다.
https://www.jb51.net/article/192983.htm
1.maptalks.three 패키지 설치
npm install maptalks.three
2,3 팩 설치
npm install three
3.obj-loader 와 mtl-loader 패 키 지 를 설치 합 니 다.
npm i --save three-obj-mtl-loader
4.model 모델 파일 을 Public 에 도입 합 니 다.(여기에 두 는 것 은 포장 후 경로 문 제 를 읽 기 때 문 입 니 다.현재 여기에 두 어야 포장 후 정확하게 읽 을 수 있 습 니 다)

5.Vue 페이지 코드
인입 가방

import * as THREE from 'three'
import * as maptalks from 'maptalks'
import { ThreeLayer } from 'maptalks.three'
import { MTLLoader, OBJLoader } from 'three-obj-mtl-loader'
초기 화 된 맵 대상 은?this.map다음은 3 차원 모델 을 렌 더 링 하 는 방법 입 니 다.

//     
draw3D() {
 const that = this
 //     
 var three_flag = false
 // ///       
 var INTERSECTED
 this.map.on('click', function(e) {
  //  console.log(e)
  var raycaster = new THREE.Raycaster()
  var mouse = new THREE.Vector2()
  const camera = threeLayer.getCamera()
  const scene = threeLayer.getScene()
  if (!scene) return
 
  const size = that.map.getSize()
  const width = size.width; const height = size.height
  mouse.x = (e.containerPoint.x / width) * 2 - 1
  mouse.y = -((e.containerPoint.y) / height) * 2 + 1
 
  raycaster.setFromCamera(mouse, camera)
  raycaster.linePrecision = 3
 
  var intersects = raycaster.intersectObjects(scene.children, true)
  // var intersects = raycaster.intersectObject(points);
  if (!intersects) return
  if (Array.isArray(intersects) && intersects.length === 0) return
  console.log(intersects)
  //               
  if (intersects.length > 0) {
   if (INTERSECTED != intersects[0].object) {
    if (INTERSECTED) {
     // INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
     // INTERSECTED.scale.set(1,1,1);
     if (INTERSECTED.material.length === undefined) {
      INTERSECTED.material.color.setHex(INTERSECTED.currentHex)
     } else {
      for (var i = 0; i < INTERSECTED.material.length; i++) {
       INTERSECTED.material[i].color.setHex(INTERSECTED.currentHex)
      }
     }
    }
    INTERSECTED = intersects[0].object
 
    //              
    // INTERSECTED.currentHex = INTERSECTED.material[0].color.getHex();
    INTERSECTED.currentHex = 16777215
    //              
    // INTERSECTED.material.opacity = 0.2;
 
    // INTERSECTED.material.transparent = true;
    // INTERSECTED.material.opacity = 0.2;
    // INTERSECTED.material.needsUpdate = true;
    // INTERSECTED.material.transparent = false;
 
    // INTERSECTED.material.color.setHex(0xff0000);
    if (INTERSECTED.material.length === undefined) {
     INTERSECTED.material.color.setHex(0x1E90FF)
    } else {
     for (var i = 0; i < INTERSECTED.material.length; i++) {
      INTERSECTED.material[i].color.setHex(0x1E90FF)
     }
    }
   }
   // //////////////
   var lonlat = e.coordinate
   if (true) {
    var options = {
     'autoOpenOn': 'null', // set to null if not to open window when clicking on map
     'single': true,
     'width': 410,
     'height': 190,
     'custom': true,
     'autoCloseOn': 'click',
     'dy': -316,
     'content': '<div class="content build-content">' +
      '<div class="pop-img"><img src="http://pde56fqkk.bkt.clouddn.com/1544760152593.jpg"/><p class="pop-name build-pop-name" id="viewDetial"><span class="text-ellipsis" title="    ">    </span><a>  <i class="el-icon-arrow-right"></i></a></p></div>' +
      '<div class="pop-txt"><ul><li>    ：<span>12  </span> </li><li>    ：<span>1000  </span> </li><li>    ：<span>100  </span> </li><li>    ：<span>500  </span> </li><li>    ：<span>0  </span> </li><li>    ：<span>0  </span> </li><li>    ：<span>0  </span> </li><li>    ：<span>0  </span></li></ul></div>' +
      '</div>'
    }
    var infoWindow = new maptalks.ui.InfoWindow(options)
    infoWindow.addTo(that.map).show(lonlat)
   }
  } else {
   //                
   if (INTERSECTED) {
    // INTERSECTED.material.color.set(INTERSECTED.currentHex);
    if (INTERSECTED.material.length === undefined) {
     INTERSECTED.material.color.setHex(INTERSECTED.currentHex)
    } else {
     for (var i = 0; i < INTERSECTED.material.length; i++) {
      INTERSECTED.material[i].color.setHex(INTERSECTED.currentHex)
     }
     // INTERSECTED.scale.set(1,1,1);
    }
   }
   INTERSECTED = null
  }
  threeLayer.renderScene()
 })
 
 function closeBox() {
  var theClose = document.getElementById('close_id')
  var cont = document.getElementById('infow')
  cont.style.display = 'none'
 }
 
 // ///       
 // the ThreeLayer to draw buildings
 // //ThreeLayer   
 var threeLayer = new ThreeLayer('t_forbcmp', {
  forceRenderOnMoving: true,
  forceRenderOnRotating: true,
  animation: true
 })
 
 threeLayer.prepareToDraw = function(gl, scene, camera) {
  var me = this
  // var light = new THREE.PointLight(0xffffff);
  // camera.add(light);
  // let axes=new THREE.AxesHelper(200000000);
  // scene.add(axes);
  var light0 = new THREE.DirectionalLight('#ffffff', 0.5)
  light0.position.set(800, 800, 800).normalize()
  light0.castShadow = true
  camera.add(light0)
  //    
  var light01 = new THREE.AmbientLight('#f7fdf9')
  light01.castShadow = true
  scene.add(light01)
  // var light1 = new THREE.DirectionalLight("#ffffff");
  // light1.position.set(-800,-800,800).normalize();
  // light1.castShadow = true;
  // camera.add(light1);
 
  //     obj mtl  
  // addmtlLoaderTest(13.438186479666001,52.530305072175594);
  // addmtlLoaderTestforMTL(13.436186479666001,52.530305072175594);
  //       ,
  var mtlPath = process.env.BASE_URL + 'model/obj/'
  var mtlName = '3d_puruan_new.mtl'
  var objPath = process.env.BASE_URL + 'model/obj/'
  var objName = '3d_puruan3.obj'
  var objlon = 121.60499979860407
  var objlat = 31.20150084741559
  addLoaderForObj(objlon, objlat, mtlPath, mtlName, objPath, objName)
 }
 
 threeLayer.addTo(that.map).hide()
 
 // ////////////////      
 //   obj+mtl
 function addLoaderForObj(lon, lat, mtlPath, mtlName, objPath, objName) {
  const me = threeLayer
  const scene = me.getScene()
  const scale = -0.0007
  var mtlLoader = new MTLLoader()
  //     mtl
  mtlLoader.setPath(mtlPath)
  mtlLoader.load(mtlName, function(materials) {
   materials.preload()
   var objLoader = new OBJLoader()
   objLoader.setMaterials(materials)
   //     obj Math.PI*3/2
   objLoader.setPath(objPath)
   objLoader.load(objName, function(object) {
    object.traverse(function(child) {
     if (child instanceof THREE.Mesh) {
      child.scale.set(scale, scale, scale)
      child.rotation.set(-Math.PI / 2, Math.PI, 0)
      //          ,  （0xFFFFFF）   0x0000FF
      for (var i = 0; i < child.material.length; i++) {
       child.material[i].color.setHex(0x0000FF)
      }
     }
    })
 
    var v = threeLayer.coordinateToVector3(new maptalks.Coordinate(lon, lat))
    object.position.set(v.x, v.y, 0)
    scene.add(object)
    mtlLoaded = true
    threeLayer.renderScene()
   })
   // var mm = new THREE.MeshPhongMaterial({color:0xFF0000});
   // objLoader.setMaterials( mm );
   // objLoader.setMaterials(materials);
  })
 }
 var toolbar = new maptalks.control.Toolbar({
  position: { 'right': 40, 'bottom': 40 },
  items: [
   {
    item: '       ',
    click: function() {
     if (three_flag === false) {
      that.map.animateTo({
       center: [121.6050804009, 31.2015354151],
       zoom: 18,
       pitch: 45
      }, {
       duration: 2000
      })
      threeLayer.show()
      three_flag = true
     } else {
      that.map.animateTo({
       center: [121.6050804009, 31.2015354151],
       zoom: 18,
       pitch: 0
      }, {
       duration: 2000
      })
      threeLayer.hide()
      three_flag = false
     }
     console.log('obj  ')
    }
   }
  ]
 }).addTo(this.map)
}
위의 이 코드 는 모델 데이터 파일 의 읽 기 경 로 를 주의해 야 합 니 다.

//       ,
var mtlPath = process.env.BASE_URL + 'model/obj/'
var mtlName = '3d_puruan_new.mtl'
var objPath = process.env.BASE_URL + 'model/obj/'
var objName = '3d_puruan3.obj'
process.env.BASE 에 대하 여URL 의 값 은 vue.config.js 에서 사용자 정의 로 설정 할 수 있 습 니 다(cli 3.0)
baseUrl: process.env.NODE_ENV === 'production' ? '/bcmp-web/' : '/',
draw3D 의 코드 에 대해 상세 한 설명 을 하지 않 았 습 니 다.필요 하 다 면 상세 한 방법 으로 소개 하 겠 습 니 다.
보충 지식:Vue npm 설치 Vue 상용 의존,axios,element ui,mockjs
axios 의존 추가:
npm install axios
요소 추가-ui:
npm i element-ui -S
mockjs 추가:
npm install mockjs
이상 의 이 maptalks+three.js+vue webpack 은 2 차원 지도 에 3 차원 모델 을 붙 이 는 작업 을 실현 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
Shell 스 크 립 트 의 특수 문자(달러 문자,역 슬 래 쉬,따옴표 등)역할 소개
Powershell 은 레 지 스 트 에서 사용자 설정 스 크 립 트 공 유 를 가 져 옵 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage