使用Three.js创建一个动态旋转的地球模型

反应热
1,946 阅读3分钟

前言

Three.js 是一个基于 WebGL 的 3D 图形库，可以轻松地在浏览器中创建和显示 3D 内容。本文将详细介绍如何使用 Three.js 将一张地球图片创建为一个简单的地球模型，并使其能够围绕自身的轴线旋转,效果如下：

1723129814876.gif

正文

完整代码示例

首先，我们来看一下完整的代码实现：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>three.js canvas earth</title>
    <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
</head>
<body>
    <canvas id="webglcanvas"></canvas>
    <script>
        let canvas; // 3D容器
        let camera,   // 照相机
            scene,    // 场景
            renderer; // 渲染器
        let group;  // 组合

        // 整屏中心点
        let windowHalfX = window.innerWidth / 2 ;
        let windowHalfY = window.innerHeight / 2;

        // 准备
        init();

        // 一直拍
        animate();

        function init() {
            // 3D 输出容器
            canvas = document.getElementById('webglcanvas');

            // 创建相机
            camera = new THREE.PerspectiveCamera(
                60, 
                window.innerWidth/window.innerHeight,
                1,
                2000
            );
            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('earth.jpg', function(texture) {  //要做成3D的图片
                // 创建球体几何体
                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);

                // 设置渲染器
                renderer = new THREE.WebGLRenderer({
                    canvas: canvas,
                    antialias: true
                });
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
        }

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

        function render() {
            group.rotation.y -= 0.005;  // 绕 y 轴旋转
            renderer.render(scene, camera);
        }
    </script>
</body>
</html>

图片名为：earth.jpg

image.png

代码解析

初始化阶段 init()

  1. 获取 <canvas> 元素:

       canvas = document.getElementById('webglcanvas');
    • <canvas> 元素:Three.js 渲染 3D 场景的目标。

  2. 创建透视相机:

    camera = new THREE.PerspectiveCamera(
    60, 
    window.innerWidth/window.innerHeight,
    1,
    2000
);
    • 60: 视角（FOV），控制相机的视野宽度。这就好比摄影师选择镜头的焦距，不同的焦距可以看到不同的景深。
    • window.innerWidth / window.innerHeight: 画面宽高比，确保渲染的图像与屏幕大小相匹配。
    • 1, 2000: 近截面距离和远截面距离，相当于拍摄的范围。这类似于摄影师确定相机可以清晰捕捉到的最近和最远的距离。

  3. 创建场景:

    scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
    • scene 代表整个 3D 场景。
    • scene.background 设置背景颜色为白色。

  4. 创建组合:

    group = new THREE.Group();
scene.add(group);
    • group 是一个组合对象，用于组织多个网格对象。这就像舞台上有一个道具箱，里面装着各种道具，这样可以方便地一起移动它们。

  5. 加载纹理并创建球体:

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

    // 设置渲染器
    renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
});
    • TextureLoader: 用于异步加载图像文件。
    • SphereGeometry：用来创建一个球体几何体，所有这里就是制作出地球的基本形状。
    • MeshBasicMaterial：是一种简单的材质，它可以使用纹理贴图，这就好比给地球仪模型涂上真实的地球表面的颜色。
    • THREE.Mesh 是一个网格对象，由几何体和材质组成，就像把地球仪的形状和颜色结合在一起。
    • WebGLRenderer 是 Three.js 提供的 WebGL 渲染器，它负责将 3D 场景渲染到屏幕上。

动画循环 animate() 和渲染函数 render()

  1. 动画循环:

    function animate() {
    requestAnimationFrame(animate);
    render();
}
    • requestAnimationFrame ：让浏览器做一个动画帧，并请求浏览器在下一次重绘之前调用特定的函数来更新动画。这就像摄影师拍摄一段视频，每一帧都是连续的静态照片，通过快速播放这些照片，就形成了流畅的视频。

  2. 渲染函数:

    function render() {
    group.rotation.y -= 0.005;  // 绕 y 轴旋转
    renderer.render(scene, camera);
}
    • 更新 group 的旋转角度，使其绕 y 轴旋转，你也可以设置绕x轴旋转，负数就是逆时针旋转，这个可以自己修改的，让其绕y轴、x轴都可以，负数就是逆时针，根据自己的需求来。
    • 最后使用 renderer 渲染整个场景，就像摄影师每过一段时间就重新拍摄一次地球，记录它的运动来实现效果。

总结

通过上述步骤，我们可以创建一个基本的 3D 地球模型，并使其能够平滑地旋转。这个简单的例子展示了 Three.js 的一些核心概念，例如场景、相机、几何体、材质和渲染器等。

以上就是使用 Three.js 创建一个动态旋转地球模型的完整教程，希望能帮助到你！感谢你的阅读！

avatar
文章
阅读
粉丝