2016/04/24(日) [n年前の日記]
#1 [prog] three.jsをまだまだ勉強中
延々と続く一本道をポリゴンを並べて作って、カメラを動かして走っていくように見えるところまでは出来た感じ。
_roadmake1.html (DEMO)
ただ、時々変なポリゴンが描画されてしまう。何故こんな状態に…。
ポリゴンの座標を決める際に、どこか捻じれたポリゴンができてしまっておかしくなるのだろうか。そうであるなら…。
捻じれたポリゴンが出てきたら、つまりは四角形ポリゴンを構成する線分が交差したら、頂点座標を一部入れ替えて解決を図る処理を入れてみたり。しかし、それでも事態は改善せず。うーん。
_roadmake1.html (DEMO)
ただ、時々変なポリゴンが描画されてしまう。何故こんな状態に…。
ポリゴンの座標を決める際に、どこか捻じれたポリゴンができてしまっておかしくなるのだろうか。そうであるなら…。
捻じれたポリゴンが出てきたら、つまりは四角形ポリゴンを構成する線分が交差したら、頂点座標を一部入れ替えて解決を図る処理を入れてみたり。しかし、それでも事態は改善せず。うーん。
◎ cameraの動かし方。 :
最初、カメラの動かし方が分からなかったけど。あちこちの解説ページを見ながらコピペして試していたら、以下のような記述で動いてくれた。
camera.lookAt({ x: tgtx, y: tgty, z: tgtz }); camera.position.set(camposx, camposy, camposz); camera.up.set(0, 1, 0);lookAt() で注視点を、position.set() で位置を、up.set() で向き? 天井がどちらにあるか? を指定してるらしい。
◎ geometryの頂点座標が変化する時。 :
例えば、var geom = new THREE.Geometry(); でジオメトリを作って、そこに頂点や面を自分で追加して。そのジオメトリ内の頂点座標が後で変化する場合、そのままではレンダラーに渡した時の座標値のままで変化しない・固定された状態になるらしい。
頂点座標その他が変化した時は、ジオメトリを更新しないといけないようで。関係ありそうなところだけ抜き出してみると…。
レンダリング前に、.dynamic = true; を1回設定してから…。
頂点座標が更新される度に、*NeedUpdate = true; を設定するようで。
頂点座標その他が変化した時は、ジオメトリを更新しないといけないようで。関係ありそうなところだけ抜き出してみると…。
レンダリング前に、.dynamic = true; を1回設定してから…。
// Mesh生成 function initMesh(scene) { // メッシュ作成 geom = new THREE.Geometry(); road = new Road(geom); geom.mergeVertices(); // 法線ベクトル生成(自動計算) geom.computeFaceNormals(); geom.computeVertexNormals(); geom.computeBoundingSphere(); // メッシュをシーンに追加 var mesh = new THREE.Mesh(geom, material); scene.add(mesh); // 頂点座標が一部変化するのでGeometryを更新可能にしておく geom.dynamic = true; };
頂点座標が更新される度に、*NeedUpdate = true; を設定するようで。
function rendering() { // 前フレームからの経過時間を取得 var lastTime = getTime(); var dt = (lastTime - startTime) / 1000.0; // 時間を進める gTime += dt * 6; if (gTime >= 1.0) { road.incIndex(); gTime -= 1.0; // 頂点座標が一部変化するのでGeometryを更新 geom.verticesNeedUpdate = true; geom.elementsNeedUpdate = true; geom.normalsNeedUpdate = true; geom.uvsNeedUpdate = true; // 法線ベクトル等を再計算 geom.computeFaceNormals(); geom.computeVertexNormals(); geom.computeBoundingSphere(); } renderer.clear(); renderer.render(scene, camera); startTime = lastTime; requestAnimationFrame(rendering); } rendering();
◎ テクスチャがぼける問題。 :
テクスチャ読み込み後、minFilter や magFilter の種類を変更したらぼけなくなった。
// テクスチャ読み込み function loadTexture() { var loader = new THREE.TextureLoader(); texture = loader.load('images/tex2.png'); texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; };
[ ツッコむ ]
以上です。