• 作者:老汪软件技巧
  • 发表时间:2024-12-29 10:05
  • 浏览量:162

在这个信息爆炸的时代,互联网不仅连接了全球的人们,也为我们打开了通往无限可能的大门。想象一下,如果你能通过简单的代码,在网页上创建一个逼真的3D地球,让你的访客无需离开座位就能探索这个蓝色星球的每一个角落,那会是多么酷的一件事!今天,我们将一起踏上这段奇妙的编程之旅,利用JavaScript和Three.js的力量,从零开始打造一个互动式的3D地球模型。

无论是对于想要提升技能的前端开发者,还是对编程充满好奇的新手来说,这篇文章都将为你提供一步步的指导,带你深入浅出地了解如何将创意变为现实。我们不仅仅是在编写代码;我们正在创造一个窗口,透过它可以看到我们美丽的地球——用数字化的方式呈现其壮观的地貌、丰富的色彩以及动态的变化。

准备好迎接挑战了吗?让我们一起开启这段激动人心的旅程,探索如何使用现代Web技术来讲述地球的故事。接下来,我将向你展示整个项目的框架搭建过程,从最基本的HTML结构到复杂的3D图形渲染,一步一步教你如何构建属于你自己的3D地球。继续阅读,让我们的冒险现在就开始吧!✨

从零开始构建3D地球准备工作

首先,我们需要设置HTML文档的基本结构。这包括定义字符编码、视口设置以确保移动设备友好性,以及加载Three.js库——这是我们的主要工具,它让WebGL变得简单易用。我们还设置了页面标题为“3D 地球”,以便用户一眼就能知道这个页面的主题。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 地球title>
    <script src="https://unpkg.com/three@0.128.0/build/three.min.js">script>
head>

构建3D环境

接下来,是时候创建我们的画布了,也就是3D地球将要展示的地方。我们通过元素来定义这个空间,并为其分配一个ID(如webglcanvas),以便稍后在JavaScript中引用。

<body>
    <canvas id="webglcanvas">canvas>
body>

是一个HTML元素,它为网页提供了一个可以绘制图形的区域。这个元素本身并不显示任何内容,直到你使用JavaScript代码来操作它。 元素是HTML5引入的一个重要特性,允许开发者在网页上进行图形渲染、动画制作和其他视觉效果开发。

具体来说:

在这个上下文中, 被用来作为Three.js库的渲染目标。Three.js是一个用于创建和展示3D图形的JavaScript库,它内部使用WebGL(一种低级3D图形API)来进行高效的图形渲染。通过将Three.js的渲染器指向这个元素,我们可以在这个画布上呈现复杂的3D场景,如文章中提到的互动式3D地球。

当你结合Three.js与这个元素时,实际上是在告诉Three.js:“我想要在这个特定的HTML 元素内绘制我的3D内容。” 之后,所有由Three.js生成的3D图形都将被渲染到这个具有id="webglcanvas"的画布上,从而让访问者可以在网页上看到一个交互式的3D地球模型。

编写JavaScript代码1. 初始化全局变量


完整代码以及图片代码

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 地球title>
    
    <script src="https://unpkg.com/three@0.128.0/build/three.min.js">script>
head>
<body>
    <canvas id="webglcanvas">canvas>
    <script>
        // 3d 地球
        // 3D 时间就是镜头拍出的世界,导演
        let canvas, // 3d 容器
            camera, // 镜头
            scene, // 场景 
            renderer, // 渲染器
            group; // 组 
        // 物品
        let mouseX = 0, mouseY = 0; // mousemove 坐标
        let windowHalfX = window.innerWidth / 2;  // 球心
        let windowHalfY = window.innerHeight / 2;
        init();
        animate();
        // 准备
        function init() {
            canvas = document.getElementById('webglcanvas'); // DOM 
            camera = new THREE.PerspectiveCamera(60,
                window.innerWidth / window.innerHeight, 1, 2000); // 实例化 相机
            // 相机离scene场景
            camera.position.z = 500;
            scene = new THREE.Scene(); // 实例化 场景
            scene.background = new THREE.Color(0xffffff); // 背景色
            group = new THREE.Group();// 组
            scene.add(group);
            // 纹理加载器
            let loader = new THREE.TextureLoader(); // 简单的加载器
            loader.load('land_ocean_ice_cloud_2048.jpg', function (texture) {
                let geometry = new THREE.SphereGeometry(200, 20, 20); // 球体
                let material = new THREE.MeshBasicMaterial({ // 材质
                    map: texture
                });
                let mesh = new THREE.Mesh(geometry, material); // 网格
                group.add(mesh);
                // 渲染器 目标是canvas 
                renderer = new THREE.WebGLRenderer({
                    canvas: canvas,
                    antialias: true
                });
                renderer.setSize(window.innerWidth, window.innerHeight);
                // renderer.render(scene, camera);
                document.addEventListener('mousemove', onDocumentMouseMove, false);
            })
        }
        function onDocumentMouseMove(event) {
            mouseX = (event.clientX - windowHalfX) * 10;
            mouseY = (event.clientY - windowHalfY) * 10;
        }
        function animate() {
            // 递归 屏幕的刷帧率 60帧/s
            requestAnimationFrame(animate);
            render();
        }
        function render() {
            // 渲染
            camera.position.x += (mouseX - camera.position.x) * 0.05;
            camera.position.y += (mouseY - camera.position.y) * 0.05;
            camera.lookAt(scene.position);
            group.rotation.y -= 0.005;
            renderer.render(scene, camera);
            // requestAnimationFrame(render);
        }
    script>
body>
html>

图片

lQDPJwNaaT1wC3nNBADNCACwjtceHAzRxRMHT8GrIzXUAA_2048_1024.jpg

结语

通过这些简单的步骤,我们就能够创建出一个令人惊叹的互动3D地球展示。Three.js的强大之处在于它不仅简化了WebGL编程,还提供了丰富多样的功能,使得即使是编程新手也能轻松制作出专业级的3D效果。希望这篇文章能激发你的灵感,去探索更多关于3D图形和Web开发的可能性!