threejs实现三维山峦山峰标注沙盘图效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：threejs实现三维山峦山峰标注沙盘图效果代码画效果代码，可设置明暗度、线框数量等参数。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400&display=swap" rel="stylesheet">




    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          margin: 0;
          overflow: hidden;
          background: #112B3C;
          height: 100%;
          overflow: hidden;
        }
        body:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 100;
          box-shadow: 0 0 50px rgba(0, 0, 0, 0.3) inset;
          pointer-events: none;
        }
        @media (min-width: 750px) {
          body:after {
            box-shadow: 0 0 100px rgba(0, 0, 0, 0.3) inset;
          }
        }
        
        canvas {
          position: absolute;
          touch-action: none;
        }
        
        .ui {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 105;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
        }
        .ui label {
          display: flex;
          align-items: center;
          background: #EFEFEF;
          border-radius: 10px;
          padding: 8px;
          width: 36px;
          overflow: hidden;
          transition: 0.15s ease-in-out;
          font-size: 0;
        }
        .ui label + label {
          margin-top: 5px;
        }
        .ui label:focus-within, .ui label:hover {
          width: 146px;
        }
        .ui label:focus-within input, .ui label:hover input {
          margin-left: 10px;
          opacity: 1;
        }
        .ui input {
          width: 100px;
          opacity: 0;
        }
        .ui svg {
          flex-shrink: 0;
          width: 20px;
        }
        
        .tooltip {
          position: absolute;
          top: 0;
          left: 0;
          height: 0;
          width: 0;
          z-index: 1;
        }
        .tooltip path:first-child {
          transition: 0.05s ease-out;
        }
        .tooltip:focus-within, .tooltip:hover {
          z-index: 2;
        }
        .tooltip:focus-within path:first-child, .tooltip:hover path:first-child {
          fill: #f48f4b;
        }
        
        p {
          white-space: nowrap;
          color: white;
          background: #EFEFEF;
          color: #112B3C;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -90px);
          border-radius: 3px;
          padding: 5px 8px;
          pointer-events: none;
          opacity: 0;
          transition: 0.15s ease-out;
          font-weight: 400;
          font-family: "Oswald", sans-serif;
        }
        button:focus + p, button:hover + p {
          opacity: 1;
        }
        
        button {
          background: none;
          padding: 0;
          border: none;
          height: 0;
          cursor: pointer;
        }
        button svg {
          width: 20px;
          margin-left: -10px;
          transform: translateY(-100%);
        }
        
        #compass {
          position: absolute;
          right: 10px;
          bottom: 10px;
          width: 50px;
          z-index: 120;
          overflow: visible;
        }
        #compass path:first-child {
          stroke: #112b3c;
          stroke-width: 4px;
        }
    </style>




</head>

