HTML+CSS+JS 飞行树林

最新推荐文章于 2025-06-13 14:00:18 发布

若冰说

最新推荐文章于 2025-06-13 14:00:18 发布

阅读量855

点赞数 13

分类专栏：若冰说CSS css 文章标签： html css javascript 前端若冰说CSS

本文链接：https://blog.youkuaiyun.com/weixin_72553980/article/details/145045456

版权

若冰说CSS 同时被 2 个专栏收录

83 篇文章

订阅专栏

css

83 篇文章

订阅专栏

效果演示

文末可一键复制完整代码

源代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞行树林</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <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>
</body>

</html>

实现思路拆分

CSS 部分

* {
    margin: 0;
    padding: 0;
}

重置所有元素的默认外边距和内边距。

#world {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(#e4e0ba, #f7d9aa);
}

设置id为world的元素为绝对定位，宽度和高度为100%，隐藏溢出内容，并设置背景为线性渐变色。

JavaScript 部分

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

定义一个名为Colors的对象，存储各种颜色的十六进制值。

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

声明一些变量，用于存储场景、相机、视场角、宽高比、近平面、远平面、屏幕高度、屏幕宽度、渲染器和容器的引用。

function createScene() { ... }

定义一个名为createScene的函数，用于创建3D场景。它初始化场景、相机、渲染器，并将渲染器添加到DOM中。

function handleWindowResize() { ... }

定义一个名为handleWindowResize的函数，用于处理窗口大小变化时的响应。它更新渲染器的大小和相机的宽高比。

function createLights() { ... }

定义一个名为createLights的函数，用于创建场景中的光源。它创建了半球光和方向光，并设置了它们的属性。

Land = function() { ... }

定义一个名为Land的构造函数，用于创建地面对象。它创建了一个圆柱形几何体，并设置了材质和阴影属性。

Orbit = function() { ... }

定义一个名为Orbit的构造函数，用于创建轨道对象。它创建了一个空的对象容器。

Sun = function() { ... }

定义一个名为Sun的构造函数，用于创建太阳对象。它创建了一个球形几何体，并设置了材质和阴影属性。

Cloud = function() { ... }

定义一个名为Cloud的构造函数，用于创建云对象。它创建了一个十二面体几何体，并设置了材质和随机位置。

Sky = function() { ... }

定义一个名为Sky的构造函数，用于创建天空对象。它创建了多个云对象，并将它们添加到场景中。

Tree = function() { ... }

定义一个名为Tree的构造函数，用于创建树对象。它创建了树干和树叶的几何体，并设置了材质和阴影属性。

Flower = function() { ... }

定义一个名为Flower的构造函数，用于创建花对象。它创建了花茎和花瓣的几何体，并设置了材质和阴影属性。

Forest = function() { ... }

定义一个名为Forest的构造函数，用于创建森林对象。它创建了多个树和花对象，并将它们添加到场景中。

AirPlane = function() { ... }

定义一个名为AirPlane的构造函数，用于创建飞机对象。它创建了飞机的各个部分的几何体，并设置了材质和阴影属性。

Fox = function() { ... }

定义一个名为Fox的构造函数，用于创建狐狸对象。它创建了狐狸的各个部分的几何体，并设置了材质和阴影属性。

var sky;
var forest;
var land;
var orbit;
var airplane;
var sun;
var fox;

声明一些变量，用于存储天空、森林、地面、轨道、飞机、太阳和狐狸的实例。

var mousePos={x:0, y:0};
var offSet = -600;

声明一个名为mousePos的对象，用于存储鼠标位置的x和y坐标。声明一个名为offSet的变量，用于设置场景中对象的偏移量。

function createSky() { ... }

定义一个名为createSky的函数，用于创建天空对象，并将其添加到场景中。

function createLand() { ... }

定义一个名为createLand的函数，用于创建地面对象，并将其添加到场景中。

function createOrbit() { ... }

定义一个名为createOrbit的函数，用于创建轨道对象，并将其添加到场景中。

function createForest() { ... }

定义一个名为createForest的函数，用于创建森林对象，并将其添加到场景中。

function createSun() { ... }

定义一个名为createSun的函数，用于创建太阳对象，并将其添加到场景中。

function createPlane() { ... }

定义一个名为createPlane的函数，用于创建飞机对象，并将其添加到场景中。

function createFox() { ... }

定义一个名为createFox的函数，用于创建狐狸对象，并将其添加到场景中。

function updatePlane() { ... }

定义一个名为updatePlane的函数，用于更新飞机的位置和旋转。它根据鼠标位置计算目标位置，并使飞机平滑地移动到目标位置。

function normalize(v,vmin,vmax,tmin, tmax) { ... }

定义一个名为normalize的函数，用于将一个值从一个范围映射到另一个范围。

function loop() { ... }

定义一个名为loop的函数，用于实现动画循环。它更新场景中的对象，并请求下一帧动画。

function handleMouseMove(event) { ... }

定义一个名为handleMouseMove的函数，用于处理鼠标移动事件。它计算鼠标位置的x和y坐标，并更新mousePos对象。

function init(event) { ... }

定义一个名为init的函数，用于初始化场景。它创建场景、光源、飞机、轨道、太阳、地面、森林和天空对象，并添加鼠标移动事件监听器。

window.addEventListener('load', init, false);

在窗口加载完成后，调用init函数，开始动画。

整个代码实现了一个飞行树林的3D动画效果，使用了Three.js库来创建和渲染3D场景。