欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

three 实现绕物体旋转,卫星绕星球旋转

程序员文章站 2022-04-12 17:13:30
如果是二维的话,可以根据变化角度结合三角函数就能计算从x和y坐标;无奈,博主不会三维数学啊,计算不出x,y和z坐标啊。还好,博主终于在网上找到了解决的方法,就是把中心点,圆环(圆轨)和卫星三者组合成一体,再改变旋转角度 ......

1.先看看效果

three 实现绕物体旋转,卫星绕星球旋转

 

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>