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

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

代码语言：html

所属分类：三维

代码描述：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/image/62f9838a5ac6d.png';

//-- Galaxy
var p = '//repo.bfw.wiki/bfwrepo/image/62f983a17e682.png';

// EnvMap
var a = '//repo.bfw.wiki/bfwrepo/image/62f983b1ce43b.png';

var s_group = new THREE.Group();
var s_galax = new THREE.Group();

function main() {
  const canvas = document.querySelector('#canvas');
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(18);
  //--
  camera.near = 1;
  camera.far = 2000;
  camera.position.z = -10;
  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  //--
  const controls = new THREE.OrbitControls(camera, canvas);
  controls.target.set(0, 0, 0);
  controls.update();
  controls.enableZoom = false;
  //--
  scene.fog = new THREE.Fog(0x391809, 9, 15);
  scene.add(s_group);
  scene.add(s_galax);
  //--
  function createLights() {
    const l_ambient = new THREE.HemisphereLight(0xFFFFFF, 0x00A1A2, 1);
    const r_ambient = new THREE.DirectionalLight(0x333333, 4);
    r_ambient.position.set(5, 5, 5);
    r_ambient.lookAt(0, 0, 0);
    r_ambient.castShadow = true;
    r_ambient.shadow.mapSize.width = 512; // default
    r_ambient.shadow.mapSize.height = 512; // default
    r_ambient.shadow.camera.near = 0.5; // default
    r_ambient.shadow.camera.far = 500; // default
    //--.........完整代码请登录后点击上方下载按钮下载查看