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 shadows
  this.mesh.receiveShadow = true;
};

Orbit = function () {

  var geom = new THREE.Object3D();

  this.mesh = geom;
  //this.mesh.add(sun);
};

Sun = function () {

  this.mesh = new THREE.Object3D();

  var sunGeom = new THREE.SphereGeometry(400, 20, 10);
  var sunMat = new THREE.MeshPhongMaterial({
    color: Colors.yellow,
    shading: THREE.SmoothShading });

  var sun = new THREE.Mesh(sunGeom, sunMat);
  //sun.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
  sun.castShadow = false;
  sun.receiveShadow = false;
  this.mesh.add(sun);
};

Cloud = function () {
  // Create an empty container for the cloud
  this.mesh = new THREE.Object3D();
  // Cube geometry and material
  var geom = new THREE.DodecahedronGeometry(20, 0);
  var mat = new THREE.MeshPhongMaterial({
    color: Colors.white });


  var nBlocs = 3 + Math.floor(Math.random() * 3);

  for (var i = 0; i < nBlocs; i++) {
    //Clone mesh geometry
    var m = new THREE.Mesh(geom, mat);
    //Randomly position each cube
    m.position.x = i * 15;
    m.position.y = Math.random() * 10;
    m.position.z = Math.random() * 10;
    m.rotation.z = Math.random() * Math.PI * 2;
    m.rotation.y = Math.random() * Math.PI * 2;

    //Randomly scale the cubes
    var s = .1 + Math.random() * .9;
    m.scale.set(s, s, s);
    this.mesh.add(m);
  }
};

Sky = function () {

  this.mesh = new THREE.Object3D();

  // Number of cloud groups
  this.nClouds = 25;

  // Space the consistenly
  var stepAngle = Math.PI * 2 / this.nClouds;

  // Create the Clouds

  for (var i = 0; i < this.nClouds; i++) {

    var c = new Cloud();

    //set rotation and position using trigonometry
    var a = stepAngle * i;
    // this is the distance between the center of the axis and the cloud itself
    var h = 800 + Math.random() * 200;
    c.mesh.position.y = Math.sin(a) * h;
    c.mesh.position.x = Math.cos(a) * h;

    // rotate the cloud according to its position
    c.mesh.rotation.z = a + Math.PI / 2;

    // random depth for the clouds on the z-axis
    c.mesh.position.z = -400 - Math.random() * 400;

    // random scale for each cloud
    var s = 1 + Math.random() * 2;
    c.mesh.scale.set(s, s, s);

    this.mesh.add(c.mesh);
  }
};

Tree = function () {

  this.mesh = new THREE.Object3D();

  var matTreeLeaves = new THREE.MeshPhongMaterial({ color: Colors.green, shading: THREE.SmoothShading });

  var geonTreeBase = new THREE.BoxGeometry(10, 20, 10);
  var matTreeBase = new THREE.MeshBasicMaterial({ color: Colors.brown });
  var treeBase = new THREE.Mesh(geonTreeBase, matTreeBase);
  treeBase.castShadow = true;
  treeBase.receiveShadow = true;
  this.mesh.add(treeBase);

  var geomTreeLeaves1 = new THREE.CylinderGeometry(1, 12 * 3, 12 * 3, 4);
  var treeLeaves1 = new THREE.Mesh(geomTreeLeaves1, matTreeLeaves);
  treeLeaves1.castShadow = true;
  treeLeaves1.receiveShadow = true;
  treeLeaves1.position.y = 20;
  this.mesh.add(treeLeaves1);

  var geomTreeLeaves2 = new THREE.CylinderGeometry(1, 9 * 3, 9 * 3, 4);
  var treeLeaves2 = new THREE.Mesh(geomTreeLeaves2, matTreeLeaves);
  treeLeaves2.castShadow = true;
  treeLeaves2.position.y = 40;
  treeLeaves2.receiveShadow = true;
  this.mesh.add(treeLeaves2);

  var geomTreeLeaves3 = new THREE.CylinderGeometry(1, 6 * 3, 6 * 3, 4);
  var treeLeaves3 = new THREE.Mesh(geomTreeLeaves3, matTreeLeaves);
  treeLeaves3.castShadow = true;
  treeLeaves3.position.y = 55;
  treeLeaves3.receiveShadow = true;
  this.mesh.add(treeLeaves3);

};

