Three.js与canvas实现地球自转动画

最新推荐文章于 2025-04-04 22:21:28 发布

zhangrui_web

最新推荐文章于 2025-04-04 22:21:28 发布

阅读量7.1k

点赞数

分类专栏： canvas html js

本文链接：https://blog.csdn.net/zhangrui_web/article/details/80593734

版权

js 同时被 3 个专栏收录

27 篇文章

订阅专栏

html

9 篇文章

订阅专栏

canvas

2 篇文章

订阅专栏

效果如上图

实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>旋转球体</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .bg{
            height: 500px;
            overflow: hidden;
            background: url("img/bg1.png");
            background-position: top center;
            background-repeat: no-repeat;
            background-size: 1920px 500px;
            position: relative;
        }
    </style>
</head>
<body οnlοad="init()" style="background: #fff;">
    <div class="bg">
        <canvas id="mainCanvas" width="1920px" height="1440px" style="position: absolute;left: 50%;margin-left: -960px"></canvas>
    </div>
</body>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript">
    var sphere,camera,scene,renderer;
    function init() {
        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('mainCanvas'),
            alpha: true
        });
        renderer.setClearColor( 0x000000, 0);
        scene = new THREE.Scene();
        camera = new THREE.OrthographicCamera(-4.9, 4.9, 7.2, -3.75, 0.1, 100);
        camera.position.set(25, 0, 25);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);
        var texture = new THREE.TextureLoader().load("img/1.jpg");
        // 材质
        var material = new THREE.MeshBasicMaterial({
//            color: 0xa6d6ff,
//            wireframe: true,
            map: texture
        });
        drawSphere(scene, material);    //球体
        animate();
    }
    function animate() {
        requestAnimationFrame( animate );
        sphere.rotation.y += 0.0025;
        renderer.render( scene, camera );
    }
    function drawSphere(scene, material) {
        sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 40, 40), material);
        scene.add(sphere);
    }
</script>
</html>

全项目下载地址： https://github.com/zhangrui95/canvas.git（页面）