-
Notifications
You must be signed in to change notification settings - Fork 22
/
demo.html
110 lines (97 loc) · 2.87 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bungie TGXLoader for three.js</title>
<script src="three.js" type="text/javascript"></script>
<script src="three.orbitcontrols.js" type="text/javascript"></script>
<script src="three.tgxloader.js" type="text/javascript"></script>
<style>
body {
margin: 0;
background: #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<script>
var camera, scene, renderer, controls;
var mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.z = 1000;
scene.add(camera);
// Lights
var ambient = new THREE.AmbientLight(0xffffff/*0x222222*/);
ambient.name = 'AmbientLight';
scene.add(ambient);
var frontLight = new THREE.PointLight(0xffffff, 0.1, 0);
frontLight.name = 'FrontLight';
frontLight.position.set(0, 100, 500);
camera.add(frontLight);
var backLight = new THREE.PointLight(0xffffff, 0.1, 0);
backLight.name = 'BackLight';
backLight.position.set(0, 0, -30);
camera.add(backLight);
var spotLight = new THREE.SpotLight(0xffffff, 0.8, 0);
spotLight.name = 'SpotLight';
spotLight.position.set(-350, 500, -200);
spotLight.rotation.x *= Math.PI / 180;
camera.add(spotLight);
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
preserveDrawingBuffer: true
});
renderer.setClearColor(0xffffff, 0);
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
// Controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.rotateSpeed = 2.0;
controls.zoomSpeed = 0.5;
controls.minPolarAngle = Math.PI / 2;
controls.maxPolarAngle = Math.PI / 2;
controls.addEventListener('change', function() {
//console.log(controls);
render();
});
// Load Item
var itemHash = 1274330687; // Gjallarhorn
THREE.TGXLoader.APIKey = '{api-key}'; // https://www.bungie.net/en/Application
var loader = new THREE.TGXLoader();
loader.load(itemHash, function(geometry, materials) {
console.log('LoadedItem', geometry, materials);
mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials));
mesh.rotation.x = -(90 * Math.PI / 180);
mesh.scale.set(500, 500, 500);
scene.add(mesh);
});
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
controls.update();
}
function render() {
if (mesh) {
//mesh.rotation.x += 0.005;
//mesh.rotation.y += 0.01;
}
renderer.render( scene, camera );
}
</script>
</body>
</html>