建立模型地球

Created: November-22, 2018

有關此示例的紋理，請訪問： http ： //planetpixelemporium.com/planets.html

安裝或設定

你可以通過 npm 安裝三個

npm install three

或者將其作為指令碼新增到 HTML 頁面

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r85/three.min.js" />

HTML：

<html>
<head>
    <meta charset=utf-8>
    <title>Earth Model</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js" />
    <script>
        // Our Javascript will go here.
    </script>
</body>
</html>

建立場景

為了能夠顯示任何帶有 three.js 的東西，我們需要三件事：一個場景，一個攝像頭和一個渲染器。我們將使用相機渲染場景。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

建立球體

為球體建立幾何體
建立一個 phong 材料
建立一個 3D 物件
將其新增到場景中

StackOverflow 文件

var geometry = new THREE.SphereGeometry(1, 32, 32);
var material = new THREE.MeshPhongMaterial();
var earthmesh = new THREE.Mesh(geometry, material);

新增漫反射紋理

漫反射貼圖設定曲面的主要顏色。當我們將它應用於球體時，我們得到以下影象。

https://i.stack.imgur.com/7MXox.jpg

StackOverflow 文件

material.map    = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');

新增凹凸貼圖紋理

它的每個畫素都充當表面上的高度。
由於它們的影子，山脈看起來更清晰。
可以使用 bumpScale 引數更改地圖對照明的影響程度。
使用凹凸貼圖不會建立或需要額外的頂點（與置換貼圖不同）

https://i.stack.imgur.com/dG4sE.jpg

StackOverflow 文件

material.bumpMap   = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg');     
material.bumpScale = 0.05;

新增鏡面紋理

使用紋理更改物件的光澤度。
每個畫素確定鏡面反射的強度。
在這種情況下，只有海是鏡面的，因為水反射的光比地球更多。
你可以使用鏡面反射引數控制鏡面反射顏色。

https://i.stack.imgur.com/3tqI6.jpg

StackOverflow 文件

material.specularMap = THREE.ImageUtils.loadTexture('images/earthspec1k.jpg')
material.specular  = new THREE.Color('grey')

新增雲層

我們用畫布建立 canvasCloud，並將其用作紋理。
我們這樣做是因為 jpg 不處理 alpha 通道。（但是，PNG 影象呢）
我們需要根據以下影象製作程式碼來構建紋理。

https://i.stack.imgur.com/rzA2U.jpg

https://i.stack.imgur.com/ngioK.jpg

StackOverflow 文件

var geometry   = new THREE.SphereGeometry(0.51, 32, 32)
var material  = new THREE.MeshPhongMaterial({
  map         : new THREE.Texture(canvasCloud),
  side        : THREE.DoubleSide,
  opacity     : 0.8,
  transparent : true,
  depthWrite  : false,
});
var cloudMesh = new THREE.Mesh(geometry, material)
earthMesh.add(cloudMesh)

我們將 cloudMesh 附加到 earthMesh，以便它們一起移動。
我們禁用 depthWrite 並設定 transparent: true 告訴 three.js，雲網是透明的。
我們設定了 THREE.DoubleSide，這樣雙方都可見。
- 這避免了在地球邊緣產生偽影。
最後，我們設定 opacity: 0.8 使雲更透亮

新增旋轉運動

在渲染迴圈中，你只需增加旋轉

最後，我們將為雲層設定動畫，使其看起來更逼真。

updateFcts.push(function(delta, now) {
    cloudMesh.rotation.y += 1 / 8 * delta;
    earthMesh.rotation.y += 1 / 16 * delta;
  })