ThreeJS-太阳球围绕旋转（二十四）

数学小知识：

我们根据旋转角度θ可以计算出任意时刻的x,y

sinθ = y0/r; 因此y0= rsinθ,

cosθ = x0/r,因此x0= rcosθ,

小拓展： y0^ +x0^ - r^2*sinθ^2 + r^2*cosθ^2 = r^2*(sinθ^2 + cosθ^2) = r^2;

这也是为什么在极坐标方程中

y0= rsinθ,

x0= rcosθ,

可以代表一个圆的原因。

会极坐标方程的同学可以直接跳过该描述。

关键代码：

            //创建一个光球
            const sphereMesh = new THREE.Mesh(
            new THREE.SphereBufferGeometry(1, 50, 50), 
            new THREE.MeshBasicMaterial({color:0xFF0000})
            );
            sphereMesh.position.set(10, 5, 10);
            //将光源加入球
            sphereMesh.add(directionalLight);

//渲染下一帧的时候就会调用回调函数
            const clock = new THREE.Clock();
            let renderFun = () => {
                let time = clock.getElapsedTime();
                sphereMesh.position.x = Math.sin(time)*10;
                sphereMesh.position.z = Math.cos(time)*10;
                //更新阻尼数据
                controls.update();
                //需要重新绘制canvas画布
                render.render(scene, camera);
                //监听屏幕刷新（60HZ,120HZ），每次刷新触发一次requestAnimationFrame回调函数
                //但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果
                window.requestAnimationFrame(renderFun);
            }; 

完整代码：

效果图：