欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Three.js實(shí)現(xiàn)太陽(yáng)系八大行星的自轉(zhuǎn)公轉(zhuǎn)示例代碼

 更新時(shí)間：2019年04月09日 09:39:49   作者：Xiu_  
這篇文章主要給大家介紹了關(guān)于如何使用Three.js實(shí)現(xiàn)太陽(yáng)系八大行星的自轉(zhuǎn)公轉(zhuǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一. Three.js框架簡(jiǎn)介

Three.js是用javascript編寫(xiě)的WebGL第三方庫(kù)，運(yùn)用three.js框架寫(xiě)3D程序，就如同在現(xiàn)實(shí)生活中觀察一個(gè)3D場(chǎng)景一樣，讓人置身其中。介紹three.js必須提到它的三大組件,Scene,Camera,Render。它們是整個(gè)框架的基礎(chǔ)，有了這三個(gè)組件才能將物體渲染到網(wǎng)頁(yè)上，實(shí)現(xiàn)整個(gè)場(chǎng)景的搭建。

場(chǎng)景(scene)

顧名思義，就是用來(lái)放置所有的元素。

var scene = new THREE.Scene(); //建立場(chǎng)景

相機(jī)(camera)

相機(jī)，我們要在哪個(gè)位置，如何去看這些元素。

相機(jī)分為多種，不展開(kāi)介紹，這里我們使用的是 透視相機(jī)。

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000); //設(shè)置相機(jī)為 角度60度，寬高比，最近端Z軸為1,最遠(yuǎn)端Z軸為10000

我們可以通過(guò)一張來(lái)自three.js文檔中的圖片來(lái)了解這些屬性

渲染器(render)

當(dāng)把場(chǎng)景中的所有內(nèi)容準(zhǔn)備好后，就可以對(duì)場(chǎng)景進(jìn)行渲染，表示我們?cè)鯓觼?lái)繪制這些元素。

渲染器也分為多種，這里使用的是WebGLRenderer;

var renderer = new THREE.WebGLRenderer();

具體步驟：建立元素->定義相機(jī)->搭建場(chǎng)景->將元素和相機(jī)放入場(chǎng)景中->渲染場(chǎng)景

具體代碼我們會(huì)在后面介紹，然后讓我們先瞅一眼效果圖。

二. 基本初始化

這里直接在CDN上引入three.js

<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>

注：因?yàn)槟承┬行堑拇笮?，轉(zhuǎn)速，距離差距過(guò)大，所以進(jìn)行了一些不平衡調(diào)整。

下面將一一分析這些元素是如何放入的。

1.canvas

我們沒(méi)有把場(chǎng)景直接掛載到body中，而是在body中放置了一個(gè)canvas畫(huà)布，在其上顯示。

2.背景

我們沒(méi)有做3D的旋轉(zhuǎn)背景，而是直接放了一張背景圖作為小太陽(yáng)系的背景。這張背景圖是直接在canvas中放置的。

<canvas id="webglcanvas"></canvas>
renderer = new THREE.WebGLRenderer({ //定義渲染器
   alpha: true, //讓背景透明,默認(rèn)是黑色，以顯示我們自己的背景圖
  });
renderer.setClearAlpha(0);
//css文件
#webglcanvas {
   background: url(./images/bg4.jpg) no-repeat;
   background-size: cover;
  }

但如果只是這樣簡(jiǎn)單的操作是沒(méi)有用的，因?yàn)樵谔砑愉秩酒骱?，?huì)默認(rèn)添加一個(gè)背景顏色為黑色。所以要在渲染器中設(shè)置它的alpha屬性(WebGL渲染器及屬性方法)，讓背景透明，以顯示我們自己的背景圖

3.定義基本組件

定義場(chǎng)景

scene = new THREE.Scene(), //建立場(chǎng)景

定義照相機(jī)位置

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1,10000); //設(shè)置相機(jī)為 角度60度，寬高比，最近端Z軸為1,最遠(yuǎn)端Z軸為10000
  camera.position.z = 2000; //調(diào)整相機(jī)位置
  camera.position.y = 500;

建立一個(gè)組

組可以看作是一些元素的容器，將某些有共同特征的元素放在一個(gè)組里。

