three实现夜晚星空萤火虫动画效果代码-html代码-BFW代码库

three实现夜晚星空萤火虫动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现夜晚星空萤火虫动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
  margin: 0;
  overflow: hidden;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<canvas></canvas>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/perlin-min.js"></script>
<script>
    
    console.clear();

var ww = window.innerWidth,
    wh = window.innerHeight;

var renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: document.querySelector('canvas')
});
renderer.setSize(ww, wh);
renderer.setClearColor(0x001a2d);

var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x001a2d, 80, 140);

var camera = new THREE.PerspectiveCamera(45, ww/wh, 0.1, 200);
camera.position.x = 70;
camera.position.y = 30;
camera.position.z = 5;
camera.lookAt(new THREE.Vector3());

// var controls = new THREE.OrbitControls(camera, renderer.domElement);

/* LIGHTS */
var moonLight = new THREE.PointLight(0xffffff, 2, 150);
scene.add( moonLight );

var moon;
function createMoon() {
  var geometry = new THREE.SphereGeometry(8, 32, 32);
  var material = new THREE.MeshPhongMaterial({
    color: 0x26fdd9,
    shininess:15,
    emissive: 0x2bb2e6,
    emissiveIntensity:0.8
  });
  moon = new THREE.Mesh(geometry, material);
  moon.position.x = -9;
  moon.position.z = -6.5;
  moon.position.y = 1;
  moon.rotation.y = -1;
  scene.add(moon);
  moonLight.position.copy(moon.position);
  moonLight.position.y += 4;
  var moonLight2 = new THREE.PointLight(0xffffff, 0.6, 150);
  scene.add(moonLight2);
  moonLight2.position.x += 20;
  moonLight2.position.y -= 20;
  moonLight2.position.z -= 25;
}

function createTerrain () {
  var geometry = new THREE.PlaneGeometry(150,150,120,120);
  var m = new THREE.Matrix4();
  m.makeRotationX(Math.PI * -0.5);
  geometry.applyMatrix(m);
  for(var i=0;i<geometry.vertices.length;i++) {
    var vector = geometry.vertices[i];
    var ratio = noise.simplex3(vector..........完整代码请登录后点击上方下载按钮下载查看