-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
105 lines (88 loc) · 3.09 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
<body style="margin:0;padding:0;overflow:hidden">
<div id="toolbar" style="position:absolute;left:0;top:0;padding:5;background:rgba(255,255,255,0.6);width:100%">
<select id="char" style="width:150px"></select>
<select id="anim"></select>
Models from <a href="http://www.baidu.com/s?wd=thdots">THDotS</a>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/three.js"></script>
<script src="js/War3MdlLoader.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
var game = (function(_t) {
_t.camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 6000)
// the model is standing on the x-y plane and looking at the x-direction
_t.camera.up.set(0, 0, 1)
_t.camera.position.set(400, 0, 0)
_t.camera.lookAt(new THREE.Vector3())
_t.scene = new THREE.Scene()
_t.scene.add(_t.camera)
_t.scene.add(new THREE.AmbientLight(0xaaaaaa))
_t.renderer = new THREE.WebGLRenderer({ antialias:true })
_t.renderer.setClearColor(0x333333)
document.body.appendChild(_t.renderer.domElement)
_t.controls = new THREE.OrbitControls(_t.camera, _t.renderer.domElement)
_t.objects = [ ]
return _t
})({ })
$(window).bind('resize', function(e) {
game.camera.aspect = window.innerWidth / window.innerHeight
game.camera.updateProjectionMatrix()
game.renderer.setSize(window.innerWidth, window.innerHeight)
}).trigger('resize')
var clock = new THREE.Clock()
function render() {
requestAnimationFrame(render)
var dt = clock.getDelta()
THREE.AnimationHandler.update(dt)
game.objects.forEach(function(d) {
d.beforeRender(dt)
})
game.controls.update(dt)
game.renderer.render(game.scene, game.camera)
}
render()
</script>
<script>
if (location.search) THREE.LoadWar3Mdl('mdl/'+location.search.replace(/^\?/, '')+'.txt', function(geos, anims) {
// update texturePath
geos.forEach(function(geo) {
geo.extra.TexturePath = geo.extra.TexturePath ? 'png/' + geo.extra.TexturePath.split('\\').pop().replace(/\.\w+$/g, '.png') : ''
})
var model = new THREE.W3Character(geos)
// move model to center
var box = new THREE.BoundingBoxHelper(model.root, 0xff0000)
box.update()
model.root.position.z = -(box.box.min.z + box.box.max.z) / 2
// add model
game.scene.add(model.root)
game.objects.push(model)
// add another light
var light = new THREE.PointLight(0xaaaaaa)
light.position.copy(box.box.max)
game.scene.add(light)
// update animation options
var select = $('#anim')
select.change(function(e) {
model.playAnimation(this.value)
})
select.append('<option value="">Animate...</option>')
anims.forEach(function(d) {
select.append('<option value="'+d.name+'">'+d.name+'</option>')
})
})
$.get('mdls.txt', function(text) {
var select = $('#char')
select.change(function(e) {
location.search = this.value
})
select.append('<option value="">Select a character...</option>')
text.split('\n').forEach(function(d) {
var name = d.replace(/\r/g, '').replace(/\.txt$/i, ''),
selected = decodeURIComponent(location.search.substr(1)) == name
if (name)
select.append('<option value="'+name+'" '+(selected ? '' : 'un')+'selected="true">'+name+'</option>')
})
})
</script>
</body>