group = new THREE.Group(), //建立一個(gè)組

我會(huì)在第三節(jié)解釋為什么要建立額外16個(gè)組。

 //下面這些組用來(lái)建立每個(gè)星球的父元素,以實(shí)現(xiàn) 八大行星不同速度的公轉(zhuǎn)與自轉(zhuǎn)
  var group1 = new THREE.Group();
   groupParent1 = new THREE.Group();
   group2 = new THREE.Group();
   groupParent2 = new THREE.Group();
   group3 = new THREE.Group();
   groupParent3 = new THREE.Group();
   group4 = new THREE.Group();
   groupParent4 = new THREE.Group();
   group5 = new THREE.Group();
   groupParent5 = new THREE.Group();
   group6 = new THREE.Group();
   groupParent6 = new THREE.Group();
   group7 = new THREE.Group();
   groupParent7 = new THREE.Group();
   group8 = new THREE.Group();
   groupParent8 = new THREE.Group();

定義渲染器

WebGLRenderer中有一個(gè)用來(lái)繪制輸出的canvas對(duì)象,現(xiàn)在獲取設(shè)置的canvas放入我們渲染器中的canvas對(duì)象中

var canvas = document.getElementById('webglcanvas'),
renderer = new THREE.WebGLRenderer({ //定義渲染器
   alpha: true, //讓背景透明,默認(rèn)是黑色 以顯示我們自己的背景圖
   canvas: canvas, //一個(gè)用來(lái)繪制輸出的Canvas對(duì)象
   antialias: true //抗鋸齒
  });
renderer.setSize(window.innerWidth, window.innerHeight); //設(shè)置渲染器的寬高

4.初始化函數(shù)

在這個(gè)函數(shù)中進(jìn)行一系列的初始化操作。

function init() {  //用來(lái)初始化的函數(shù)
   scene.add(group); //把組都添加到場(chǎng)景里

   scene.add(groupParent1);
   scene.add(groupParent2);
   scene.add(groupParent3);
   scene.add(groupParent4);
   scene.add(groupParent5);
   scene.add(groupParent6);
   scene.add(groupParent7);
   scene.add(groupParent8);
   
   var loader = new THREE.TextureLoader();/*材質(zhì) 紋理加載器*/
   // 太陽(yáng)
   loader.load('./images/sun1.jpg', function (texture) {  
    var geometry = new THREE.SphereGeometry(250, 20, 20) //球體模型 
    var material = new THREE.MeshBasicMaterial({ map: texture }) //材質(zhì) 將圖片解構(gòu)成THREE能理解的材質(zhì)
    var mesh = new THREE.Mesh(geometry, material);  //網(wǎng)孔對(duì)象 第一個(gè)參數(shù)是幾何模型(結(jié)構(gòu)),第二參數(shù)是材料(外觀)
    group.add(mesh);//添加到組里
   })
   // 水星
   loader.load('./images/water.jpg', function (texture) {
    var geometry = new THREE.SphereGeometry(25, 20, 20) //球型 
    var material = new THREE.MeshBasicMaterial({ map: texture }) //材質(zhì) 將圖片解構(gòu)成THREE能理解的材質(zhì)
    var mesh = new THREE.Mesh(geometry, material);
    group1.position.x -= 300;
    group1.add(mesh);
    groupParent1.add(group1);
   })
   //其它7顆行星參數(shù)因?yàn)樘L(zhǎng)了在這里就不給出了，但參數(shù)的設(shè)置原理都是一樣的
   }

簡(jiǎn)要解釋一下：

var loader = new THREE.TextureLoader();是定義了一個(gè)材質(zhì)紋理加載器。

var geometry = new THREE.SphereGeometry(250, 20, 20);建立一個(gè)球體模型，球體半徑為250，水平分割面的數(shù)量20，垂直分割面的數(shù)量20。

var mesh = new THREE.Mesh(geometry, material);網(wǎng)孔對(duì)象。

具體作用就是創(chuàng)建一個(gè)球體元素，先構(gòu)建框架，在用行星的平面圖將它包裹起來(lái)，就形成了一顆行星，再把這顆行星添加到組里，之后再把組添加到場(chǎng)景里。這里就構(gòu)建單個(gè)元素的過(guò)程。

