本文根据 https://blog.csdn.net/m0_51180924/article/details/144498003 编写，实现了旋转地球的效果。
代码如下，如果想测试需要本地补充three.js，jquery.js和CCapture.all.min.js，在【参考1】文章末尾可以下载到（示例代码保存为 html 放入带有 JS文件的目录即可）
<html>
<head>
<meta charset="UTF-8">
<!-- <script src="http://threejs.org/build/three.js"></script>-->
<!-- <script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
<script src="CCapture/CCapture.all.min.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
//创建渲染器
var myRenderer = new THREE.WebGLRenderer({
antialias: false,
preserveDrawingBuffer: true
});
document.body.appendChild(myRenderer.domElement);
myRenderer.setPixelRatio(window.devicePixelRatio);
myRenderer.setSize(window.innerWidth, window.innerHeight);
$("#myContainer").append(myRenderer.domElement);
var myClock = new THREE.Clock();
var myCamera = new THREE.PerspectiveCamera(60,
window.innerWidth / window.innerHeight, 1, 10000);
myCamera.position.set(0, 100, 300);
myCamera.lookAt(new THREE.Vector3(0, 0, 0))
var myScene = new THREE.Scene();
myScene.background = new THREE.Color('white');
myScene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
//创建球体(地球)
var myGeometry = new THREE.SphereBufferGeometry(120, 64, 64);
var myMap = new THREE.TextureLoader().load('image/img007.png');
var myMaterial = new THREE.MeshPhongMaterial({
map: myMap
});
var myMesh = new THREE.Mesh(myGeometry, myMaterial);
myScene.add(myMesh);
let isAnimating = true; // 动画状态标志
// 初始化捕获器（以 WebM 格式为例）
const capturer = new CCapture({
format: 'webm',
framerate: 30,
verbose: true
});
// 开始捕获
capturer.start();
//渲染(旋转)球体(地球)
animate();
function animate() {
if (!isAnimating) return; // 停止动画时退出循环
requestAnimationFrame(animate);
var delta = myClock.getDelta();
myRenderer.render(myScene, myCamera);
//按照设置的角度增量实现绕y轴旋转地球
myMesh.rotation.y += delta / 5;
// 捕获当前帧
capturer.capture(myRenderer.domElement);
// 旋转超过一圈（2π）时停止
if (myMesh.rotation.y >= Math.PI * 2) {
isAnimating = false; // 停止动画
console.log("旋转完成！");
capturer.stop();
capturer.save();
}
}
</script>
</body>
</html>
最终完整的代码下载：
工作的视频
参考：