forked from naotaro0123/Live2D-ThreeJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsimpleLive2D_cube.html
147 lines (132 loc) · 4.88 KB
/
simpleLive2D_cube.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Live2D</title>
</meta>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="../../build/three.js"></script>
<!-- Live2Dのコアライブラリ -->
<script src="../../build/Live2D/lib/live2d.min.js"></script>
<!-- Live2Dの便利機能が入ったクラス群 -->
<script src="../../build/Live2D/framework/Live2DFramework.js"></script>
<!-- Live2Dモデルやテクスチャロード管理クラス -->
<script src="../../build/Live2D/src/PlatformManager.js"></script>
<!-- Live2Dモデルの生成やチェンジを行うクラス -->
<script src="../../build/Live2D/src/LAppLive2DManager.js"></script>
<!-- Three.js用のカスタムクラス -->
<script src="Live2DRender.js"></script>
<script>
// シーン生成
var scene = new THREE.Scene();
// カメラ生成
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
// レンダラー生成
var renderer = new THREE.WebGLRenderer();
// レンダラーのサイズ指定
renderer.setSize( window.innerWidth, window.innerHeight );
// DOMを追加
document.body.appendChild( renderer.domElement );
// オフスクリーン用(Live2Dを描画)
var offScene1 = new THREE.Scene();
var offRenderTarget1 = new THREE.WebGLRenderTarget(
window.innerWidth,
window.innerHeight,
{
minFilter: THREE.LinearFilter,
magFilter: THREE.NearestFilter,
format: THREE.RGBAFormat
}
);
var textureLoader = new THREE.TextureLoader();
// 背景テクスチャのロード
var background = textureLoader.load("../../assets/images/background.jpg");
// プレーン生成
var backgeo = new THREE.PlaneGeometry( 8, 8, 1, 1 );
var backmat = new THREE.MeshBasicMaterial( { map: background } );
var backmesh = new THREE.Mesh( backgeo, backmat );
backmesh.position.set(0, 0, -2);
scene.add( backmesh );
// Live2Dモデルパス
var MODEL_PATH1 = "../../assets/Epsilon2.1/";
var MODEL_JSON1 = "Epsilon2.1.model.json";
// Live2Dモデル生成
var live2dmodel1 = new THREE.Live2DRender( renderer, MODEL_PATH1, MODEL_JSON1 );
// オフスクリーンを描画するPlane生成
var geometry = new THREE.PlaneGeometry( 6, 6, 1, 1 );
// レンダーテクスチャをテクスチャにする
var material = new THREE.MeshBasicMaterial( { map:offRenderTarget1.texture } );
var plane = new THREE.Mesh( geometry, material );
// この1行がないと透過部分が抜けない
plane.material.transparent = true;
plane.position.set(0, 0, -1);
scene.add( plane );
// ライト
var directionalLight = new THREE.DirectionalLight('#aaaaff', 1);
directionalLight.position.set(0, 10, 10);
scene.add(directionalLight);
// キューブ
var geometry1 = new THREE.BoxGeometry(1,1,1);
var material1 = new THREE.MeshPhongMaterial( { color: '#ffffff' } );
var cube = new THREE.Mesh( geometry1, material1 );
cube.position.set(0, -1, 0);
scene.add( cube );
// リサイズへの対応
window.addEventListener('resize', function(){
renderer.setSize( window.innerWidth, window.innerHeight );
// オフスクリーンのレンダーターゲットもリサイズ
offRenderTarget1.setSize( window.innerWidth, window.innerHeight );
// マウスドラッグ座標もリサイズ
live2dmodel1.setMouseView(renderer);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}, false);
// コンテキストメニューの表示を阻止
document.addEventListener('contextmenu', function(e){
// 右クリックの挙動を阻止する
e.preventDefault();
}, false);
// マウスクリック処理
document.addEventListener('mousedown', function(e){
switch(e.button){
case 0: // 左クリック
// ランダムモーション指定
live2dmodel1.setRandomMotion();
// 特定のモーション指定は、setMotion("ファイル名")を使う。
// 例：live2dmodel.setMotion("Epsilon2.1_m_08.mtn");
break;
case 2: // 右クリック
// ランダム表情切り替え
live2dmodel1.setRandomExpression();
// 特定の表情切り替えは、setExpression("ファイル名")を使う。
// 例：live2dmodel.setExpression("f04.exp.json");
break;
}
});
/**
* 描画処理
*/
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// オフスクリーン切り替え描画
renderer.render( offScene1, camera, offRenderTarget1 );
// オフスクリーンにLive2D描画
live2dmodel1.draw();
// resetGLStateしないとgl.useProgramが呼ばれず以下のエラーになる
// [error]location is not from current program
renderer.resetGLState();
// Mainシーンで描画
renderer.render( scene, camera );
};
render();
</script>
</body>
</html>