原生js实现三维可拖动旋转的卡通地球效果代码-html代码-BFW代码库

原生js实现三维可拖动旋转的卡通地球效果代码

代码语言：html

所属分类：三维

代码描述：原生js实现三维可拖动旋转的卡通地球效果代码，纯原生js编写，没有使用three引擎。

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

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

<head>
    <meta charset="UTF-8">
   
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Pirata+One&amp;display=block'>
    <style>
        body {  margin: 0;  background-color: #f7f6f2;  overflow: hidden;}.container {  display: flex;  justify-content: center;  max-height: 100vmin;  max-width: 100vmin;  margin: 0 auto;}.globe {  height: 100vmin;  width: auto;  cursor: -webkit-grab;  cursor: grab;}.globe--dragging {  cursor: -webkit-grabbing;  cursor: grabbing;}
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="container"><canvas class="globe" width="1800" height="1600"></canvas></div>
    <!-- partial -->
    <script>
        
        const markers = [{
  name: 'Uluru',
  lat: -25,
  long: 131
},
{
  name: 'Machu Picchu',
  lat: -13,
  long: -70
},
{
  name: 'Valley of the Kings',
  lat: 25,
  long: 32
},
{
  name: 'Stonehenge',
  lat: 51,
  long: -2
}];

const $ = {
  canvas: null,
  ctx: null,
  vCenter: 820,
  scroll: {
    lat: 0,
    long: 20
  },
  markers: [],
  timing: {
    speed: 16,
    delta: 0,
    last: 0
  },
  drag: {
    start: { x: 0, y: 0 },
    force: 0,
    prevX: 0,
    isDragging: false
  },
  colors: {
    pushPinBase: '#969799',
    pushPin: '#ed5c50',
    land: '#fac648', //'#ffc975',
    landShade: '#2c606e',
    ocean: '#2A7B96'
  },
  complexShapes: {
    // put complex shapes here
  }
}

const lerp = (norm, min, max) => {
  return (max - min) * norm + min;
}

const norm = (value, min, max.........完整代码请登录后点击上方下载按钮下载查看