three.jsを散策する⑥ マテリアルよりどりみどり

three.jsを学んでいくシリーズの６回目です。様々なマテリアルでトーラスを描画して特性を確認してみます。

three.jsの公式サイトのドキュメンテーションを参考にMaterial（マテリアル）による質感の違いを確認していきます。公式サイトを確認したい方は下記のリンクからどうぞ。

ルートフォルダにindex.htmlとmain.jsを作成します。カメラの角度を変えられるようにOrbitControls（オービットコントロール）も実装しておきます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>three.js app</title>
    <script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
    <script type="importmap">
     {
       "imports": {
	 "three": "https://unpkg.com/three@v0.156.1/build/three.module.js",
	 "three/addons/": "https://unpkg.com/three@v0.156.1/examples/jsm/"
       }
     }
    </script>
  </head>
  <body>
    
    <div id="canvas-container"></div>
    
    <script type="module" src="main.js"></script>
  </body>
</html>

main.jsを下記のように作成します。質感の違いがわかりやすいように今回はライトをいれています。

main.js

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const container = document.querySelector( '#canvas-container' );
let width = container.clientWidth;
let height = 350;

//レンダラー
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( width, height );
container.appendChild( renderer.domElement );

//シーン
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );

//カメラ
const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 10000 );
const controls = new OrbitControls( camera, renderer.domElement );
camera.position.set( 0, 0, 6 );
controls.update();

//リサイズの処理
function resize() {		
    renderer.setSize( container.clientWidth, height );
    camera.aspect = container.clientWidth / height;		
    camera.updateProjectionMatrix();
};
window.addEventListener( "resize", resize );

//ジオメトリ
const geometry = new THREE.TorusGeometry( 1, 0.4, 8, 64 );
const material = new THREE.MeshBasicMaterial({ color: 0x008080 });
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

//ライト
const light = new THREE.DirectionalLight( 0xffffff, 9.0 );
light.position.set( 3, 3, 3 );
scene.add( light );

//アニメーション
function animate() {
    requestAnimationFrame( animate );

    torus.rotation.y += 0.01;

    controls.update();
    
    renderer.render( scene, camera );
}

animate();

トーラスを描画して確認していきます。ジオメトリの部分を変更していきます。

MeshBasicMaterial（ベーシックマテリアル）

MeshBasicMaterial（ベーシックマテリアル）はライトが反映されないフラットな描画になるマテリアルです。main.jsのジオメトリの部分を下記のようにして描画してみます。

const geometry = new THREE.TorusGeometry( 1, 0.4, 8, 64 );
const material = new THREE.MeshBasicMaterial({ color: 0x008080 });
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

MeshLambertMaterial（ランバートマテリアル）

MeshLambertMaterial（ランバートマテリアル）は部分的にライトを反射する非物理ベースのマテリアルです。下記のようにして描画してみます。

const geometry = new THREE.TorusGeometry( 1, 0.4, 8, 64 );
const material = new THREE.MeshLambertMaterial({ color: 0x008080 });
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

ライトが反映されるとぐっと立体感が増しますね。

MeshPhongMaterial（フォンマテリアル）

MeshLambertMaterial（フォンマテリアル）はMeshLambertMaterial（ランバートマテリアル）と違った反射をする非物理ベースのマテリアルですね。下記のようにして描画してみます。

const geometry = new THREE.TorusGeometry( 1, 0.4, 8, 64 );
const material = new THREE.MeshPhongMaterial({ color: 0x008080 });
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

MeshLambertMaterial（ランバートマテリアル）より滑らかな感じになりましたね。

MeshStandardMaterial（スタンダードマテリアル）

MeshStandardMaterial（スタンダードマテリアル）は多くの3Dアプリケーションで使われている物理ベースのマテリアルとのこと。下記のようにして描画してみます。

const geometry = new THREE.TorusGeometry( 1, 0.4, 8, 64 );
const material = new THREE.MeshStandardMaterial({ color: 0x008080 });
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

MeshPhysicalMaterial（フィジカルマテリアル）

MeshPhysicalMaterial（フィジカルマテリアル）はMeshStandardMaterial（スタンダードマテリアル）より多くのプロパティを指定できる物理ベースのマテリアルとのこと。おいおい学んでいければいいかなといったところですね。

const geometry = new THREE.TorusGeometry( 1, 0.4, 8, 64 );
const material = new THREE.MeshPhysicalMaterial({ color: 0x008080 });
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

MeshToonMaterial（トゥーンマテリアル）

MeshToonMaterial（トゥーンマテリアル）は境界がはっきり描画されるマテリアルですね。下記のようにして描画してみます。

const geometry = new THREE.TorusGeometry( 1, 0.4, 8, 64 );
const material = new THREE.MeshToonMaterial({ color: 0x008080 });
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

MeshNormalMaterial（ノーマルマテリアル）

MeshNormalMaterial（ノーマルマテリアル）はジオメトリのベクトルに応じてRGBカラーで描画してくれるマテリアルとのこと。

const geometry = new THREE.TorusGeometry( 1, 0.4, 8, 64 );
const material = new THREE.MeshNormalMaterial();
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

今回はマテリアルをいろいろ試してみました。

< Previous Article Next Article >

Back to Articles