three.js模拟实现太阳系行星体系功能

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;
};
// 添加太阳发光效果
var centerBallLite = new THREE.Sprite(new THREE.SpriteMaterial({
map: new THREE.CanvasTexture(generateSprite(sunSpriteColor)),
blending: THREE.AdditiveBlending
}));
centerBallLite.scale.x = centerBallLite.scale.y = centerBallLite.scale.z = sunScaleSize;
scene.add(centerBallLite);

太阳系各行星公转轨道通过 RingGeometry 来实现，公转轨道偏移通过 position 来实现，行星体系通过 THREE.Sprite 来实现。

/**
* 返回行星轨道的组合体
* @param starLiteSize 行星的大小
* @param starLiteRadius 行星的旋转半径
* @param rotation 行星组合体的x,y,z三个方向的旋转角度
* @param speed 行星运动速度
* @param imgUrl 行星的贴图
* @param scene 场景
* @returns {{satellite: THREE.Mesh, speed: *}} 卫星组合对象;速度
*/
var initSatellite = function (starLiteSize, starLiteRadius, rotation, speed, imgUrl, scene) {
var track = new THREE.Mesh(new THREE.RingGeometry(starLiteRadius, starLiteRadius + 0.05, 50, 1), new THREE.MeshBasicMaterial());
var centerMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定
var starLite = new THREE.Sprite(new THREE.SpriteMaterial({
map: THREE.ImageUtils.loadTexture(imgUrl)
}));
starLite.scale.x = starLite.scale.y = starLite.scale.z = starLiteSize;
starLite.position.set(starLiteRadius, 0, 0);
var pivotPoint = new THREE.Object3D();
pivotPoint.add(starLite);
pivotPoint.add(track);
centerMesh.add(pivotPoint);
centerMesh.rotation.set(rotation.x, rotation.y, rotation.z);
scene.add(centerMesh);
return {starLite: centerMesh, speed: speed};
};

将创建好的太阳及行星自转公转体系渲染到场景中，自转和公转通过定时修改 position 值来实现，动画使用 requestAnimationFrame 来实现。

// 执行函数
var render = function () {
renderer.render(scene, camera);
centerBall.rotation.y -= 0.01;
for (var i = 0; i < starLites.length; i++) {
starLites[i].starLite.rotation.z -= starLites[i].speed;
}
orbitcontrols.update();
requestAnimationFrame(render);
}

总结

以上所述是小编给大家介绍的three.js模拟实现太阳系行星体系功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！