three三维小飞机森林上空跟随鼠标飞行动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：three三维小飞机森林上空跟随鼠标飞行动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
        	margin: 0;
        	padding: 0;
        }
        
        #world {
        	position: absolute;
        	width: 100%;
        	height: 100%;
        	overflow: hidden;
        	background: linear-gradient(#e4e0ba, #f7d9aa);
        }
    </style>




</head>

<body>
    <div id="world"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.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(0xaaaaaa, 0x000000, .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.FlatShading });
        
          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.FlatShading });
        
          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: THR.........完整代码请登录后点击上方下载按钮下载查看