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

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

 

 

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值