three打造三维月球绕地球旋转效果-html代码-BFW代码库

three打造三维月球绕地球旋转效果

代码语言：html

所属分类：三维

代码描述：three打造三维月球绕地球旋转效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


<style>
canvas {
  display: block;
  background: black;
}
</style>

</head>
<body translate="no">
<div id='wrapper'></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js"></script>

<script >
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000);


let renderer = new THREE.WebGLRenderer({ alpha: 1 });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 8;
controls.rotateSpeed = 0.05;
controls.enableZoom = false;
controls.noZoom = true;
controls.update();

function createCircleTexture(color, size) {
  var matCanvas = document.createElement("canvas");
  matCanvas.width = matCanvas.height = size;
  var matContext = matCanvas.getContext("2d");
  var texture = new THREE.Texture(matCanvas);
  var center = size / 2;
  matContext.beginPath();
  matContext.arc(center, center, size / 2, 0, 2 * Math.PI, false);
  matContext.closePath();
  matContext.fillStyle = color;
  matContext.fill();
  texture.needsUpdate = true;
  return texture;
}

let geometry = new THREE.SphereGeometry(1000, 32, 32);

for (i = 0; i < 20000; i++) {
  let vertex = new THREE.CircleGeometry(1, 32, 32);
  vertex.x = Math.random() * 1750 - 875;
  vertex.y = Math.random() * 1750 - 875;
  vertex.z = Math.random.........完整代码请登录后点击上方下载按钮下载查看