Three.jsのBoxGeometryでエッジ部分だけ線で表示させる


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

Three.jsやってみてる

たとえばBoxGeometryでwireframe表示させると簡単に線画で描写されるけど

対角線も表示されてしまうので、対角線無しでエッジ部分の線だけで描画する方法

Three.jsのリビジョンは r86 を使用した



EdgesGeometryを使用してやる


下記のようにエッジ部分だけ描画したマテリアルを作りたい

下記を参考にした

javascript - Three.JS wireframe material - all polygons vs. just edges - Stack Overflow

three.js docs - EdgesGeometry

つまり、

  • BoxBufferGeometryでBoxのジオメトリを作成
  • EdgesGeometryにBoxのジオメトリを追加
  • LineSegmentsで線画として追加
  • sceneに線画を追加して描画

をしてやればよい

例えば上の回転してるboxのマテリアルのソースコードは下記のようになる(jsだけ抜粋)

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
var scene, camera, renderer;
var axes;
var spotLight;
function init() {
// rendererを追加
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xeeeeee));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild( renderer.domElement );
// scene, camera, AxesHelperを追加
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 4000);
axes = new THREE.AxisHelper(200);
camera.position.set(-30, 30, 30);
camera.lookAt(scene.position);
scene.add(axes);
//////////////////////////////////////////////// Light
// spotlight
spotLight = new THREE.SpotLight(0xffffff, 1.0);
spotLight.position.set(-30, 20, -10);
spotLight.castShadow = true;
scene.add(spotLight);
// ambientlight
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
ambientLight.position.set(0,1,0);
scene.add(ambientLight);
////////////////////////// オブジェクトを追加
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(0, -2, 0)
plane.receiveShadow = true;
scene.add(plane);
var boxGeometry = new THREE.BoxBufferGeometry(5, 5, 5);
var edges = new THREE.EdgesGeometry(boxGeometry);
var lineBox = new THREE.LineSegments( edges, new THREE.LineBasicMaterial({ color: 0xff55dd }));
lineBox.position.set(0, 2, 0);
scene.add(lineBox);
animate();
// アニメーション、lineBoxを回転させる
function animate() {
requestAnimationFrame(animate);
lineBox.rotation.x += 0.01;
renderer.render(scene, camera);
}
}
init();


BoxGeometryでしか試してないけどおそらく別のGeometryでも大丈夫なのではないかと思う

詳しくは公式を参照したほうが良さそう


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