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

代码语言：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
    //--
    scene.add(r_ambient);
    //scene.add( l_ambient );
  }
  //--

  function e_material(value) {
    value == undefined ? value = a : value = value;
    const o = new THREE.TextureLoader().load(value);
    return o;
  }

  function e_envMap() {
    const t_envMap = new THREE.TextureLoader().load(a);
    t_envMap.mapping = THREE.EquirectangularReflectionMapping;
    t_envMap.magFilter = THREE.LinearFilter;
    t_envMap.minFilter = THREE.LinearMipmapLinearFilter;
    t_envMap.encoding = THREE.sRGBEncoding;
    //---
    return t_envMap;
  }
  var c_mat, a_mes, b_mes, c_mes, d_mes;
  function createElements() {
    const a_geo = new THREE.IcosahedronBufferGeometry(1, 5);
    const b_geo = new THREE.TorusKnotBufferGeometry(0.6, 0.25, 100, 15);
    const c_geo = new THREE.TetrahedronGeometry(1, 3);
    const d_geo = new THREE.TorusGeometry(2, 0.4, 3, 60);

    c_mat = new THREE.MeshStandardMaterial({
      //color: 0x333333,
      envMap: e_envMap(),
      //--
      map: e_material(e),
      aoMap: e_material(e),
      bumpMap: e_material(q),
      lightMap: e_material(p),
      emissiveMap: e_material(q),
      metalnessMap: e_material(e),
      displacementMap: e_material(p),
      //--
      flatShading: false,
      roughness: 0.0,
      emissive: 0x333333,
      metalness: 1.0,
      refractionRatio: 0.94,
      emissiveIntensity: 0.1,
      bumpScale: 0.01,
      aoMapIntensity: 0.0,
      displacementScale: 0.0 });

    a_mes = new THREE.Mesh(.........完整代码请登录后点击上方下载按钮下载查看