質問編集履歴
1
文法の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -56,164 +56,164 @@
|
|
|
56
56
|
|
|
57
57
|
cube.rotation.y = 0; //回転を止める
|
|
58
58
|
|
|
59
|
+
renderer.render(cube); //シーンのレンダリング
|
|
60
|
+
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
stop();//stop関数を実際に実行する
|
|
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
|
+
```JavaScript
|
|
94
|
+
|
|
95
|
+
window.onload = load_songle; //画面読み込み完了時のイベントハンドラ
|
|
96
|
+
|
|
97
|
+
window.onSongleWidgetReady = ready; //songleWidgetのイベントハンドラ
|
|
98
|
+
|
|
99
|
+
function load_songle() { //イベントハンドラ(load_songle)
|
|
100
|
+
|
|
101
|
+
var songleWidgetElement = //SongleWidget要素を作成
|
|
102
|
+
|
|
103
|
+
SongleWidgetAPI.createSongleWidgetElement ({
|
|
104
|
+
|
|
105
|
+
api: "songle-widget-api-example", //API属性に任意の文字列の設定
|
|
106
|
+
|
|
107
|
+
url: "www.youtube.com/watch?v=Dx_fKPBPYUI"}); //楽曲のURL
|
|
108
|
+
|
|
109
|
+
document.body.appendChild(songleWidgetElement); //DOM要素を追加
|
|
110
|
+
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
function ready(apiKey, songleWidget) { //イベントハンドラ(ready)
|
|
116
|
+
|
|
117
|
+
//CGの描画
|
|
118
|
+
|
|
119
|
+
var scene = new THREE.Scene(); //シーンの作成
|
|
120
|
+
|
|
121
|
+
var aspect = window.innerWidth/window.innerHeight; //aspect比
|
|
122
|
+
|
|
123
|
+
var camera = new THREE.PerspectiveCamera(80, aspect, 1, 1000); //camera
|
|
124
|
+
|
|
125
|
+
camera.position.set(0, 0, 30); //カメラを設置
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
var cubeGeo = new THREE.BoxGeometry(8, 8, 8); //立方体ジオメトリ
|
|
130
|
+
|
|
131
|
+
var cubeMat = new THREE.MeshBasicMaterial({color:0xff0000}); //Material
|
|
132
|
+
|
|
133
|
+
var cube = new THREE.Mesh(cubeGeo, cubeMat); //立方体メッシュの作成
|
|
134
|
+
|
|
135
|
+
cube.position.set(0, 0, 0); //立方体を設置
|
|
136
|
+
|
|
137
|
+
scene.add(cube); //シーンに立方体を追加
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
//4.光源（ライト）の設定と配置
|
|
142
|
+
|
|
143
|
+
var light = new THREE.SpotLight(0xFFFFFF); //光源の種類,色の設定
|
|
144
|
+
|
|
145
|
+
light.position.set(0, 30, 30); //光源の位置(x,y,z)
|
|
146
|
+
|
|
147
|
+
scene.add(light); //シーンに光源を追加
|
|
148
|
+
|
|
149
|
+
//ライトヘルパーを作成
|
|
150
|
+
|
|
151
|
+
var lightHelper = new THREE.SpotLightHelper(light);
|
|
152
|
+
|
|
153
|
+
scene.add(lightHelper);
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
var renderer = new THREE.WebGLRenderer(); //レンダラーの作成
|
|
158
|
+
|
|
159
|
+
renderer.setClearColor(new THREE.Color(0xEEEEEE)); //背景色の設定
|
|
160
|
+
|
|
161
|
+
renderer.setSize(window.innerWidth, window.innerHeight); //サイズを設定
|
|
162
|
+
|
|
163
|
+
document.body.appendChild(renderer.domElement); //DOM要素を追加
|
|
164
|
+
|
|
165
|
+
renderer.render(scene, camera); //シーンのレンダリング
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
songleWidget.on("chorusEnter", function(){
|
|
170
|
+
|
|
171
|
+
console.log("chorus now");
|
|
172
|
+
|
|
173
|
+
//サビの演出を記述---
|
|
174
|
+
|
|
175
|
+
function animate() { //アニメーションを実現するための関数を定義
|
|
176
|
+
|
|
177
|
+
//-------アニメーションに関する記述-------//
|
|
178
|
+
|
|
179
|
+
//立方体をy軸周りに1°（π/180）だけ回転させる
|
|
180
|
+
|
|
181
|
+
cube.rotation.y = cube.rotation.y + Math.PI/180;
|
|
182
|
+
|
|
59
183
|
renderer.render(scene, camera); //シーンのレンダリング
|
|
60
184
|
|
|
185
|
+
requestAnimationFrame(animate); //animate関数を実行（２回目以降）
|
|
186
|
+
|
|
61
187
|
}
|
|
62
188
|
|
|
189
|
+
animate(); //animate関数を実際に実行する（１回目）
|
|
190
|
+
|
|
191
|
+
});
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
songleWidget.on("chorusLeave", function(){
|
|
196
|
+
|
|
197
|
+
console.log("chorus done");
|
|
198
|
+
|
|
199
|
+
//サビの演出を終了---
|
|
200
|
+
|
|
201
|
+
function stop() { //アニメーションを実現するための関数を定義
|
|
202
|
+
|
|
203
|
+
//-------アニメーションに関する記述-------//
|
|
204
|
+
|
|
205
|
+
cube.rotation.y = 0; //回転を止める
|
|
206
|
+
|
|
207
|
+
renderer.render(cube); //シーンのレンダリング
|
|
208
|
+
|
|
209
|
+
}
|
|
210
|
+
|
|
63
211
|
stop();//stop関数を実際に実行する
|
|
64
212
|
|
|
65
213
|
});
|
|
66
214
|
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
|
|
67
219
|
```
|
|
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
|
-
```JavaScript
|
|
94
|
-
|
|
95
|
-
window.onload = load_songle; //画面読み込み完了時のイベントハンドラ
|
|
96
|
-
|
|
97
|
-
window.onSongleWidgetReady = ready; //songleWidgetのイベントハンドラ
|
|
98
|
-
|
|
99
|
-
function load_songle() { //イベントハンドラ(load_songle)
|
|
100
|
-
|
|
101
|
-
var songleWidgetElement = //SongleWidget要素を作成
|
|
102
|
-
|
|
103
|
-
SongleWidgetAPI.createSongleWidgetElement ({
|
|
104
|
-
|
|
105
|
-
api: "songle-widget-api-example", //API属性に任意の文字列の設定
|
|
106
|
-
|
|
107
|
-
url: "www.youtube.com/watch?v=Dx_fKPBPYUI"}); //楽曲のURL
|
|
108
|
-
|
|
109
|
-
document.body.appendChild(songleWidgetElement); //DOM要素を追加
|
|
110
|
-
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
function ready(apiKey, songleWidget) { //イベントハンドラ(ready)
|
|
116
|
-
|
|
117
|
-
//CGの描画
|
|
118
|
-
|
|
119
|
-
var scene = new THREE.Scene(); //シーンの作成
|
|
120
|
-
|
|
121
|
-
var aspect = window.innerWidth/window.innerHeight; //aspect比
|
|
122
|
-
|
|
123
|
-
var camera = new THREE.PerspectiveCamera(80, aspect, 1, 1000); //camera
|
|
124
|
-
|
|
125
|
-
camera.position.set(0, 0, 30); //カメラを設置
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
var cubeGeo = new THREE.BoxGeometry(8, 8, 8); //立方体ジオメトリ
|
|
130
|
-
|
|
131
|
-
var cubeMat = new THREE.MeshBasicMaterial({color:0xff0000}); //Material
|
|
132
|
-
|
|
133
|
-
var cube = new THREE.Mesh(cubeGeo, cubeMat); //立方体メッシュの作成
|
|
134
|
-
|
|
135
|
-
cube.position.set(0, 0, 0); //立方体を設置
|
|
136
|
-
|
|
137
|
-
scene.add(cube); //シーンに立方体を追加
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
//4.光源（ライト）の設定と配置
|
|
142
|
-
|
|
143
|
-
var light = new THREE.SpotLight(0xFFFFFF); //光源の種類,色の設定
|
|
144
|
-
|
|
145
|
-
light.position.set(0, 30, 30); //光源の位置(x,y,z)
|
|
146
|
-
|
|
147
|
-
scene.add(light); //シーンに光源を追加
|
|
148
|
-
|
|
149
|
-
//ライトヘルパーを作成
|
|
150
|
-
|
|
151
|
-
var lightHelper = new THREE.SpotLightHelper(light);
|
|
152
|
-
|
|
153
|
-
scene.add(lightHelper);
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
var renderer = new THREE.WebGLRenderer(); //レンダラーの作成
|
|
158
|
-
|
|
159
|
-
renderer.setClearColor(new THREE.Color(0xEEEEEE)); //背景色の設定
|
|
160
|
-
|
|
161
|
-
renderer.setSize(window.innerWidth, window.innerHeight); //サイズを設定
|
|
162
|
-
|
|
163
|
-
document.body.appendChild(renderer.domElement); //DOM要素を追加
|
|
164
|
-
|
|
165
|
-
renderer.render(scene, camera); //シーンのレンダリング
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
songleWidget.on("chorusEnter", function(){
|
|
170
|
-
|
|
171
|
-
console.log("chorus now");
|
|
172
|
-
|
|
173
|
-
//サビの演出を記述---
|
|
174
|
-
|
|
175
|
-
function animate() { //アニメーションを実現するための関数を定義
|
|
176
|
-
|
|
177
|
-
//-------アニメーションに関する記述-------//
|
|
178
|
-
|
|
179
|
-
//立方体をy軸周りに1°（π/180）だけ回転させる
|
|
180
|
-
|
|
181
|
-
cube.rotation.y = cube.rotation.y + Math.PI/180;
|
|
182
|
-
|
|
183
|
-
renderer.render(scene, camera); //シーンのレンダリング
|
|
184
|
-
|
|
185
|
-
requestAnimationFrame(animate); //animate関数を実行（２回目以降）
|
|
186
|
-
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
animate(); //animate関数を実際に実行する（１回目）
|
|
190
|
-
|
|
191
|
-
});
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
songleWidget.on("chorusLeave", function(){
|
|
196
|
-
|
|
197
|
-
console.log("chorus done");
|
|
198
|
-
|
|
199
|
-
//サビの演出を終了---
|
|
200
|
-
|
|
201
|
-
function stop() { //アニメーションを実現するための関数を定義
|
|
202
|
-
|
|
203
|
-
//-------アニメーションに関する記述-------//
|
|
204
|
-
|
|
205
|
-
cube.rotation.y = 0; //回転を止める
|
|
206
|
-
|
|
207
|
-
renderer.render(scene, camera); //シーンのレンダリング
|
|
208
|
-
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
stop();//stop関数を実際に実行する
|
|
212
|
-
|
|
213
|
-
});
|
|
214
|
-
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
```
|