Giter Club home page Giter Club logo

Comments (6)

msdog avatar msdog commented on June 5, 2024 1 
<!doctype html>
<html>

<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">
  <title>自定义三维图层</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }

    #container {
      width: 100%;
      height: 100%;
    }

    /* #container2 {
      width: 50%;
      height: 100%;
      background-color: #c90;
    }

    #container2 canvas {
      width: 100%;
      height: 100%;
    } */
  </style>
</head>

<body style="display: flex;">

  <div id="container"></div>
  <script src="https://unpkg.com/[email protected]/build/three.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.138.3/three.min.js"></script> -->
  <script>
    window.Three = THREE
  </script>
  <script src='https://unpkg.com/@antv/l7'></script>
  <script src='https://unpkg.com/@antv/l7-three'></script>


  <script type="text/javascript">
    console.log(THREE)

    const l7Scene = new L7.Scene({
      id: 'container',
      map: new L7.BaiduMap({
        style: 'dark',
        // token: '',
        center: [110.770672, 34.159869],
        pitch: 45,
      }),
    });

    l7Scene.registerRenderService(L7Three.ThreeRender);
    // 3、构建 threejs 图层对象并在其中添加 threejs 构建的网格对象
    const threeJSLayer = new L7Three.ThreeLayer({
      onAddMeshes: (threeScene, layer) => {
        threeScene.add(new THREE.AmbientLight(0xffffff));

        const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
        sunlight.position.set(0, 80000000, 100000000);
        sunlight.matrixWorldNeedsUpdate = true;
        threeScene.add(sunlight);

        let center = l7Scene.getCenter();

        let cubeGeometry = new THREE.BoxGeometry(10000, 10000, 10000);
        let cubeMaterial = new THREE.MeshNormalMaterial();
        let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
        threeScene.add(cube);
      },
    })
      .animate(true);

    // 4、添加 threejs 图层对象
    l7Scene.addLayer(threeJSLayer);
  </script>
</body>

</html>

from l7.

github-actions avatar github-actions commented on June 5, 2024

hi @msdog, welcome!

from l7.

github-actions avatar github-actions commented on June 5, 2024

Hi @msdog, Please star this repo if you find it useful! Thanks ⭐!
你好 @msdog。如果该仓库对你有用，可以 star 一下，感谢你的 ⭐!

from l7.

lvisei avatar lvisei commented on June 5, 2024

请提供完整示例，如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // xxx
  </script>
</body>
</html>

from l7.

msdog avatar msdog commented on June 5, 2024

腾讯地图也一样

from l7.

lvisei avatar lvisei commented on June 5, 2024

https://github.com/antvis/L7/blob/master/packages/three/src/core/threeRenderService.ts#L68-L79

百度、腾讯、天地图 暂未支持与 THREE 相机同步

from l7.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.