带有three.js的简单太阳系答案

【问题标题】：Simple solar system with three.js带有three.js的简单太阳系
【发布时间】：2016-07-11 02:12:09
【问题描述】：

我必须用 three.js 创建一个小型太阳系（1 颗恒星，2 颗行星，每个行星有 1 颗卫星）这是我第一次用three.js（和一般的JavaScript）编程，所以我是一个完全的新手。

我设法创建了我的静态系统，因此我拥有太阳、火星、火卫一、地球和月球。

现在我不知道如何让行星围绕太阳运行，让卫星围绕它们的行星运行。

这是我目前所做的

     //global variables declaration
  function init(){
     /*starting code: cameras, declaring variables and so on*/
    function celestialBodiesSetup(){
        var geometry,material,image;
        var celestialBodies=[sun,mars,phobos,earth,moon];
        //sun, mars etc are declared as global variables before the init function
        for(var i=0;i<celestialBodies.length;i++){
            switch (celestialBodies[i]){
                case sun:
                    material=new THREE.MeshPhongMaterial();
                    geometry =new THREE.SphereGeometry(35,32,32);
                    image="mysun.png";
                    sun=createSphere(geometry,material,image);
                    sun.position.set(0,0,20);
                    var pointLight = new THREE.PointLight( 0xFDFDFD, 2, 1800,70 );
                    sun.add(pointLight);
                    break;
                case mars:
                    material=new THREE.MeshPhongMaterial();
                    geometry =new THREE.SphereGeometry(17,32,32);
                    image="mars.jpg";
                    mars=createSphere(geometry,material,image,sun);
                    mars.position.set(150,-15,0);
                    break;
             /*repeat process for the remaining celestial bodies*/
       function createSphere(geometry,material,image,celBody){
        var sphere = new THREE.Mesh(geometry, material);
        material.map= THREE.ImageUtils.loadTexture(image);
        if(celBody) celBody.add(sphere); /*I set that all the planets are added to the sun, and all 
           the moons are added to their planet. Only the sun is added to the scene itself*/
        else scene.add(sphere);
        return sphere;
    }
   celestialBodiesSetup();   
}

此时我必须处理 animate() 函数，但我对向量、旋转等一无所知。

我唯一能做的就是设置类似 earth.rotation.y+=0.1 这样行星开始绕其轴旋转，但仅此而已。

【问题讨论】：

这是你应该自己做的作业吗？
请使用空格和换行符。为了您和我们。
这是我正在做的一个练习，因为我的教授总是对向量提出问题，我认为这会对我有所帮助，但它让我发疯了@WestLangley

标签： javascript vector three.js

【解决方案1】：

你为什么不试试

http://www.html5rocks.com/en/tutorials/casestudies/100000stars/

案例研究，这很好，而且还有很多例子

https://www.chromeexperiments.com/?q=solar%20

为了很好地参考threejs library starter，继续示例可视化

http://stemkoski.github.io/Three.js/

http://mrdoob.github.io/three.js/examples/canvas_geometry_earth.html

http://oos.moxiecode.com/blog/index.php/experiments/javascript-webgl/

在库接口的抽象级别，这些教程可以帮助您制作项目。您需要花时间在旋转向量、四元数和着色器上才能深入了解。

您还可以查看 unity 3d 引擎，为您的东西构建一个快速的夜间原型，以获取用于演示的东西。

【讨论】：

【解决方案2】：

我做了类似的事情并通过以下方式完成了旋转和轨道：

//Earth rotation and orbit
earthMesh.rotation.y = Date.now() * -0.001;
earthMesh.position.x = Math.sin( Date.now() * 0.001 ) * 219.15;
earthMesh.position.z = Math.cos( Date.now() * 0.001 ) * 219.15;

//Moon rotation and orbit
moonMesh.rotation.y = Date.now() * -0.001;
moonMesh.position.x = Math.sin( Date.now() * 0.001 ) * 219.15 + Math.cos( Date.now() * -0.007 ) * -10;
moonMesh.position.z = Math.cos( Date.now() * 0.001 ) * 219.15 + Math.sin( Date.now() * -0.007 ) * -10;

【讨论】：