Three.js WebGL 地球模型本文详细介绍通过 Three.js 和 WebGL 技术,从创建场景、相机到加载纹

引言

现在的浏览器不再局限于展示静态页面，而是成为了一个强大的平台，其中Three.js 是一个基于 WebGL 的 3D 图形库，它简化了 WebGL 的复杂性，使 3D 内容更容易地创建和展示。本文将使用 WebGL 在网页中展示一个旋转的地球模型，讲述基础的Three.js的使用

f102151fe1fa2faceb83a80f759c5cbf-ezgif.com-video-to-webp-converter.webp

HTML 结构

HTML 文件包含了基本的文档结构，以及一个 <canvas> 元素，该元素将作为 WebGL 渲染的目标。

<canvas id="webglcanvas"></canvas>

JavaScript 逻辑

JavaScript 部分主要分为初始化 (init) 和动画循环 (animate) 两个部分。

1.初始化 (`init`)

初始化函数负责设置场景、相机、渲染器，并加载纹理，纹理加载完成后，会创建一个球体 (THREE.SphereGeometry)，并将其与一个带有纹理的材质 (THREE.MeshBasicMaterial) 结合，形成最终的网格对象 (THREE.Mesh)。

1.1：创建相机

camera = new THREE.PerspectiveCamera(
    60,  // 视角（视野角度），通常在 45 到 60 度之间
    window.innerWidth / window.innerHeight,  // 宽高比
    1,  // 近截面距离
    2000  // 远截面距离
);
camera.position.z = 500;  // 相机的位置

THREE.PerspectiveCamera: 创建一个透视投影相机定义场景的视角，决定场景中的物体是如何被观察到的。
视角（Field of View, FOV） : 设置为 60 度，用于模拟人类的自然视野。
宽高比: 设置为窗口的宽高比，确保渲染的场景能够正确填充整个窗口。
近截面距离: 设置为 1，这是相机可以清晰渲染的最近距离。
远截面距离: 设置为 2000，这是相机可以清晰渲染的最远距离。
相机位置: 设置相机的位置，这里的 z 坐标为 500，意味着相机位于场景的前方。

1.2:创建场景

scene = new THREE.Scene();
scene.background = new THREE.Color(0x123123);  // 设置背景颜色

THREE.Scene: 创建一个场景，所有要渲染的对象都将被添加到这个场景中。
背景颜色: 设置场景的背景颜色。这里使用了颜色值 0x123123

1.3:加载纹理

let loader = new THREE.TextureLoader();
loader.load('xc.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);
});

THREE.TextureLoader: 创建一个纹理加载器，用于从服务器加载纹理图像。
加载纹理: 使用 load 方法加载名为 xc.jpg 的图像文件。加载完成时，回调函数会被触发。
创建球体几何体: 使用 THREE.SphereGeometry 创建一个球体几何体。这里的参数分别是半径、宽度分割数和高度分割数。
创建带纹理的材质: 使用 THREE.MeshBasicMaterial 创建一个带有纹理映射的材质。
创建网格对象: 将球体几何体和材质结合，创建一个网格对象。
添加到场景: 将网格对象添加到之前定义的 group 中。

1.4:创建 WebGL 渲染器

renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);

THREE.WebGLRenderer: 创建一个 WebGL 渲染器，将 Three.js 场景渲染到网页上。
指定渲染目标: 设置渲染器的输出目标为页面上的 <canvas> 元素。
抗锯齿: 启用抗锯齿效果，使边缘更加平滑。
设置渲染器大小: 设置渲染器输出的大小，使其与窗口大小匹配。

2.动画循环 (`animate`)

2.1:动画循环

function animate() {
    requestAnimationFrame(animate);
    render();
}

requestAnimationFrame: 这个方法告诉浏览器注册一个函数，该函数会在下一次重绘之前执行。可以保证了动画的平滑运行，同时减少了对浏览器资源的浪费。

2.2：渲染函数 (`render`)

function render() {
    group.rotation.y -= 0.006;
    renderer.render(scene, camera);
}

更新旋转角度: 每次调用 render 函数时，都会减小 group 的 Y 轴旋转角度。让球体在 Y 轴方向上旋转。
渲染场景: 使用 renderer.render 方法渲染场景，并传入场景和相机作为参数。

总结

初始化 WebGL 环境
设置场景和相机
加载和创建纹理
设置光照
动画循环
优化和调试

以上展示了如何使用 Three.js 和 WebGL 创建一个简单的 3D 地球模型，通过加载外部纹理文件并将其应用于球体网格，可以实现一个看起来像是地球的 3D 模型

Three.js WebGL 地球模型

引言