<body translate="no">
    <!-- Marker by Valeriy from NounProject.com -->
    <!-- Compass by GreenHill from NounProject.com -->
    <div class="tooltip summit" id="everest">
        <button><svg viewBox="0 0 42.4 74.3" fill="#112B3C"><path fill="#EFEFEF" d="M39.9,18.2C38.2,11.1,30.7,3.9,23.3,2.3,13.4.2,5.1,8.2,2.8,16.9S2.5,31.8,5.1,38.6C9.5,50.4,16.4,61.3,22.3,72.4h0c4.8-11.1,10.2-21.9,14.3-33.3C38.9,32.6,41.5,25.2,39.9,18.2Zm-20,17.4-.9-.2c-3.6,1.2-8-2.3-8.9-6.3-1.5-6,1.3-12.9,7.6-14.5h0c6.2-1.7,12,2.9,12.7,9.1S25.9,35,19.9,35.6Z"/><path d="M20.2,0C7,.1-.3,13.2,0,25,.4,42,12.5,60.5,22,73.9a.7.7,0,0,0,1.2-.6h0a1.1,1.1,0,0,0,1.3-.5A181.4,181.4,0,0,0,35.6,48.1c3.1-7.7,6.8-16.1,6.8-24.6C42.4,12,32.2,0,20.2,0Zm2.1,71.5C16.7,60.6,10,50.1,5.8,38.6,3.4,31.9,1.9,24.5,3.7,17.4S13.8,1.1,23.2,3.2C30.3,4.7,37.5,11.8,39,18.7s-.9,14-3.1,20.3C32,50.1,26.8,60.7,22.3,71.5Z"/><path d="M17.7,14.6c-6.3,1.6-9.1,8.5-7.6,14.5.9,4,5.3,7.5,8.9,6.3l.9.2c6-.6,11.2-5.5,10.5-11.9s-6.5-10.8-12.7-9.1Zm2.2,18.1a1.4,1.4,0,0,0-1.1.6c-3.7.3-6.2-3.9-6-7.6s2.6-8.3,7.2-8.5a7.5,7.5,0,0,1,7.5,6.9c.4,4.5-3.3,8.1-7.6,8.6Z"/></svg></button>
        <p>Everest - 8 848 m</p>
    </div>

    <div class="tooltip summit" id="lhotse">
        <button><svg viewBox="0 0 42.4 74.3" fill="#112B3C"><path fill="#EFEFEF" d="M39.9,18.2C38.2,11.1,30.7,3.9,23.3,2.3,13.4.2,5.1,8.2,2.8,16.9S2.5,31.8,5.1,38.6C9.5,50.4,16.4,61.3,22.3,72.4h0c4.8-11.1,10.2-21.9,14.3-33.3C38.9,32.6,41.5,25.2,39.9,18.2Zm-20,17.4-.9-.2c-3.6,1.2-8-2.3-8.9-6.3-1.5-6,1.3-12.9,7.6-14.5h0c6.2-1.7,12,2.9,12.7,9.1S25.9,35,19.9,35.6Z"/><path d="M20.2,0C7,.1-.3,13.2,0,25,.4,42,12.5,60.5,22,73.9a.7.7,0,0,0,1.2-.6h0a1.1,1.1,0,0,0,1.3-.5A181.4,181.4,0,0,0,35.6,48.1c3.1-7.7,6.8-16.1,6.8-24.6C42.4,12,32.2,0,20.2,0Zm2.1,71.5C16.7,60.6,10,50.1,5.8,38.6,3.4,31.9,1.9,24.5,3.7,17.4S13.8,1.1,23.2,3.2C30.3,4.7,37.5,11.8,39,18.7s-.9,14-3.1,20.3C32,50.1,26.8,60.7,22.3,71.5Z"/><path d="M17.7,14.6c-6.3,1.6-9.1,8.5-7.6,14.5.9,4,5.3,7.5,8.9,6.3l.9.2c6-.6,11.2-5.5,10.5-11.9s-6.5-10.8-12.7-9.1Zm2.2,18.1a1.4,1.4,0,0,0-1.1.6c-3.7.3-6.2-3.9-6-7.6s2.6-8.3,7.2-8.5a7.5,7.5,0,0,1,7.5,6.9c.4,4.5-3.3,8.1-7.6,8.6Z"/></svg></button>
        <p>Lhotse - 8 516 m</p>
    </div>
    <div class="tooltip summit" id="lhotseshar">
        <button><svg viewBox="0 0 42.4 74.3" fill="#112B3C"><path fill="#EFEFEF" d="M39.9,18.2C38.2,11.1,30.7,3.9,23.3,2.3,13.4.2,5.1,8.2,2.8,16.9S2.5,31.8,5.1,38.6C9.5,50.4,16.4,61.3,22.3,72.4h0c4.8-11.1,10.2-21.9,14.3-33.3C38.9,32.6,41.5,25.2,39.9,18.2Zm-20,17.4-.9-.2c-3.6,1.2-8-2.3-8.9-6.3-1.5-6,1.3-12.9,7.6-14.5h0c6.2-1.7,12,2.9,12.7,9.1S25.9,35,19.9,35.6Z"/><path d="M20.2,0C7,.1-.3,13.2,0,25,.4,42,12.5,60.5,22,73.9a.7.7,0,0,0,1.2-.6h0a1.1,1.1,0,0,0,1.3-.5A181.4,181.4,0,0,0,35.6,48.1c3.1-7.7,6.8-16.1,6.8-24.6C42.4,12,32.2,0,20.2,0Zm2.1,71.5C16.7,60.6,10,50.1,5.8,38.6,3.4,31.9,1.9,24.5,3.7,17.4S13.8,1.1,23.2,3.2C30.3,4.7,37.5,11.8,39,18.7s-.9,14-3.1,20.3C32,50.1,26.8,60.7,22.3,71.5Z"/><path d="M17.7,14.6c-6.3,1.6-9.1,8.5-7.6,14.5.9,4,5.3,7.5,8.9,6.3l.9.2c6-.6,11.2-5.5,10.5-11.9s-6.5-10.8-12.7-9.1Zm2.2,18.1a1.4,1.4,0,0,0-1.1.6c-3.7.3-6.2-3.9-6-7.6s2.6-8.3,7.2-8.5a7.5,7.5,0,0,1,7.5,6.9c.4,4.5-3.3,8.1-7.6,8.6Z"/></svg></button>
        <p>Lhotse Shar - 8 382 m</p>
    </div>
    <div class="tooltip summit" id="nuptse">
        <button><svg viewBox="0 0 42.4 74.3" fill="#112B3C"><path fill="#EFEFEF" d="M39.9,18.2C38.2,11.1,30.7,3.9,23.3,2.3,13.4.2,5.1,8.2,2.8,16.9S2.5,31.8,5.1,38.6C9.5,50.4,16.4,61.3,22.3,72.4h0c4.8-11.1,10.2-21.9,14.3-33.3C38.9,32.6,41.5,25.2,39.9,18.2Zm-20,17.4-.9-.2c-3.6,1.2-8-2.3-8.9-6.3-1.5-6,1.3-12.9,7.6-14.5h0c6.2-1.7,12,2.9,12.7,9.1S25.9,35,19.9,35.6Z"/><path d="M20.2,0C7,.1-.3,13.2,0,25,.4,42,12.5,60.5,22,73.9a.7.7,0,0,0,1.2-.6h0a1.1,1.1,0,0,0,1.3-.5A181.4,181.4,0,0,0,35.6,48.1c3.1-7.7,6.8-16.1,6.8-24.6C42.4,12,32.2,0,20.2,0Zm2.1,71.5C16.7,60.6,10,50.1,5.8,38.6,3.4,31.9,1.9,24.5,3.7,17.4S13.8,1.1,23.2,3.2C30.3,4.7,37.5,11.8,39,18.7s-.9,14-3.1,20.3C32,50.1,26.8,60.7,22.3,71.5Z"/><path d="M17.7,14.6c-6.3,1.6-9.1,8.5-7.6,14.5.9,4,5.3,7.5,8.9,6.3l.9.2c6-.6,11.2-5.5,10.5-11.9s-6.5-10.8-12.7-9.1Zm2.2,18.1a1.4,1.4,0,0,0-1.1.6c-3.7.3-6.2-3.9-6-7.6s2.6-8.3,7.2-8.5a7.5,7.5,0,0,1,7.5,6.9c.4,4.5-3.3,8.1-7.6,8.6Z"/></svg></button>
        <p>Nuptse - 7 861 m</p>
    </div>
    <div class="tooltip summit" id="changtse">
        <button><svg viewBox="0 0 42.4 74.3" fill="#112B3C"><path fill="#EFEFEF" d="M39.9,18.2C38.2,11.1,30.7,3.9,23.3,2.3,13.4.2,5.1,8.2,2.8,16.9S2.5,31.8,5.1,38.6C9.5,50.4,16.4,61.3,22.3,72.4h0c4.8-11.1,10.2-21.9,14.3-33.3C38.9,32.6,41.5,25.2,39.9,18.2Zm-20,17.4-.9-.2c-3.6,1.2-8-2.3-8.9-6.3-1.5-6,1.3-12.9,7.6-14.5h0c6.2-1.7,12,2.9,12.7,9.1S25.9,35,19.9,35.6Z"/><path d="M20.2,0C7,.1-.3,13.2,0,25,.4,42,12.5,60.5,22,73.9a.7.7,0,0,0,1.2-.6h0a1.1,1.1,0,0,0,1.3-.5A181.4,181.4,0,0,0,35.6,48.1c3.1-7.7,6.8-16.1,6.8-24.6C42.4,12,32.2,0,20.2,0Zm2.1,71.5C16.7,60.6.........完整代码请登录后点击上方下载按钮下载查看