三维地球旋转效果-html代码-BFW代码库

三维地球旋转效果

代码语言：html

所属分类：三维

下面为部分代码预览，完整代码请点击下载或在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 translate="no">
<div class="container">
<canvas class="globe" width="1800" height="1600"></canvas>
</div>

<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) => {
  return (value - min) / (max - min);
};

const map = (value, sourceMin, sourceMax, destMin, destMax) => {
  return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
};

const dragMove = e => {
  if ($.drag.isDragging) {
    let long = $.drag.start.long,
    clientX = e.targetTouches ? e.targetTouches[0].clientX : e.clientX,
    change = clientX - $.drag.start.x,
    prevChange = clientX - $.drag.prevX,
    canvasWidth = $.canvas.getBoundingClientRect().width;

    long += map(change, 0, canvasWidth, 0, 200);

    while (long < 0) {
      long += 360;
    }

    if (prevChange > 0 && $.drag.force < 0) {
      $.drag.force = 0;
    } else if (prevChange < 0 && $.drag.force > 0) {
      $.drag.force = 0;
    }

    $.drag.force += prevChange * (600 / canvasWidth);
    $.drag.prevX = clientX;
    $.scroll.long = Math.abs(long) % 360;
  }
};

const dragStart = e => {
  if (e.targetTouches) {
    e.preventDefault();
    $.drag.start = {
      x: e.targetTouches[0].clientX,
      y: e.targetTouches[0].clientY,
 .........完整代码请登录后点击上方下载按钮下载查看