three.js模拟实现地月绕太阳自转体系文档说明

概况如下:

1、SphereGeometry实现自转的太阳,地球和月亮;

2、RingGeometry实现地球和月球的公转轨道;

3、ImageUtils加载球体贴图;

4、canvascreateRadialGradient实现太阳发光效果;

效果图如下:

初始化场景、相机、渲染器,设置相机位置,初始化光源,光源采用点光源PointLight,设置光源位置为场景中心位置,并将光源加入场景中。

// 初始化场景
var scene = new THREE.Scene();
// 初始化相机,第一个参数为摄像机视锥体垂直视野角度,第二个参数为摄像机视锥体长宽比,
// 第三个参数为摄像机视锥体近端面,第四个参数为摄像机视锥体远端面
var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000);
// 设置相机位置,对应参数分别表示x,y,z位置
camera.position.set(0, 0, 300);
var renderer = new THREE.WebGLRenderer({
	  alpha: true,
	  antialias: true
});
// 设置光照,第一个参数表示光颜色,第二个参数为光照强度,范围为0-1,默认值为1,
var lights = new THREE.PointLight('#ffffff', 1);
lights.position.set(0, 0, 0);
scene.add(lights);

设置场景窗口尺寸,并且初始化控制器,窗口尺寸默认与浏览器窗口尺寸保持一致,最后将渲染器加载到dom中。

// 设置窗口尺寸,第一个参数为宽度,第二个参数为高度
renderer.setSize(dom.clientWidth, dom.clientHeight);
// 初始化控制器
var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
// 将渲染器加载到dom中
dom.appendChild(renderer.domElement);

定义太阳及其材质,太阳通过SphereGeometry来实现,通过ImageUtils来导入贴图。

// 定义太阳材质,sunImgUrl表示太阳贴图地址
var sunTexture = THREE.ImageUtils.loadTexture(sunImgUrl, {}, function () {
	  renderer.render(scene, camera);
});
// 使用SphereGeometry实现太阳球体,sunSize表示球体半径
var centerBall = new THREE.Mesh(new THREE.SphereGeometry(sunSize, 30, 50), new THREE.MeshBasicMaterial({
	  map: sunTexture
}));

太阳发光效果通过Sprite引入canvas渲染的createRadialGradient来实现。

/**
 * 实现球体发光
 * @param color 颜色的r,g和b值,比如:“123,123,123”;
 * @returns {Element} 返回canvas对象
 */
var generateSprite = function (color) {
    var canvas = document.createElement('canvas');
    canvas.width = 16;
    canvas.height = 16;
    var context = canvas.getContext('2d');
    var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, 
    canvas.height / 2, canvas.width / 2);
    gradient.addColorStop(0, 'rgba(' + color + ',1)');
    gradient.addColorStop(0.2, 'rgba(' + color + ',1)');
    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);
scene.add(centerBall);

实现地球绕太阳公转,地球自转,月球绕地球公转,月球自转体系,公转轨道通过RingGeometry来实现,公转轨道偏移通过position来实现。

// 创建地月体系
var createSearthLite = function () {
	// 添加地月体系
    earthMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定
    // 地球对应元素
    // 地球公转轨道
    var track = new THREE.Mesh(new THREE.RingGeometry(earthLiteRadius, earthLiteRadius + 0.05, 50, 1), new THREE.MeshBasicMaterial());
    earthLite = new THREE.Mesh(new THREE.SphereGeometry(earthLiteSize, 30, 30), new THREE.MeshPhongMaterial({
    	map: THREE.ImageUtils.loadTexture(imgUrl)
    }));
    earthLite.position.set(earthLiteRadius, 0, 0);
    // 月球对应元素
    // 月球公转轨道
    var trackMoon = new THREE.Mesh(new THREE.RingGeometry(earthLiteSize + 4, earthLiteSize + 4.05, 50, 1), new THREE.MeshBasicMaterial());
    moonLite = new THREE.Mesh(new THREE.SphereGeometry(moonLiteSize, 30, 30), new THREE.MeshPhongMaterial({
    	map: THREE.ImageUtils.loadTexture(imgMoonUrl)
    }));
    // 月球公转轨道中心
    moonLite.position.set(earthLiteSize + 4, 0, 0);
    moonPoint = new THREE.Object3D();
    moonPoint.add(trackMoon);
    moonPoint.add(moonLite);
    moonPoint.position.set(earthLiteRadius, 0, 0);
    
    var earthPoint = new THREE.Object3D();
    earthPoint.add(earthLite);
    earthPoint.add(track);
    earthPoint.add(moonPoint);
    earthMesh.add(earthPoint);
    earthMesh.rotation.set(rotation.x, rotation.y, rotation.z);
    scene.add(earthMesh);
}

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

// 执行函数
var render = function () {
    renderer.render(scene, camera);
    centerBall.rotation.y -= sunSpeed;
    earthMesh.rotation.z -= earthRotationSpeed;
    earthLite.rotation.z -= earthSpeed;
    moonLite.rotation.z -= moonLiteSpeed;
    moonPoint.rotation.z -= moonSpeed;
	orbitcontrols.update();
    requestAnimationFrame(render);
}

预览地址:朵朵视野-Three.js模拟实现地月绕太阳自转体系

下载地址:朵朵视野-Three.js模拟实现地月绕太阳自转体系