三维模型

利用Three.js的OBJLoader2加载OBJ模型文件，将产出的Three.Mesh对象转换为AMap.Mesh对象展示，模拟楼盘周边配套的展示场景。

源代码编辑器
复制
运行
还原
          <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="//cache.amap.com/lbs/static/main1119.css" />
  <script src="//a.amap.com/jsapi_demos/static/demo-center/model/js/three.js"></script>
  <script src="//a.amap.com/jsapi_demos/static/demo-center/model/js/loaders/MTLLoader.js"></script>
  <script src="//a.amap.com/jsapi_demos/static/demo-center/model/js/loaders/LoaderSupport.js"></script>
  <script src="//a.amap.com/jsapi_demos/static/demo-center/model/js/loaders/OBJLoader2.js"></script>
</head>

<body>
  <div id="container"></div>
  <script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D"></script>
  <script>
    var map = new AMap.Map('container', {
      viewMode: '3D',
      showBuildingBlock: false,
      center: [116.472605, 39.992075],
      pitch: 55,
      zoom: 17
    });
    map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 1);
    map.DirectionLight = new AMap.Lights.DirectionLight([1, 0, -0.5], [1, 1, 1], 1);

    var loadModel = function () {
      var modelName = 'building';
      var scope = this;
      var objLoader = new THREE.OBJLoader2();
      var callbackOnLoad = function (event) {
        var object3Dlayer = new AMap.Object3DLayer();
        var meshes = event.detail.loaderRootNode.children;
        for (var i = 0; i < meshes.length; i++) {
          var vecticesF3 = meshes[i].geometry.attributes.position;
          var vecticesNormal3 = meshes[i].geometry.attributes.normal;
          var vecticesUV2 = meshes[i].geometry.attributes.uv;

          var vectexCount = vecticesF3.count;

          mesh = new AMap.Object3D.MeshAcceptLights();

          var geometry = mesh.geometry;

          //底部一圈
          // debugger

          var c, opacity;

          var material = meshes[i].material[0] || meshes[i].material;
          // debugger
          if (material.map)
            mesh.textures.push('//a.amap.com/jsapi_demos/static/demo-center/model/1519/1519.bmp')

          c = material.color;
          opacity = material.opacity

          // debugger
          for (var j = 0; j < vectexCount; j += 1) {
            var s = j * 3;
            geometry.vertices.push(vecticesF3.array[s], vecticesF3.array[s + 2], -vecticesF3.array[s + 1]);

            if (vecticesNormal3) {
              geometry.vertexNormals.push(vecticesNormal3.array[s], vecticesNormal3.array[s + 2], -vecticesNormal3.array[s + 1]);
            }
            if (vecticesUV2) {
              geometry.vertexUVs.push(vecticesUV2.array[j * 2], 1 - vecticesUV2.array[j * 2 + 1]);
            }
            geometry.vertexColors.push(c.r, c.g, c.b, opacity)
          }
          // debugger
          mesh.DEPTH_TEST = material.depthTest
          // mesh.backOrFront = 'both'
          mesh.transparent = opacity < 1;
          mesh.scale(6, 6, 6)
          mesh.rotateZ(-48)
          mesh.position(new AMap.LngLat(116.472605, 39.992075))
          object3Dlayer.add(mesh)
        }
        map.add(object3Dlayer)
      };

      var onLoadMtl = function (materials) {
        // for(var i=0;i<materials.length;i+=1){
        // 	materials[i].side=2;
        // }
        objLoader.setModelName(modelName);
        objLoader.setMaterials(materials);
        objLoader.load('//a.amap.com/jsapi_demos/static/demo-center/model/1519/1519.obj', callbackOnLoad, null, null, null, false);
      };
      objLoader.loadMtl('//a.amap.com/jsapi_demos/static/demo-center/model/1519/1519.mtl', null, onLoadMtl);
    };
    var A = new AMap.Text({
      text: 'XX大厦A座',
      position: [116.472476, 39.991878],
      height: 650,
      verticalAlign: 'bottom',
      map: map,
      style: {
        'background-color': 'red',
        'border-color': 'white',
        'font-size': '12px'
      }
    })

    var B = new AMap.Text({
      text: 'XX大厦B座',
      verticalAlign: 'bottom',
      position: [116.47286, 39.992178],
      height: 651,
      map: map,
      style: {
        'background-color': 'red',
        'border-color': 'white',
        'font-size': '12px'
      }
    })
    new AMap.Circle({
      center: [116.47246, 39.992133],
      map: map,
      radius: 700,
      fillColor: 'blue',
      strokeWeight: 1,
      strokeColor: 'white',
      fillOpacity: 0.05
    })
    new AMap.Circle({
      center: [116.47246, 39.992133],
      map: map,
      radius: 500,
      fillColor: 'blue',
      strokeWeight: 1,
      strokeColor: 'white',
      fillOpacity: 0.05
    })
    new AMap.Circle({
      center: [116.47246, 39.992133],
      map: map,
      radius: 300,
      fillColor: 'blue',
      strokeWeight: 1,
      strokeColor: 'white',
      fillOpacity: 0.05
    })
    var shopping = new AMap.Marker({
      icon: '//a.amap.com/jsapi_demos/static/resource/shopping.png',
      offset: new AMap.Pixel(-32, -54),
      position: [116.468833, 39.992834],
      map: map,
    })
    new AMap.Polyline({
      path: [[116.47246, 39.992133], [116.468833, 39.992834]],
      strokeColor: 'blue',
      lineCap: 'round',
      isOutline: true,
      outlineColor: 'white',
      showDir: true,
      map: map,
      strokeWeight: 5,
      borderWeight: 2,
      strokeOpacity: 0.5
    })
    new AMap.Text({
      text: '购物320米',
      position: [116.470123, 39.992572],
      map: map,
      style: {
        'background-color': '#ccccff',
        'border-color': 'white',
        'font-size': '12px'
      }
    })
    var hospital = new AMap.Marker({
      icon: '//a.amap.com/jsapi_demos/static/resource/hospital.png',
      offset: new AMap.Pixel(-32, -54),
      position: [116.473154, 39.997106],
      map: map,
    })
    new AMap.Polyline({
      path: [[116.47246, 39.992133], [116.473154, 39.997106]],
      strokeColor: 'red',
      lineCap: 'round',
      isOutline: true,
      outlineColor: 'white',
      showDir: true,
      map: map,
      strokeWeight: 5,
      borderWeight: 2,
      strokeOpacity: 0.5
    })
    new AMap.Text({
      text: '医院550米',
      position: [116.472836, 39.994887],
      map: map,
      style: {
        'background-color': '#ccccff',
        'border-color': 'white',
        'font-size': '12px'
      }
    })
    var school = new AMap.Marker({
      icon: '//a.amap.com/jsapi_demos/static/resource/school.png',
      offset: new AMap.Pixel(-32, -54),
      position: [116.47106, 39.994558],
      map: map
    })
    new AMap.Polyline({
      path: [[116.47246, 39.992133], [116.47106, 39.994558]],
      strokeColor: 'green',
      lineCap: 'round',
      isOutline: true,
      outlineColor: 'white',
      showDir: true,
      map: map,
      strokeWeight: 5,
      borderWeight: 2,
      strokeOpacity: 0.5
    })
    new AMap.Text({
      text: '学校300米',
      position: [116.471626, 39.993571],
      map: map,
      style: {
        'background-color': '#ccccff',
        'border-color': 'white',
        'font-size': '12px'
      }
    })
    loadModel()
  </script>
</body>

</html>
        
控制台
清空
示例
中心常见
问题智能
客服