三维地球旋转效果-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) => {
  r.........完整代码请登录后点击上方下载按钮下载查看