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);
[ ツッコむ ]
以上です。