three.js => テクスチャと材料

前書き

マテリアルとテクスチャの紹介。

拡散、バンプ、鏡面、および透明テクスチャ。

パラメーター

パラメータ	詳細
色	色のRGBコンポーネントの数値。
強度	ライトの強度/強度の数値。
fov	カメラ錐台の垂直視野。
アスペクト	カメラ錐台のアスペクト比。
近く	飛行機の近くのカメラ錐台。
遠い	カメラ錐台遠平面。
半径	球の半径。デフォルトは50です。
widthSegments	水平セグメントの数。最小値は3で、デフォルトは8です。
heightSegments	垂直セグメントの数。最小値は2で、デフォルトは6です。
phiStart	水平開始角度を指定します。デフォルトは0です。
phiLength	水平掃引角度サイズを指定します。デフォルトはMath.PI * 2です。
thetaStart	垂直開始角度を指定します。デフォルトは0です。
thetaLength	垂直掃引角度のサイズを指定します。デフォルトはMath.PIです。

備考

デモリンク

地球モデルの作成

この例のテクスチャはhttp://planetpixelemporium.com/planets.htmlから入手できます。

インストールまたはセットアップ

npmで3つインストールできます

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で実際に何かを表示できるようにするには、シーン、カメラ、レンダラーという3つのものが必要です。シーンをカメラでレンダリングします。

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オブジェクトを作成する
それをシーンに追加する

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

拡散テクスチャを追加する

拡散テクスチャがサーフェスの主な色を設定します。球に適用すると、次の画像が得られます。

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

バンプマップテクスチャを追加する

そのピクセルのそれぞれは、サーフェス上の高さとして機能します。
彼らの影のおかげで、山はもっとはっきり見えます。
bumpScaleパラメータを使用して、マップが照明に与える影響を変更することができます。
バンプマップを使用するために余分な頂点が作成されたり、必要とされることはありません（変位マップとは異なります）

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

鏡面テクスチャの追加

テクスチャでオブジェクトの「輝き」を変更します。
各ピクセルは鏡面性の強度を決定する。
この場合、水は地球よりも光を反射するため、海だけが正反射です。
スペキュラパラメータを使用してスペキュラカラーを制御することができます。

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

クラウドレイヤーの追加

canvasCloudをキャンバスで作成し、それをテクスチャとして使用します。
これは、jpgがアルファチャンネルを処理しないためです。（ただし、PNG画像は）
次の画像に基づいてテクスチャを構築するコードを作成する必要があります。

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をつけるcloudMeshはcloudMeshにearthMeshようにearthMeshします。
depthWriteを無効にし、 transparent: trueに設定すると、cloudmeshは透過的です。
サイドをTHREE.DoubleSide設定して、両サイドが表示されるようにします。
- これにより、地球の端にアーチファクトが発生するのを防ぎます。
最後に、 opacity: 0.8に設定して、雲をより半透明にします

回転運動を加える

レンダーループでは、回転を増やすだけです

最後に、クラウドレイヤーをより現実的に見せるために、クラウドレイヤーをアニメートします。

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

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

three.js
テクスチャと材料

サーチ…

前書き

パラメーター

備考

地球モデルの作成