three.js では立方体や球を簡単に作成できますが、内部でどのようにデータを持っているのか気になったので頂点をダンプしてみました。ついでに、任意の頂点を書きかえて、新たな形を表示させてみました。
- 目次 -
スポンサーリンク
頂点の確認方法
頂点の情報は Geometry 内部の配列 vertices に保持されています。
アクセスはこんな感じになります。
|
1 2 3 4 5 6 7 |
var geo = new THREE.PlaneGeometry(30, 20, 3, 2); for (var i = 0; i < geo.vertices.length; i++) { var vertex = geo.vertices[i]; console.log(vertex.x); console.log(vertex.y); console.log(vertex.z); } |
PlaneGeometry
平面 を作る PlaneGeometry でオブジェクトを生成し、頂点をダンプしてみます。指定は
PlaneGeometry(30, 20, 3, 2) とします（幅 30、高さ 20、横 3分割、縦 2分割）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<html> <head> <script type="text/javascript" src="libs/three.min.js"></script> <script type="text/javascript" src="libs/perlin-noise-simplex.js"></script> </head> <body> <div id="WebGL-area"></div> <script type="text/javascript"> function init() { var w = window.innerWidth; var h = window.innerHeight; var scene = new THREE.Scene(); var geo = new THREE.PlaneGeometry(30, 20, 3, 2); // 頂点をダンプ for (var i = 0; i < geo.vertices.length; i++) { var vertex = geo.vertices[i]; console.log(i + ':' + vertex.x + ' ' + vertex.y + ' ' + vertex.z); } var mat = new THREE.MeshLambertMaterial({color: 0xf0ff88}); mat.wireframe = true; var mesh = new THREE.Mesh(geo, mat); mesh.position.set(0, 0, 0); scene.add(mesh); var camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 1000); camera.position.set(0, 0, 60); camera.lookAt(scene.position); var renderer = new THREE.WebGLRenderer(); renderer.setSize(w, h); renderer.setClearColor(new THREE.Color(0xffffff)); // document.getElementById("WebGL-area").appendChild(renderer.domElement); renderer.render(scene, camera); } window.onload = init </script> </body> </html> |
描画結果
描画結果
頂点を確認
頂点のダンプ出力結果はこうなりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
0: -15 10 0 1: -5 10 0 2: 5 10 0 3: 15 10 0 4: -15 0 0 5: -5 0 0 6: 5 0 0 7: 15 0 0 8: -15 -10 0 9: -5 -10 0 10: 5 -10 0 11: 15 -10 0 |
頂点 0~11 は次のように配置されているようです。
CubeGeometry
直方体 を作る CubeGeometry でオブジェクトを生成し、頂点をダンプしてみます。見やすいように X 軸方向に長くのばし、各面は 2 分割します。指定は CubeGeometry(30, 10, 10, 2, 2, 2) とし（xサイズ 30、yサイズ 10、zサイズ 10、x 2分割、y 2分割、z 2分割）、先ほどのソースを下記のように置き換えます。
|
1 2 3 4 5 6 7 |
var geo = new THREE.PlaneGeometry(30, 20, 3, 2); ↓ 置き換え var geo = new THREE.CubeGeometry(30, 10, 10, 2, 2, 2); camera.position.set(0, 0, 60); ↓ 置き換え camera.position.set(30, 30, 30); |
描画結果
描画結果
頂点を確認
頂点のダンプ出力結果はこうなりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
0: 15 5 5 1: 15 5 0 2: 15 5 -5 3: 15 0 5 4: 15 0 0 5: 15 0 -5 6: 15 -5 5 7: 15 -5 0 8: 15 -5 -5 9: -15 5 -5 10: -15 5 0 11: -15 5 5 12: -15 0 -5 13: -15 0 0 14: -15 0 5 15: -15 -5 -5 16: -15 -5 0 17: -15 -5 5 18: 0 5 -5 19: 0 5 0 20: 0 5 5 21: 0 -5 5 22: 0 -5 0 23: 0 -5 -5 24: 0 0 5 25: 0 0 -5 |
頂点 0~25 は次のように配置されているようです。
外部に触れないので中央には頂点がないようです。
頂点を書きかえる
vertices を書きかえることでオブジェクトの形状を変更できます。たとえば
|
1 |
geo.vertices[4].x += 10; |
という一行を追加すると、以下のように表示されます。
