three.jsはwebGLを簡単に扱えるライブラリー。
ウェブ上で3Dっぽいエフェクトとか色々できる。
ググっても情報があんまりなかった&サンプルのパラメーターのキーが間違ってて動いてなかったので書いときます。
ThickNessはThickness or thickness !
準備
three.js本体 (https://threejs.org/)
サーバーとかウェブサイトが作れるスペース or 仮想サーバー
# 使うライブラリと記述
今回は適当なオブジェクトをトゥーンレンダリングしたい。
使うjsは以下、使うやつだけ抜き出してjsディレクトリに格納。
- three.min.js
- TrackballControls.js - マウスでぐりぐり動かすやつ three.jsのexampleとかに入ってる
- OrbitControls.js - 極座標を中心にカメラを動かす これもexampleとかに入ってる
- OutlineEffect.js - オブジェクトの周りに輪郭線をつけてくれる
これ以外に、hogehoge.jsを作って記述。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title></title>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/OutlineEffect.js"></script>
<script src="js/hogehoge.js"></script>
</body>
</html>
hogehoge.js
window.addEventListener('load', init);
var scene;
var camera;
var renderer;
var controller;
var point;
var effect;
function init() {
scene = new THREE.Scene();
scene.updateMatrixWorld(true);
// カメラ
camera = new THREE.PerspectiveCamera(45, 1, 1, 2000);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// レンダラー
renderer = new THREE.WebGLRenderer({antialias: true, alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 1);
document.body.appendChild(renderer.domElement);
// カメラコントローラー
controller = new THREE.OrbitControls(camera);
// オブジェクト
const geometry = new THREE.SphereGeometry(100, 40, 40);
const ball = new THREE.MeshToonMaterial({ //toon materialを使うと簡単にトゥーンレンダリングっぽくなる。オプションは適当に。
transparent:true,
opacity:1,
color: 0xffffff,
shininess: 1
});
//ボールにだけ別の色のアウトラインをつけたいので、mesh materialにoutlineParametersを設定する
// OutlineEffect.js の上の方にサンプルが書いてあるけど、パラメーターのキーが間違ってるので
ball.outlineParameters = {
thickness: 0.007,
color: new THREE.Color( 0xffffff ),
alpha: 10,
visible: true,
keepAlive: true
}
scene.add(ball);
// ライティング
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1);
directionalLight.position.set( 100, 100, 100);
scene.add( directionalLight );
// エフェクト
// デフォルトの色や太さを設定できる。outlineParametersが設定されていないものはこちらが適用される
effect = THREE.OutlineEffect( renderer, {
defaultThickness: 0.01,
defaultColor: new THREE.Color( 0x888888 ),
defaultAlpha: 0.8,
defaultKeepAlive: true
} );
// レンダリング
effect.render( scene, camera )
}