Flower = function () {

  this.mesh = new THREE.Object3D();

  var geomStem = new THREE.BoxGeometry(5, 50, 5, 1, 1, 1);
  var matStem = new THREE.MeshPhongMaterial({ color: Colors.green, shading: THREE.FlatShading });
  var stem = new THREE.Mesh(geomStem, matStem);
  stem.castShadow = false;
  stem.receiveShadow = true;
  this.mesh.add(stem);


  var geomPetalCore = new THREE.BoxGeometry(10, 10, 10, 1, 1, 1);
  var matPetalCore = new THREE.MeshPhongMaterial({ color: Colors.yellow, shading: THREE.FlatShading });
  petalCore = new THREE.Mesh(geomPetalCore, matPetalCore);
  petalCore.castShadow = false;
  petalCore.receiveShadow = true;

  var petalColor = petalColors[Math.floor(Math.random() * 3)];

  var geomPetal = new THREE.BoxGeometry(15, 20, 5, 1, 1, 1);
  var matPetal = new THREE.MeshBasicMaterial({ color: petalColor });
  geomPetal.vertices[5].y -= 4;
  geomPetal.vertices[4].y -= 4;
  geomPetal.vertices[7].y += 4;
  geomPetal.vertices[6].y += 4;
  geomPetal.translate(12.5, 0, 3);

  var petals = [];
  for (var i = 0; i < 4; i++) {

    petals[i] = new THREE.Mesh(geomPetal, matPetal);
    petals[i].rotation.z = i * Math.PI / 2;
    petals[i].castShadow = true;
    petals[i].receiveShadow = true;
  }

  petalCore.add(petals[0], petals[1], petals[2], petals[3]);
  petalCore.position.y = 25;
  petalCore.position.z = 3;
  this.mesh.add(petalCore);

};

var petalColors = [Colors.red, Colors.yellow, Colors.blue];



Forest = function () {

  this.mesh = new THREE.Object3D();

  // Number of Trees
  this.nTrees = 300;

  // Space the consistenly
  var stepAngle = Math.PI * 2 / this.nTrees;

  // Create the Trees

  for (var i = 0; i < this.nTrees; i++) {

    var t = new Tree();

    //set rotation and position using trigonometry
    var a = stepAngle * i;
    // this is the distance between the center of the axis and the tree itself
    var h = 605;
    t.mesh.position.y = Math.sin(a) * h;
    t.mesh.position.x = Math.cos(a) * h;

    // rotate the tree according to its position
    t.mesh.rotation.z = a + Math.PI / 2 * 3;

    //Andreas Trigo funtime
    //t.mesh.rotation.z = Math.atan2(t.mesh.position.y, t.mesh.position.x)-Math.PI/2;

    // random depth for the tree on the z-axis
    t.mesh.position.z = 0 - Math.random() * 600;

    // random scale for each tree
    var s = .3 + Math.random() * .75;
    t.mesh.scale.set(s, s, s);

    this.mesh.add(t.mesh);
  }

  // Number of Trees
  this.nFlowers = 350;

  var stepAngle = Math.PI * 2 / this.nFlowers;


  for (var i = 0; i < this.nFlowers; i++) {

    var f = new Flower();
    var a = stepAngle * i;

    var h = 605;
    f.mesh.position.y = Math.sin(a) * h;
    f.mesh.position.x = Math.cos(a) * h;

    f.mesh.rotation.z = a + Math.PI / 2 * 3;

    f.mesh.position.z = 0 - Math.random() * 600;

    var s = .1 + Math.random() * .3;
    f.mesh.scale.set(s, s, s);

    this.mesh.add(f.mesh);
  }

};

var AirPlane = function () {

  this.mesh = new THREE.Object3D();

  // Create the cabin
  var geomCockpit = new THREE.BoxGeometry(80, 50, 50, 1, 1, 1);
  var matCockpit = new THREE.MeshPhongMaterial({ color: Colors.red, shading: THREE.FlatShading });
  geomCockpit.vertices[4].y -= 10;
  geomCockpit.vertices[4].z += 20;
  geomCockpit.vertices[5].y -= 10;
  geomCockpit.vertices[5].z -= 20;
  geomCockpit.vertices[6].y += 30;
  geomCockpit.vertices[6].z += 20;
  geomCockpit.vertices[7].y += 30;
  geomCockpit.vertices[7].z -= 20;
  var cockpit = new THREE.Mesh(geomCockpit, matCockpit);
  cockpit.castShadow = true;
  cockpit.receiveShadow = true;
  this.mesh.add(cockpit);

  // Create the engine
  var geomEngine = new THREE.BoxGeometry(20, 50, 50, 1, 1, 1);
  var matEngine = new THREE.MeshPhongMaterial({ color: Colors.white, shading: THREE.FlatShading });
  var engine = new THREE.Mesh(geomEngine, matEngine);
  engine.position.x = 40;
  engine.castShadow = true;
  engine.receiveShadow = true;
  this.mesh.add(engine);

  // Create the tail
  var geomTailPlane = new THREE.BoxGeometry(15, 20, 5, 1, 1, 1);
  var matTailPlane = new THREE.MeshPhongMaterial({ color: Colors.red, shading: THREE.FlatShading });
  var tailPlane = new THREE.Mesh(geomTailPlane, matTailPlane);
  tailPlane.position.set(-35, 25, 0);
  tailPlane.castShadow = true;
  tailPlane.receiveShadow = true;
  this.mesh.add(tailPlane);

  // Create the wing
  var geomSideWing = new THREE.BoxGeometry(40, 4, 150, 1, 1, 1);
  var matSideWing = new THREE.MeshPhongMaterial({ color: Colors.red, shading: THREE.FlatShading });

  var sideWingTop = new .........完整代码请登录后点击上方下载按钮下载查看