three实现三维带卫星的宇宙行星天体效果代码-html代码-BFW代码库

three实现三维带卫星的宇宙行星天体效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维带卫星的宇宙行星天体效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
<style>
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
</style>

  
  
</head>

<body translate="no">
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.143.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>

      <script >
const fovTmp = new THREE.Vector4();
const posTmp = new THREE.Vector3();
const spherical = new THREE.Spherical(5, Math.PI * 0.5, 0);
const zero = new THREE.Vector3(0, 0, 0);
const hp = Math.PI * 0.5;
const mouseRot = Math.PI * 0.1;
let autoMove = true;

function spaceScene() {
  const sky = new THREE.Group();

  const nStars = 5000;
  const points = new Float32Array(nStars * 3);
  const rand = new Float32Array(nStars);

  for (let i = 0; i < nStars; i++) {
    const theta = Math.random() * Math.PI * 2.0;
    const phi = Math.acos(Math.random() * 2.0 - 1.0);

    spherical.set(100, phi, theta);
    posTmp.setFromSpherical(spherical);
    posTmp.toArray(points, i * 3);

    rand[i] = Math.random();
  }

  const starsGeo = new THREE.BufferGeometry();
  starsGeo.setAttribute('position', new THREE.BufferAttribute(points, 3));
  starsGeo.setAttribute('random', new THREE.BufferAttribute(rand, 1));
  const starsMat = new THREE.ShaderMaterial({
    transparent: true,
    blending: THREE.AdditiveBlending,
    depthTest: true,
    depthWrite: false,
    vertexShader: `.........完整代码请登录后点击上方下载按钮下载查看