那么為什么太陽(yáng)直接添加到組里，而水星要用兩個(gè)組層級(jí)添加，且給它的位置設(shè)偏移呢。我們來(lái)到第三節(jié)。

三. 自轉(zhuǎn)同時(shí)公轉(zhuǎn)

旋轉(zhuǎn)方式：我們要實(shí)現(xiàn)旋轉(zhuǎn)功能有三種方式

1.旋轉(zhuǎn)照相機(jī)  2.旋轉(zhuǎn)整個(gè)場(chǎng)景(Scene)  3.旋轉(zhuǎn)單個(gè)元素。

因?yàn)槲覀冞@里每個(gè)行星的自轉(zhuǎn)速度，公轉(zhuǎn)速度都不一樣。所以設(shè)置整體旋轉(zhuǎn)并不可行，所以要給每個(gè)元素設(shè)置不同的旋轉(zhuǎn)屬性。

旋轉(zhuǎn)機(jī)制：這里介紹物體的rotation屬性，相對(duì)于自身旋轉(zhuǎn)。

例如：

scene.rotation.y += 0.04; //整個(gè)場(chǎng)景繞自身的Y軸逆時(shí)針旋轉(zhuǎn)

進(jìn)入正題

Scene中的所有元素使用rotation.y屬性，默認(rèn)旋轉(zhuǎn)軸都為這根Y軸，因?yàn)樗鼈兂跏蓟痀軸就是這根軸。
所以讓太陽(yáng)旋轉(zhuǎn)直接讓它的組旋轉(zhuǎn)就行了group.rotation.y += 0.04;

而其它行星需要讓它們圍繞著太陽(yáng)轉(zhuǎn)，就要先給它們自身設(shè)置一個(gè)位置偏移。例如水星：group1.position.x -= 300;  而此時(shí)設(shè)置group1.rotation.y屬性，它就會(huì)實(shí)現(xiàn)自轉(zhuǎn)。因?yàn)樗腨軸位置已經(jīng)改變了。

那么此時(shí)要想再實(shí)現(xiàn)公轉(zhuǎn)，在這個(gè)對(duì)象中是找不到默認(rèn)Y軸這根線的。所以我們給group1再設(shè)置了一個(gè)“父元素”groupParent1。groupParent1.add(group1);

當(dāng)我們移動(dòng)了group1時(shí)，groupParent1的位置是沒(méi)有變的，自然它的Y軸也不會(huì)變，又因?yàn)間roupParent1包含了group1，所以旋轉(zhuǎn)groupParent1時(shí)，group1也會(huì)繞著初始的默認(rèn)Y軸旋轉(zhuǎn)。所以設(shè)置那么多組，是為了實(shí)現(xiàn)每顆行星不同的速度和公轉(zhuǎn)的同時(shí)自轉(zhuǎn)。

四. 其他實(shí)現(xiàn)函數(shù)

  function render() {
   renderer.render(scene, camera);
   camera.lookAt(scene.position); //讓相機(jī)盯著場(chǎng)景的位置 場(chǎng)景始終在中間
  }
  //設(shè)置公轉(zhuǎn)
  function revolution(){
   groupParent1.rotation.y += 0.15;
   groupParent2.rotation.y += 0.065;
   groupParent3.rotation.y += 0.05;
   groupParent4.rotation.y += 0.03;
   groupParent5.rotation.y += 0.001; 
   groupParent6.rotation.y += 0.02;
   groupParent7.rotation.y += 0.0005;
   groupParent8.rotation.y += 0.003;
  }
  //設(shè)置自轉(zhuǎn)
  function selfRotation(){
   group.rotation.y += 0.04;
   group1.rotation.y += 0.02;
   group2.rotation.y -= 0.005;
   group3.rotation.y += 1;
   group4.rotation.y += 1;
   group5.rotation.y += 1.5;
   group6.rotation.y += 1.5;
   group7.rotation.y -= 1.5;
   group8.rotation.y += 1.2;
  }
  function Animation() {
   render();
   selfRotation();
   revolution();
   requestAnimationFrame(Animation); 
  }

最后再調(diào)用一下 init()和Animation()函數(shù)就OK了。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論