three 环绕旋转，卫星可以各个角度绕星球旋转

最新推荐文章于 2024-06-27 23:28:24 发布

早晨阳光一般暖

最新推荐文章于 2024-06-27 23:28:24 发布

阅读量4.6k

点赞数 3

分类专栏： three.js javascript 文章标签： three

本文链接：https://blog.csdn.net/LZY_1993/article/details/80602510

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

three.js

2 篇文章 0 订阅

订阅专栏

1.先看看效果

演示地址：http://wsitm.gitee.io/web_test/view/TestRound.html

2.如果是二维的话，可以根据变化角度结合三角函数就能计算从x和y坐标；

无奈，如果还是使用坐标改变的方式，博主不会三维数学啊，计算不出x,y和z坐标啊。

还好，过了好长时间，博主终于在网上找到了解决的方法，

就是把中心点，圆环(圆轨)和卫星三者组合成一体，再改变旋转角度

3.代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestRound</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: black;
        }

        div#box {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="../../js/resource/js/three/three.js"></script>
</head>
<body onload="initThree()">
<div id="box"></div>
</body>
<script>
    var renderer, camera, scene;//渲染器，相加，场景
    var Earth, satellites = [];//地球，卫星（数组）

    function initThree() {
        var dom = document.getElementById("box");

        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 1000);
        camera.position.set(0, 0, 400);//设置相机位置
        renderer = new THREE.WebGLRenderer({
            alpha: true,
            antialias: true
        });
        renderer.setSize(dom.clientWidth, dom.clientHeight);//设置窗口尺寸
        dom.appendChild(renderer.domElement);

        var sunTexture = THREE.ImageUtils.loadTexture('../../js/resource/img/map_world.png', {}, function () {
            renderer.render(scene, camera);
        });

        //地球
        Earth = new THREE.Mesh(new THREE.SphereGeometry(20, 30, 30), new THREE.MeshBasicMaterial({
            map: sunTexture
        })); //材质设定

        var satellite = new THREE.Sprite(new THREE.SpriteMaterial({
            map: new THREE.CanvasTexture(generateSprite('196,233,255')),
            blending: THREE.AdditiveBlending
        }));
        satellite.scale.x = satellite.scale.y = satellite.scale.z = 60;
        scene.add(satellite);//添加发光,让地球有发光的样式
        scene.add(Earth);

        //添加卫星
        satellites.push(initSatellite(5, 28, {x: -Math.PI * 0.35, y: Math.PI * 0.25, z: 0}, 0.021, scene));
        satellites.push(initSatellite(5, 25, {x: -Math.PI * 0.35, y: -Math.PI * 0.2, z: 0}, 0.022, scene));
        satellites.push(initSatellite(5, 29, {x: -Math.PI * 0.35, y: Math.PI * 0.05, z: 0}, 0.023, scene));

        render();

    }

    
    /**
     * 返回一个卫星和轨道的组合体
     * @param satelliteSize 卫星的大小
     * @param satelliteRadius 卫星的旋转半径
     * @param rotation 组合体的x,y,z三个方向的旋转角度
     * @param speed 卫星运动速度
     * @param scene 场景
     * @returns {{satellite: THREE.Mesh, speed: *}} 卫星组合对象;速度
     */
    var initSatellite = function (satelliteSize, satelliteRadius, rotation, speed, scene) {

        var track = new THREE.Mesh(new THREE.RingGeometry(satelliteRadius, satelliteRadius + 0.05, 50, 1), new THREE.MeshBasicMaterial());
        var centerMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定
        var satellite = new THREE.Sprite(new THREE.SpriteMaterial({
            map: new THREE.CanvasTexture(generateSprite('196,233,255')),
            blending: THREE.AdditiveBlending
        }));
        satellite.scale.x = satellite.scale.y = satellite.scale.z = satelliteSize;
        satellite.position.set(satelliteRadius, 0, 0);

        var pivotPoint = new THREE.Object3D();
        pivotPoint.add(satellite);
        pivotPoint.add(track);
        centerMesh.add(pivotPoint);
        centerMesh.rotation.set(rotation.x, rotation.y, rotation.z);
        scene.add(centerMesh);
        return {satellite: centerMesh, speed: speed};
    };

    /**
     * 实现发光星星
     * @param color 颜色的r,g和b值,比如：“123,123,123”;
     * @returns {Element} 返回canvas对象
     */
    var generateSprite = function (color) {
        var canvas = document.createElement('canvas');
        canvas.width = 16;
        canvas.height = 16;
        var context = canvas.getContext('2d');
        var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
        gradient.addColorStop(0, 'rgba(' + color + ',1)');
        gradient.addColorStop(0.2, 'rgba(' + color + ',1)');
        gradient.addColorStop(0.4, 'rgba(' + color + ',.6)');
        gradient.addColorStop(1, 'rgba(0,0,0,0)');
        context.fillStyle = gradient;
        context.fillRect(0, 0, canvas.width, canvas.height);
        return canvas;
    };
    

    function render() {
        renderer.render(scene, camera);
        Earth.rotation.y -= 0.01;
        for (var i = 0; i < satellites.length; i++) {
            satellites[i].satellite.rotation.z -= satellites[i].speed;
        }
        requestAnimationFrame(render);
    }

</script>

</html>

源码 https://gitee.com/wsitm/web_test.git