2016/04/23(土) [n年前の日記]
#1 [prog] three.jsをまだ勉強中
解説記事を眺めながら写経してたけど、昔の three.js と、現在の three.js は、多少仕様が変わってるみたいで。
◎ テクスチャの読み込み。 :
昔は THREE.ImageUtils.loadTexture() でテクスチャを読み込んでいたらしいけど。今は THREE.TextureLoader() を使って読み込むようになったらしい。
_よく利用するThree.js旧バージョンからのコード書き換え(メモ) | cityJumperWEB.com で解説されてた。
_よく利用するThree.js旧バージョンからのコード書き換え(メモ) | cityJumperWEB.com で解説されてた。
◎ UV座標の指定。 :
テクスチャのUV座標を指定する際、昔は new THREE.UV(u, v) で指定してたけど、new THREE.Vector2(u, v) で指定するようになったっぽい。
◎ Face4が無くなった。 :
昔は四角形ポリゴンを Face4 で作れたらしいけど、今現在の版では無くなったらしい。三角形ポリゴン(Face3)を2つ作ってどうにかせい、ということになってるっぽい。
◎ とりあえず動いた。 :
three.js を使って、四角形ポリゴン(= 三角形ポリゴン x 2)を、1枚だけ描画する JavaScript はこんな感じに。
_polygon_test.html (DEMO)
中身はこんな感じ。
_polygon_test.html (DEMO)
中身はこんな感じ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>three.js Polygon Test</title>
<!-- three.js を読み込む -->
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script>
ここにJavaScriptを書く
</script>
</head>
<body>
<div id="canvas-wrapper"></div>
</body>
</html>
var renderer;
var camera;
var startTime;
// 時間測定用メソッドを定義
var now = window.performance && (
performance.now ||
performance.mozNow ||
performance.msNow ||
performance.oNow ||
performance.webkitNow);
var getTime = function () {
return (now && now.call(performance)) || (new Date().getTime());
}
window.addEventListener("DOMContentLoaded", function () {
// テクスチャ読み込み
var loader = new THREE.TextureLoader();
var texture = loader.load('images/lena.png');
// カメラ生成
var fov = 60;
var aspect = window.innerWidth / window.innerHeight;
var near = 1;
var far = 1000;
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
camera.position.set(0, 0, 500);
var controls = new THREE.OrbitControls(camera);
// シーン生成
var scene = new THREE.Scene();
// マテリアル作成
var material = new THREE.MeshLambertMaterial({
map: texture,
color: 0xcccccc,
side: THREE.DoubleSide, // 両面ポリゴンを指定
});
// メッシュ作成
var geom = new THREE.Geometry();
// メッシュに頂点群を登録
geom.vertices.push(new THREE.Vector3(0, 0, 0));
geom.vertices.push(new THREE.Vector3(250, 0, 0));
geom.vertices.push(new THREE.Vector3(0, 250, 0));
geom.vertices.push(new THREE.Vector3(250, 250, 0));
// 三角形ポリゴンを2つ生成
// 反時計回りで頂点を並べる
var face0 = new THREE.Face3(0, 1, 2);
var face1 = new THREE.Face3(1, 3, 2);
// ポリゴンをメッシュに登録
geom.faces.push(face0);
geom.faces.push(face1);
// テクスチャ座標設定
geom.faceVertexUvs[0].push(
[
new THREE.Vector2(0.0, 0.0),
new THREE.Vector2(1.0, 0.0),
new THREE.Vector2(0.0, 1.0),
], [
new THREE.Vector2(1.0, 0.0),
new THREE.Vector2(1.0, 1.0),
new THREE.Vector2(0.0, 1.0),
]
);
// メッシュをシーンに追加
var mesh = new THREE.Mesh(geom, material);
scene.add(mesh);
// 法線ベクトル生成(自動計算)
geom.computeFaceNormals();
geom.computeVertexNormals();
// 平行光源生成
var light1 = new THREE.DirectionalLight(0xcccccc, 1.6);
light1.position.set(100, 100, 100); // ライトの位置
light1.lookAt(new THREE.Vector3(0, 0, 0)); // ライトの向き
scene.add(light1);
// 環境光源生成
var light2 = new THREE.AmbientLight(0x333333);
scene.add(light2);
// レンダラーを用意
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
var container = document.getElementById('canvas-wrapper');
container.appendChild(renderer.domElement);
// アニメさせる
startTime = getTime();
function rendering() {
requestAnimationFrame(rendering);
// 前フレームからの経過時間を取得
var lastTime = getTime();
var dt = (lastTime - startTime) / 1000.0;
controls.update();
mesh.rotation.y += 2.5 * dt;
renderer.clear();
renderer.render(scene, camera);
startTime = lastTime;
}
rendering();
});
// ウインドウリサイズ時の処理
window.addEventListener('resize', function () {
var w = window.innerWidth;
var h = window.innerHeight;
renderer.setSize(w, h);
camera.aspect = w / h;
camera.updateProjectionMatrix();
}, false);
[ ツッコむ ]
#2 [tv] 「重版出来」実写ドラマ版、2話を視聴
人気漫画の実写ドラマ化作品。1話目を見逃してしまったけど、2話目から視聴。漫画編集部を舞台にした作品。
以前原作を読んで、その出来に感心したのだけど。実写ドラマ版も結構イイ感じに出来上がっているようで。良かった…。これは良いスタッフに恵まれた…。
今のところ、小学館系の雑誌で活躍してる本物の漫画家さんが毎回入れ替わりで原稿を描いてくれるっぽい。誰がどんな原稿を描くのか、そのあたりもちょっと楽しみ。
以前原作を読んで、その出来に感心したのだけど。実写ドラマ版も結構イイ感じに出来上がっているようで。良かった…。これは良いスタッフに恵まれた…。
今のところ、小学館系の雑誌で活躍してる本物の漫画家さんが毎回入れ替わりで原稿を描いてくれるっぽい。誰がどんな原稿を描くのか、そのあたりもちょっと楽しみ。
[ ツッコむ ]
以上、1 日分です。