three实现三维逼真可调参数的宇宙行星星球效果代码

代码语言:html

所属分类:三维

代码描述:three实现三维逼真可调参数的宇宙行星星球效果代码

代码标签: three 三维 逼真 可调 参数 宇宙 行星 星球

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

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

<head>

  <meta charset="UTF-8">

  
<style>
body {
  color: white;
  margin: 0;
  background-color: black;
}

canvas {
  z-index: -1;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
}

.header {
  top: 50%;
  left: 50%;
  display: none;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.footer {
  right: 1rem;
  bottom: 2rem;
  position: absolute;
}
.footer img {
  width: 2.5rem;
  transition: opacity 0.5s;
}
.footer img:hover {
  opacity: 0.5;
}
</style>



</head>

<body>
  <div class="container">
  <div class="row header">
    <div class="col text-center">
      <h1>Dark Planet</h1><small>Three Js</small>
    </div>
  </div>
</div>

<canvas id="canvas"></canvas>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.110.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.108.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script>

// Textures
var q = '//repo.bfw.wiki/bfwrepo/image/62f9837bd5448.png';

// Galaxy blue
var e = '//repo.bfw.wiki/bfwrepo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0