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

代码语言:html

所属分类:三维

代码描述:three三维小飞机森林上空跟随鼠标飞行动画效果代码

代码标签: 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 () {
       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0