three.js从入门到精通系列教程043 - 创建行星按行星轨道围绕太阳公转

最新推荐文章于 2024-02-04 09:04:39 发布

smartsmile2012

最新推荐文章于 2024-02-04 09:04:39 发布

阅读量713

点赞数 10

分类专栏： three.js从入门到精通系列教程文章标签： javascript 开发语言 ecmascript three.js 数字孪生前端

本文链接：https://blog.csdn.net/smartsmile2012/article/details/135747930

版权

three.js从入门到精通系列教程专栏收录该内容

52 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程043 - 创建行星按行星轨道围绕太阳公转</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>

<body>
    <center id="myContainer"></center>
    <script>
        //创建渲染器
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        myRenderer.setClearColor('black', 1.0);
        $("#myContainer").append(myRenderer.domElement);
        var myCamera = new THREE.PerspectiveCamera(20,
            window.innerWidth / window.innerHeight, 1, 1000);
        myCamera.position.set(0, 0, 400);
        var myScene = new THREE.Scene();
        var myMap = THREE.ImageUtils.loadTexture("images/img052.jpg");
        myScene.background = myMap;
        //创建旋转系统
        var myRotation = { x: -Math.PI * 0.42, y: Math.PI * 0.09, z: 0 };
        var myStarRadius = 10;
        var myTrackRadius = 80;
        //创建太阳系统
        var myMesh = new THREE.Mesh(new THREE.SphereGeometry(2, 2, 2),
            new THREE.MeshLambertMaterial());
        //创建行星轨道
        var myTrack = new THREE.Mesh(
            new THREE.RingGeometry(myTrackRadius, myTrackRadius + 2, 50, 1),
            new THREE.MeshBasicMaterial());
        //创建行星
        var myStar = new THREE.Mesh(
            new THREE.SphereGeometry(myStarRadius, 30, 30),
            new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture('images/img077.png')
            }));
        myStar.position.set(myTrackRadius, 0, 0);
        myStar.rotation.x = 1.9;
        //创建行星环
        var myStarRing = new THREE.Mesh(
            new THREE.RingGeometry(myStarRadius + 3, myStarRadius + 8, 50, 1),
            new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture('images/img077.png'),
                side: THREE.DoubleSide
            }));
        //创建行星环旋转中心
        myStarCenter = new THREE.Object3D();
        myStarCenter.add(myStarRing);
        myStarCenter.position.set(myTrackRadius, 0, 0);
        myStarCenter.rotation.x = 0.3;
        //创建太阳系中心
        var myCenter = new THREE.Object3D();
        myCenter.add(myStar);
        myCenter.add(myTrack);
        myCenter.add(myStarCenter);
        myMesh.add(myCenter);
        myMesh.rotation.set(myRotation.x, myRotation.y, myRotation.z);
        myScene.add(myMesh);
        //渲染旋转系统
        animate();
        function animate() {
            myRenderer.render(myScene, myCamera);
            myMesh.rotation.z -= 0.01;
            requestAnimationFrame(animate);
        }
    </script>
</body>

</html>