Three.jsでGeometryのVertexをアップデートする際elementsNeedUpdateをtrueする必要がある


このエントリーをはてなブックマークに追加

初めてのThree.js 第2版をやってみてる

使用しているThree.jsのリビジョンが r85 で、どうも

第二章の 2.2.1 ジオメトリのプロパティと関数 のところで、自分でコードを書いてみても頂点の座標を変更してもリアルタイムで更新されない

(初版のやつだと、p42の図2-7 立方体の頂点座標を変更のところになります)

のが、どうやら使用しているリビジョンの関係で指定しないといけないパラメータのせいだとわかった



geometry.elementNeedUpdate = true が必要


おそらく本の通りのコードだと

1
2
3
4
5
6
7
mesh.children.forEach(function(e) {
for (var i = 0; i < 8; i++) {
e.geometry.vertices[i].set(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z);
}
e.geometry.verticesNeedUpdate = true;
e.geometry.computeFaceNormals();
})

となってるはずだが、公式のドキュメントをみるとこれに加えて e.geometry.elementNeedUpdate = true も指定してあげないといけないみたい


というわけで動くのは下記になる

1
2
3
4
5
6
7
8
mesh.children.forEach(function(e) {
for (var i = 0; i < 8; i++) {
e.geometry.vertices[i].set(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z);
}
e.geometry.verticesNeedUpdate = true;
e.geometry.elementNeedUpdate = true; // ここを追加
e.geometry.computeFaceNormals();
})


あと、github上のコードだと少し書き方が変わってたので、動くようにするには一部抜粋すると下記のようになるはず

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
function render() {
stats.update();
var vertices = [];
for (var i = 0; i < 8; i++) {
vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));
}
mesh.children.forEach(function (e) {
e.geometry.vertices = vertices;
e.geometry.verticesNeedUpdate = true;
e.geometry.elementNeedUpdate = true; // ここを追加
e.geometry.computeFaceNormals();
});
// render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
}
...

簡単だがちょっとつまったので、以上


このエントリーをはてなブックマークに追加