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: `
    
attribute float random;
    
varying vec3 vPos;

void main() {
  vPos = position;
  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
  gl_Position = projectionMatrix * mvPosition;
  gl_PointSize = 10.0 + random * 10.0;
}

`,
    fragmentShader: `

varying vec3 vPos;

float rand(vec2 co) {
    return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  vec2 uv = vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y);
  vec2 centre = uv - 0.5;
  
  vec3 rgb = vec3(
    rand(vPos.xy),
    rand(vPos.xz),
    rand(vPos.yz)
  );

  vec3 col = vec3(0.5) + rgb * 0.5;
  
  float a = smoothstep(0.8, 1.0, 1.0 - length(centre) * 2.0);
  

  gl_FragColor = vec4(col, a);
}

` });


  const stars = new THREE.Points(starsGeo, starsMat);
  sky.add(stars);

  const planetGeo = new THREE.SphereGeometry(1, 64, 64);
  const planetMat = new THREE.ShaderMaterial({
    uniforms: {
      uTime: { value: 0 } },

    transparent: true,
    vertexShader: `

varying vec3 vPos;

void main() {
  vPos = position;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

`,
    fragmentSh.........完整代码请登录后点击上方下载按钮下载查看