three实现三维海阔天空全景场景效果代码-html代码-BFW代码库

three实现三维海阔天空全景场景效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维海阔天空全景场景效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
<style>
@import url("https://fonts.googleapis.com/css?family=Homenaje");
.p-canvas-webgl {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
}

.p-summary {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  color: #fff;
  font-family: "Homenaje", sans-serif;
}
.p-summary h1 {
  margin: 0 0 0.2em;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.p-summary p {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}
.p-summary a {
  color: #fff;
}
</style>



</head>

<body  >

<canvas class="p-canvas-webgl" id="canvas-webgl"></canvas>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gl-matrix-min.js"></script>
      <script  >
const debounce = (callback, duration) => {
  var timer;
  return function (event) {
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback(event);
    }, duration);
  };
};

const MathEx = {
  degrees: function (radian) {
    return radian / Math.PI * 180;
  },
  radians: function (degree) {
    return degree * Math.PI / 180;
  },
  clamp: function (value, min, max) {
    return Math.min(Math.max(value, min), max);
  },
  mix: function (x1, x2, a) {
    return x1 * (1 - a) + x2 * a;
  },
  polar: function (radian1, radian2, radius) {
    return [
    Math.cos(radian1) * Math.cos(radian2) * radius,
    Math.sin(radian1) * radius,
    Math.cos(radian1) * Math.sin(radian2) * radius];

  } };


const force3 = {
  updateVelocity: (velocity, acceleration, mass) => {
    vec3.scale(acceleration, acceler.........完整代码请登录后点击上方下载按钮下载查看