您好,登錄后才能下訂單哦!
使用three.js怎么模擬一個(gè)太陽(yáng)系行星體系?相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
概況如下:
1、 SphereGeometry 實(shí)現(xiàn)自轉(zhuǎn)的太陽(yáng);
2、 RingGeometry 實(shí)現(xiàn)太陽(yáng)系星系的公轉(zhuǎn)軌道;
3、 ImageUtils 加載球體和各行星貼圖;
4、 canvas 中 createRadialGradient 實(shí)現(xiàn)太陽(yáng)發(fā)光效果;
5、 THREE.Sprite 精靈實(shí)現(xiàn)太陽(yáng)系行星。
// 初始化場(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);
定義太陽(yáng)及其材質(zhì),太陽(yáng)通過 SphereGeometry 來(lái)實(shí)現(xiàn),通過 ImageUtils 來(lái)導(dǎo)入貼圖。
// 定義太陽(yáng)材質(zhì) var sunTexture = THREE.ImageUtils.loadTexture('./image/sun_bg.jpg', {}, function () { renderer.render(scene, camera); }); // 太陽(yáng)以及太陽(yáng)材質(zhì)設(shè)定 centerBall = new THREE.Mesh(new THREE.SphereGeometry(30, 30, 30), new THREE.MeshBasicMaterial({ map: sunTexture })); scene.add(centerBall);
太陽(yáng)發(fā)光效果通過 Sprite 引入 canvas 渲染的 createRadialGradient 來(lái)實(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; }; // 添加太陽(yáng)發(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);
太陽(yáng)系各行星公轉(zhuǎn)軌道通過 RingGeometry 來(lái)實(shí)現(xiàn),公轉(zhuǎn)軌道偏移通過 position 來(lái)實(shí)現(xiàn),行星體系通過 THREE.Sprite 來(lái)實(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)建好的太陽(yáng)及行星自轉(zhuǎn)公轉(zhuǎn)體系渲染到場(chǎng)景中,自轉(zhuǎn)和公轉(zhuǎn)通過定時(shí)修改 position 值來(lái)實(shí)現(xiàn),動(dòng)畫使用 requestAnimationFrame 來(lái)實(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è)太陽(yáng)系行星體系的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。