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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
/*********************************************
http://www.areanine.gr.jp/~banjo/
だら＄らいぶらりぃ～
------------------------------------------
three.js複合体サンプル
THREE.xxxGeometry.merge()
//THREE.MeshFaceMaterial()
THREE.MultiMaterial()
※THREE.GeometryUtils.merge()は、R74で廃止されたらしいです。知らんかったよ・・・
※THREE.MeshFaceMaterial()は、R83で、THREE.MultiMaterial()という名前に変更されました。
★くっつけるgeometry１つずつ、マテリアル変えてみたよ！
------------------------------------------
Date.2016-12-16新規アップ
Date.2017-02-02three.jsの関数名の変更
Autor.banjo
*********************************************/
varmesh;//複合物体。移動させる。
varflg=false;//移動方向を決めるフラグ
//開始
window.addEventListener("DOMContentLoaded",function()
{
//three画面制御
viewCtl=newdaraLib.three.viewCtrl(id_container);
//画面サイズをセット
windowResize();
//マウスコントロールセット
viewCtl.setMouseCtrl("orbit");
varv=viewCtl.addView();
v.setCameraPosition({
upAxis:"z",//カメラの頂点方向
pos:{x:500,y:500,z:500},//カメラの位置
target:{x:0,y:0,z:0}//焦点の位置
});
//ライト
varlight=newTHREE.PointLight(0xffffff,1,0);
light.position.set(0,200,0);
viewCtl.scene.add(light);
varlight=newTHREE.PointLight(0xffffff,1,0);
light.position.set(100,200,100);
viewCtl.scene.add(light);
varlight=newTHREE.PointLight(0xffffff,1,0);
light.position.set(-100,-200,-100);
viewCtl.scene.add(light);
//ガイド座標軸
newdaraLib.three.guideAxis(viewCtl.scene,500);
//物体作成
makeObject();
//イベントリスナセット
window.addEventListener('resize',windowResize);
//タイムラプス
timeLapse();
});
//=================
//
//物体作成
//
//=================
functionmakeObject()
{
varmaterials=[];
//元になる物体
varatama=newTHREE.SphereGeometry(12,36,36);
varmat=newTHREE.MeshPhongMaterial({color:0xffff00});//黄色
materials.push(mat);
//くっつける物体（今回はおんなじ形なので使い回します。
//※元になる物体は、ほかのものがくっついて、どんどん形が変わっていくので、くっつける物体とは別にしておく必要あり）
vargeo=newTHREE.SphereGeometry(10,36,36);//bufferGeometryではだめ。vertexが空になるから
varmat=newTHREE.MeshPhongMaterial({color:0x00ff00});//緑
vartama=newTHREE.Mesh(geo,mat);
//だんだら模様にするためにもう１色作っとく
varmat2=newTHREE.MeshPhongMaterial({color:0x00ffff});//水色
//体を１０個くっつける
varx=12;
for(vari=0;i<10;i++)
{
varrate=1-i*0.05;
tama.scale.set(rate,rate,rate);//玉を小さくする
x+=10*rate;
tama.position.x=x;//位置を決める
x+=10*rate;//次のために足しとく
tama.updateMatrix();//形状を更新する
atama.merge(tama.geometry,tama.matrix,i+1);//マテリアルのインデックスを指定。１つめは頭なので＋１
if(i%2)
materials.push(mat2);//水色
else
materials.push(mat);//緑
}
//※R83で名前が変更されました
//varmat=newTHREE.MeshFaceMaterial(materials);
varmat=newTHREE.MultiMaterial(materials);
mesh=newTHREE.Mesh(atama,mat);
viewCtl.scene.add(mesh);
}
//タイムラプス
timeLapse=function()
{
if(!flg)
{
if(mesh.position.x<100)
mesh.position.x++;
elseif(mesh.position.y<100)
mesh.position.y++;
elseif(mesh.position.z<100)
mesh.position.z++;
else
flg=true;
}
else
{
if(mesh.position.x>-100)
mesh.position.x--;
elseif(mesh.position.y>100)
mesh.position.y--;
elseif(mesh.position.z>-100)
mesh.position.z--;
else
flg=false;
}
viewCtl.render();//描画
reqId=requestAnimationFrame(timeLapse);//繰り返し
};
//画面サイズ変更
functionwindowResize()
{
varw=window.innerWidth-20;
varh=window.innerHeight-id_ribbon.offsetHeight-20;
viewCtl.resize(w,h);
}
