/
index.html
218 lines (198 loc) · 5.86 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
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">
<head>
<title>One Piece - Top war</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #808080;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
a {
color: #0080ff;
}
b { color: lightgreen }
#container {
white-space: nowrap;
}
#container_logzbuf {
width: 50%;
display: inline-block;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="container_logzbuf">
</div>
</div>
<script src="../libs/three.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/controls/TrackballControls.js"></script>
<script>
var view = {};
var controls;
var FOV = 50, NEAR = 0.1, FAR = 50000;
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var labeldata = [{
label: '艾斯',
imgurl: './imgs/ace.jpg',
position: [0, 40-FOV, 0],
size: [50, 80, 10]
}, {
label: '马歇尔·D·蒂奇',
imgurl: './imgs/teach.jpg',
position: [-120, 75-FOV, 500],
size: [90, 150, 10]
}, {
label: '唐吉诃德·多弗朗明哥',
imgurl: './imgs/doflamingo.jpg',
position: [120, 90-FOV, 500],
size: [90, 160, 10]
}, {
label: '波雅·汉库克',
imgurl: './imgs/hancock.jpg',
position: [-120, 45-FOV, 1000],
size: [50, 90, 10]
}, {
label: '月光·莫利亚',
imgurl: './imgs/moria.jpg',
position: [120, 90-FOV, 1000],
size: [120, 180, 20]
}, {
label: '乔拉可尔·米霍克',
imgurl: './imgs/mihawk.jpg',
position: [-120, 50-FOV, 1500],
size: [50, 100, 10]
}, {
label: '巴索罗米·熊',
imgurl: './imgs/kuma.jpg',
position: [120, 75-FOV, 1500],
size: [140, 150, 10]
}, {
label: '沙·克洛克达尔',
imgurl: './imgs/crocodile.jpg',
position: [-120, 55-FOV, 2000],
size: [60, 110, 10]
}, {
label: '甚平',
imgurl: './imgs/jinbe.jpg',
position: [120, 50-FOV, 2000],
size: [70, 100, 10]
}];
var textureLoader = new THREE.TextureLoader();
init();
function init() {
// 初始化场景,添加场景内物体
var scene = initScene();
// 初始化整个流程,创建相机、渲染器
view = initView(scene);
controls = new THREE.TrackballControls( view.camera );
// 渲染
animate();
}
function initScene() {
// 创建场景Scene
var scene = new THREE.Scene();
// 添加环境光
scene.add(new THREE.AmbientLight(0x3f2806));
// 添加方向光
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 100, 100);
scene.add(light);
// 设置地面
// 地面纹理
var textureSquares = textureLoader.load( "./imgs/bright_squares256.png" );
textureSquares.repeat.set( 10, 10 );
textureSquares.wrapS = textureSquares.wrapT = THREE.RepeatWrapping;
textureSquares.magFilter = THREE.NearestFilter;
textureSquares.format = THREE.RGBFormat;
// 地面材质
var groundMaterial = new THREE.MeshPhongMaterial( {
shininess: 80,
color: 0xffffff,
specular: 0xffffff,
map: textureSquares
} );
// 地面形状
var planeGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
// 生成地面
var ground = new THREE.Mesh( planeGeometry, groundMaterial );
ground.position.set( 0, -FOV, 0 );
ground.rotation.x = - Math.PI / 2;
ground.scale.set( 1000, 1000, 1000 );
ground.receiveShadow = true;
scene.add( ground );
// 将人物放置在场景(Scene)里
labeldata.forEach(function(item) {
textureLoader.load(item.imgurl, function(texture) {
var geometry = new THREE.BoxBufferGeometry(item.size[0], item.size[1], item.size[2]);
var material = new THREE.MeshLambertMaterial({
map: texture
});
var dotmesh = new THREE.Mesh(geometry, material);
// 设置人物位置
dotmesh.position.set(item.position[0], item.position[1], item.position[2]);
scene.add(dotmesh);
});
});
return scene;
}
function initView(scene) {
var framecontainer = document.getElementById('container_logzbuf');
// 创建相机
var camera = new THREE.PerspectiveCamera(FOV, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR);
// 设置相机位置
camera.position.set(0, 0, 300);
// 将相机添加到场景
scene.add(camera);
// 创建渲染器
var renderer = new THREE.WebGLRenderer({antialias: true, logarithmicDepthBuffer: true});
// 设置渲染器参数
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH/2, SCREEN_HEIGHT);
renderer.domElement.style.position = 'relative';
renderer.domElement.id = 'renderer_logzbuf';
// 将渲染器添加到html容器中
framecontainer.appendChild(renderer.domElement);
return {
container: framecontainer,
renderer: renderer,
scene: scene,
camera: camera
};
}
function animate() {
// 帧动画
requestAnimationFrame(animate);
// 更新控制器
controls.update();
// 更新屏幕画面
render();
}
function render() {
updateRendererSizes();
view.renderer.render(view.scene, view.camera);
}
function updateRendererSizes() {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
view.renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
view.camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
view.camera.updateProjectionMatrix();
view.camera.setViewOffset( SCREEN_WIDTH, SCREEN_HEIGHT, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT );
view.container.style.width = 100 + '%';
}
</script>
</body>
</html>