three实现三维飞机跟随鼠标上下飞行在地球树林效果代码-html代码-BFW代码库

three实现三维飞机跟随鼠标上下飞行在地球树林效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维飞机跟随鼠标上下飞行在地球树林效果代码

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

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

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

  
  
  
  
<style>
* {
	margin: 0;
	padding: 0;
}

body {background:black;}

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: rgb(0,0,25);

  
}

@keyframes sunset
{
  50% {
    background:rgb(150,200,250);}
  
}

.wrapper

{
  z-index:10;
  opacity:.5;
  position:absolute;
  width;100%
  height:100%;
background:black;
  
webkit-animation:lighting infinite;
  -animation-duration:40s;
}

@keyframes lighting

{50% {opacity:.5;}}
</style>


  
  
</head>


<body>

<div id="world"></div>
  <div id="wrapper"></div>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.86.js"></script>
  

  

  
      <script >
var Colors = {
  red: 0xf25346,
  yellow: 0xedeb27,
  white: 0xd8d0d1,
  brown: 0x59332e,
  pink: 0xF5986E,
  brownDark: 0x23190f,
  blue: 0x68c3c0,
  green: 0x458248,
  purple: 0x551A8B,
  lightgreen: 0x629265 };




var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container;


function createScene() {
  // Get the width and height of the screen
  // and use them to setup the aspect ratio
  // of the camera and the size of the renderer.
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;

  // Create the scene.
  scene = new THREE.Scene();

  // Add FOV Fog effect to the scene. Same colour as the BG int he stylesheet.
  scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);


  // Create the camera
  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 60;
  nearPlane = 1;
  farPlane = 10000;
  camera = new THREE.PerspectiveCamera(
  fieldOfView,
  aspectRatio,
  nearPlane,
  farPlane);

  // Position the camera
  camera.position.x = 0;
  camera.position.y = 150;
  camera.position.z = 100;

  // Create the renderer

  renderer = new THREE.WebGLRenderer({
    // Alpha makes the background transparent, antialias is performant heavy
    alpha: true,
    antialias: true });


  //set the size of the renderer to fullscreen
  renderer.setSize(WIDTH, HEIGHT);
  //enable shadow rendering
  renderer.shadowMap.enabled = true;

  // Add the Renderer to the DOM, in the world div.
  container = document.getElementById('world');
  cont.........完整代码请登录后点击上方下载按钮下载查看