-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (110 loc) · 4.26 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>anpanman</title>
<script src="Three.js"></script>
</head>
<body>
<div id="div_canvas" style="text-align:center;">
<script>
var width = 600;
var height = 600;
var camera, scene, renderer;
init();
animate();
function init() {
//カメラを用意 透視投影
var fov = 80; //画角
var aspect = width / height; //縦横比
var near = 1; //クリッピング手前
var far = 1000; //クリッピング奥
camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.z = 500;
//シーンを用意
scene = new THREE.Scene();
scene.add(camera);
//メッシュを作成(ジオメトリーとマテリアル)
//ジオメトリーを作成
var geometry = new THREE.SphereGeometry( 150, 32, 32 );//球体 顔のベース
var geometryAka = new THREE.SphereGeometry( 33, 32, 32 );//球体 鼻とほっぺ
var geometryKuro = new THREE.SphereGeometry( 18, 32, 32 );//球体 目
var geometryMayu = new THREE.TorusGeometry( 30, 5, 150, 120 );//ドーナツ型 まゆげ
var geometryKuchi = new THREE.TorusGeometry( 50, 5, 150, 120 );//ドーナツ型 くち
//マテリアル
var material = new THREE.MeshLambertMaterial( { color: 0xdeb887 });//肌色
var materialAka = new THREE.MeshLambertMaterial( { color: 0x660000 });//赤
var materialKuro = new THREE.MeshLambertMaterial( { color: 0x000000 });//黒
var materialMayu = new THREE.MeshLambertMaterial( { color: 0x000000, shading: THREE.FlatShading });//黒
//メッシュを作成
var cubeMesh = new THREE.Mesh( geometry, material);
//鼻、ほっぺ
var cubeMeshA1 = new THREE.Mesh( geometryAka, materialAka);
var cubeMeshA2 = new THREE.Mesh( geometryAka, materialAka);
var cubeMeshA3 = new THREE.Mesh( geometryAka, materialAka);
cubeMeshA1.position.x = -53;
cubeMeshA3.position.x = 53;
cubeMeshA1.position.z = 120;
cubeMeshA2.position.z = 150;
cubeMeshA3.position.z = 120;
//目
var cubeMeshK1 = new THREE.Mesh( geometryKuro, materialKuro);
var cubeMeshK2 = new THREE.Mesh( geometryKuro, materialKuro);
cubeMeshK1.position.x = -40;
cubeMeshK2.position.x = 40;
cubeMeshK1.position.y = 50;
cubeMeshK2.position.y = 50;
cubeMeshK1.position.z = 130;
cubeMeshK2.position.z = 130;
//まゆ、くち
var cubeMeshM1 = new THREE.Mesh( geometryMayu, materialMayu);
var cubeMeshM2 = new THREE.Mesh( geometryMayu, materialMayu);
var cubeMeshM3 = new THREE.Mesh( geometryKuchi, materialMayu);
cubeMeshM1.position.x = -40;
cubeMeshM2.position.x = 40;
cubeMeshM1.position.y = 80;
cubeMeshM2.position.y = 80;
cubeMeshM1.position.z = 100;
cubeMeshM2.position.z = 100;
cubeMeshM1.rotation.x = 120;
cubeMeshM2.rotation.x = 120;
cubeMeshM3.position.y = -30;
cubeMeshM3.rotation.x = -120;
cubeMeshM3.position.z = 120;
//メッシュをシーンに追加
scene.add( cubeMesh );
scene.add( cubeMeshA1 );
scene.add( cubeMeshA2 );
scene.add( cubeMeshA3 );
scene.add( cubeMeshK1 );
scene.add( cubeMeshK2 );
scene.add( cubeMeshM1 );
scene.add( cubeMeshM2 );
scene.add( cubeMeshM3 );
//光源を作成
var directionalLight = new THREE.DirectionalLight( 0xf5deb3, 3 );
directionalLight.position.z = 3;
//光源をシーンに追加
scene.add( directionalLight );
//レンダラーを用意
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
//レンダリング
renderer.render( scene, camera );
//トラックボールコントロール
div_canvas = document.getElementById( 'div_canvas' );
div_canvas.appendChild( renderer.domElement );
trackball = new THREE.TrackballControls( camera, renderer.domElement );
}
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame( animate );
render();
}
function render() {
trackball.update();
renderer.render( scene, camera );
}
</script>
</body>
</html>