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

代码语言：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');
  container.appendChild(renderer.domElement);

  //RESPONSIVE LISTENER
  window.addEventListener('resize', handleWindowResize, false);
}

//RESPONSIVE FUNCTION
function handleWindowResize() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
}


var hemispshereLight, shadowLight;

function createLights() {
  // Gradient coloured light - Sky, Ground, Intensity
  hemisphereLight = new THREE.HemisphereLight(0xffffff, 0xffffff, .9);
  // Parallel rays
  shadowLight = new THREE.DirectionalLight(0xffffff, .9);



  shadowLight.position.set(0, 350, 350);
  shadowLight.castShadow = true;

  // define the visible area of the projected shadow
  shadowLight.shadow.camera.left = -650;
  shadowLight.shadow.camera.right = 650;
  shadowLight.shadow.camera.top = 650;
  shadowLight.shadow.camera.bottom = -650;
  shadowLight.shadow.camera.near = 1;
  shadowLight.shadow.camera.far = 1000;

  // Shadow map size
  shadowLight.shadow.mapSize.width = 2048;
  shadowLight.shadow.mapSize.height = 2048;

  // Add the lights to the scene
  scene.add(hemisphereLight);

  scene.add(shadowLight);
}


Land = function () {
  var geom = new THREE.CylinderGeometry(600, 600, 1700, 40, 10);
  //rotate on the x axis
  geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
  //create a material
  var mat = new THREE.MeshPhongMaterial({
    color: Colors.lightgreen,
    shading: THREE.FlatShading });


  //create a mesh of the object
  this.mesh = new THREE.Mesh(geom, mat);
  //receive shad.........完整代码请登录后点击上方下载按钮下载查看