概況如下:
1、SphereGeometry
實現自轉的太陽,土星;
2、RingGeometry
實現土星公轉軌道;
3、ImageUtils
加載球體貼圖;
4、canvas
中createRadialGradient
實現太陽發光效果;
5、THREE.RingGeometry
實現土星公轉軌道。
效果圖如下:
預覽地址:three.js實現土星繞太陽自轉體系
初始化場景、相機、渲染器,設置相機位置,初始化光源,光源採用點光源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 createSsaturnLite = function () {
// 添加土星體系
saturnMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材質設定
// 土星對應元素
// 土星公轉軌道
var track = new THREE.Mesh(new THREE.RingGeometry(saturnLiteRadius, saturnLiteRadius + 0.1, 50, 1), new THREE.MeshBasicMaterial());
saturnLite = new THREE.Mesh(new THREE.SphereGeometry(saturnLiteSize, 30, 30), new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture(imgUrl)
}));
saturnLite.position.set(saturnLiteRadius, 0, 0);
saturnLite.rotation.x = 1.9;
// 土星環對應元素
// 土星環公轉軌道
var trackRing = new THREE.Mesh(new THREE.RingGeometry(saturnLiteSize + 3, saturnLiteSize + 8, 50, 1), new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(ringImgUrl),
side: THREE.DoubleSide
}));
// 土星環軌道中心
ringPoint = new THREE.Object3D();
ringPoint.add(trackRing);
ringPoint.position.set(saturnLiteRadius, 0, 0);
ringPoint.rotation.x = 0.3;
var earthPoint = new THREE.Object3D();
earthPoint.add(saturnLite);
earthPoint.add(track);
earthPoint.add(ringPoint);
saturnMesh.add(earthPoint);
saturnMesh.rotation.set(rotation.x, rotation.y, rotation.z);
scene.add(saturnMesh);
}
將創建好的太陽,土星自轉公轉體系渲染到場景中,自轉和公轉通過定時修改position
值來實現,動畫使用requestAnimationFrame
來實現。
// 執行函數
var render = function () {
renderer.render(scene, camera);
centerBall.rotation.y -= sunSpeed;
saturnMesh.rotation.z -= saturnRotationSpeed;
orbitcontrols.update();
requestAnimationFrame(render);
}