使用three.js怎么模擬一個(gè)太陽系行星體系

使用three.js怎么模擬一個(gè)太陽系行星體系？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

員工經(jīng)過長(zhǎng)期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡(jiǎn)單”。公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、微信公眾號(hào)開發(fā)、電商網(wǎng)站開發(fā)，微信小程序，軟件按需設(shè)計(jì)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

概況如下：

1、 SphereGeometry 實(shí)現(xiàn)自轉(zhuǎn)的太陽；

2、 RingGeometry 實(shí)現(xiàn)太陽系星系的公轉(zhuǎn)軌道；

3、 ImageUtils 加載球體和各行星貼圖；

4、 canvas 中 createRadialGradient 實(shí)現(xiàn)太陽發(fā)光效果；

5、 THREE.Sprite 精靈實(shí)現(xiàn)太陽系行星。

// 初始化場(chǎng)景
var scene = new THREE.Scene();
// 初始化相機(jī)，第一個(gè)參數(shù)為攝像機(jī)視錐體垂直視野角度，第二個(gè)參數(shù)為攝像機(jī)視錐體長(zhǎng)寬比，
// 第三個(gè)參數(shù)為攝像機(jī)視錐體近端面，第四個(gè)參數(shù)為攝像機(jī)視錐體遠(yuǎn)端面
var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000);
// 設(shè)置相機(jī)位置，對(duì)應(yīng)參數(shù)分別表示x，y，z位置
camera.position.set(0, 0, 500);
var renderer = new THREE.WebGLRenderer({
      alpha: true,
      antialias: true
});

設(shè)置場(chǎng)景窗口尺寸，并且初始化控制器，窗口尺寸默認(rèn)與瀏覽器窗口尺寸保持一致，最后將渲染器加載到dom中。

// 設(shè)置窗口尺寸，第一個(gè)參數(shù)為寬度，第二個(gè)參數(shù)為高度
renderer.setSize(dom.clientWidth, dom.clientHeight);
// 初始化控制器
var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
// 將渲染器加載到dom中
dom.appendChild(renderer.domElement);

定義太陽及其材質(zhì)，太陽通過 SphereGeometry 來實(shí)現(xiàn)，通過 ImageUtils 來導(dǎo)入貼圖。

// 定義太陽材質(zhì)
var sunTexture = THREE.ImageUtils.loadTexture('./image/sun_bg.jpg', {}, function () {
    renderer.render(scene, camera);
});
// 太陽以及太陽材質(zhì)設(shè)定
centerBall = new THREE.Mesh(new THREE.SphereGeometry(30, 30, 30), new THREE.MeshBasicMaterial({
    map: sunTexture
}));
scene.add(centerBall);

太陽發(fā)光效果通過 Sprite 引入 canvas 渲染的 createRadialGradient 來實(shí)現(xiàn)。

/**
* 實(shí)現(xiàn)球體發(fā)光
* @param color 顏色的r,g和b值,比如：“123,123,123”;
* @returns {Element} 返回canvas對(duì)象
*/
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;
};
// 添加太陽發(fā)光效果
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);

太陽系各行星公轉(zhuǎn)軌道通過 RingGeometry 來實(shí)現(xiàn)，公轉(zhuǎn)軌道偏移通過 position 來實(shí)現(xiàn)，行星體系通過 THREE.Sprite 來實(shí)現(xiàn)。

/**
 * 返回行星軌道的組合體
 * @param starLiteSize 行星的大小
 * @param starLiteRadius 行星的旋轉(zhuǎn)半徑
 * @param rotation 行星組合體的x,y,z三個(gè)方向的旋轉(zhuǎn)角度
 * @param speed 行星運(yùn)動(dòng)速度
 * @param imgUrl 行星的貼圖
 * @param scene 場(chǎng)景
 * @returns {{satellite: THREE.Mesh, speed: *}} 衛(wèi)星組合對(duì)象;速度
*/
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()); //材質(zhì)設(shè)定
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};
};

將創(chuàng)建好的太陽及行星自轉(zhuǎn)公轉(zhuǎn)體系渲染到場(chǎng)景中，自轉(zhuǎn)和公轉(zhuǎn)通過定時(shí)修改 position 值來實(shí)現(xiàn)，動(dòng)畫使用 requestAnimationFrame 來實(shí)現(xiàn)。

// 執(zhí)行函數(shù)
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);
}

看完上述內(nèi)容，你們掌握使用three.js怎么模擬一個(gè)太陽系行星體系的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前題目：使用three.js怎么模擬一個(gè)太陽系行星體系
當(dāng)前地址：http://www.muchs.cn/article32/ghjpsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、域名注冊(cè)、網(wǎng)站維護(hù)、手機(jī)網(wǎng)站建設(shè)、App開發(fā)、App設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容