

3D 网页 “起飞咯”：三大技术的视觉魔法

码途钥匙

2025-11-04

· 点击蓝字，关注我们

效果图

一、一眼惊艳的 3D 世界

暖调天空、旋转森林、随鼠标穿梭的飞机，构成沉浸式视觉体验。

二、三大技术各司其职

HTML 搭建页面结构，划定 3D 领地。
CSS 用渐变渲染质感，奠定视觉基调。
JavaScript 赋予动态交互，让元素 “活” 起来。

三、3D 设计的核心价值

打破平面束缚，升级用户体验，拓宽网页表达边界，成为前端设计新趋势。

四、代码

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>起飞咯</title>    <style>      * {        margin: 0;        padding: 0;      }      #world {        position: absolute;        width: 100%;        height: 100%;        overflow: hidden;        background: linear-gradient(#e4e0ba, #f7d9aa);      }    </style>  </head>  <body>    <div></div>    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.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